DEV Community

Dominika Zając (she/her) 🇵🇱
Dominika Zając (she/her) 🇵🇱

Posted on


How to use Chrome DevTools to find a color fixing insufficient color contrast ratio on your HTML element

Insufficient color contrast ratio is one of the most popular problems connected with accessibility. Fortunately, it is quite well find by automated tools like Lighthouse or Accessibility Insights for Web. But did you know that Chrome DevTools can help you not only detect that issue but also fix it? How to do so?

Screenshot from Chrome Dev Tools with hover with element properties on it. Big red arrow is pointing at ! icon next to "Contrast" label

When you open Chrome DevTools and inspect the given element toolbar with details of it will be presented. And as it’s visible on the picture it may show us an orange warning icon close to the Contrast category. It means the contrast color ratio between text on that element and its background is not sufficient.

Screenshot of Styles tab of Chrome DevTools with open color picker. Contrast ratio section is expanded and there are 2 buttons with reload icons below. First of them has label AA, the second one AAA

When you take a look at the Styles tab of that element you can do even more. Click on the square color preview on the left side of the color property value to open the color picker. Below the color value input, you may see an expendable section with contrast ratio information. The red icon close to the ratio informs us that we should take a look at that values. And reload button allows Chrome to automatically propose the new color — which will have a correct contrast ratio and as close to ours as possible. Nice way to fix that issue, don’t you think?

Hope, it will help you keep you webpages accessible for everyone!

Top comments (0)

Timeless DEV post...

Git Concepts I Wish I Knew Years Ago

The most used technology by developers is not Javascript.

It's not Python or HTML.

It hardly even gets mentioned in interviews or listed as a pre-requisite for jobs.

I'm talking about Git and version control of course.

One does not simply learn git