Detect and fix low-contrast text Posted on December 8, 2020December 17, 2020 by Farzad.Kamali See the low-contrast problem 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 boxdepend 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”
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.