Detect and fix low-contrast text

Posted on by

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

1 thought on “Detect and fix low-contrast text”

  1. Christina Bryden Reply

    Hello there!
    I know this is somewhat off topic but I was wondering which blog platform are you
    using for this
    website? I’m getting sick and tired
    of WordPress because I’ve had issues with hackers and I’m
    looking at options for another platform. I would be
    fantastic if you could point me in the direction of a good platform.

Leave a Reply

Your email address will not be published. Required fields are marked *