Detect and fix low-contrast text

See the low-contrast problem

run command
Active Inspect element on Chrome and then select “Run command”
Type “render” and when you see “Show rendering” , click on it !
Now you can emulate vision deficiencies

Inspect the elements

On inspect, hover on any elements to see if contrast is OK, beside contrast rate (in example is 5.08), there are 3 grades for quality, A, AA and AAA
If I change color to white, contrast rate become 1.13 and doesn’t pass any accessibility rate!

Detect page contrast issues

“CSS-OVERVIEW” is the tool that helps us to detect all color ranges and contrast issues in a page.

To enable CSS-OVERVIEW, click settings on chrome dev-tool
Then from EXPERIMENTS, check the CSS-OVERVIEW box
close setting window, and then maybe needs to refresh dev-tool, press button “Refresh” on top of your dev-tool.
Now you should see CSS-Overview tab.
Click on it, and then click on “Capture Overview”
On Summary, you can see if there is element that failed on contrast test

How to fix the contrast issues

Find and select the element has contrast issue, then click on color box, and open contrast ratio drop-down box.
Now, should see the Contrast-ratio box
depend on the standards of the website select AA or AAA and click on refresh button beside color box
As you see the color code selected, is mentioned there
Depend on the selected standard, color code is different.
Now you can grab the color code and modify text color code in css file

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s