Color Contrast Analyzers That Work Directly in Chrome

You don't need separate software to check color contrast. Chrome has good tools built in, and a few free extensions fill the gaps.

Built into Chrome DevTools

• Color picker contrast: inspect a text element, click the color swatch next to its color in the Styles panel, and DevTools shows the contrast ratio with pass or fail for AA and AAA. It even draws lines on the picker showing which shades would pass.
• CSS Overview: the CSS Overview panel lists every color on the page and flags low-contrast text.
• Lighthouse: an accessibility audit flags text that fails contrast, with the elements listed.
• Vision deficiency emulation: in the Rendering panel, preview the page as someone with different types of color blindness.

Extensions

• axe DevTools and WAVE run full accessibility checks, including contrast, and explain each issue.
• Color Palette Extractor pulls every color from a page so you can test the whole palette at once.

What automated checks miss

Tools struggle with text over images and gradients, where the background changes under the text. They also only check the state you're looking at. Check hover, focus, and disabled states by hand, and test text over images at its worst point.

A quick workflow

1. Run Lighthouse or axe to find obvious failures.
2. Fix each with the DevTools color picker, adjusting until it passes.
3. Extract the page palette and test every pair in the color contrast matrix.
4. Check interactive states and text over images by hand.

For the ratios themselves, see the WCAG contrast guide.