Stop Guessing Text Colors. Chrome DevTools Can Pick an Accessible One for You

Light grey text on white looks clean in a design file. It's also one of the most common accessibility failures on the web, and it's easy to miss because it looks fine on your own bright screen.

Here's the thing: you don't need to guess a darker shade. Chrome DevTools will measure the contrast and suggest a color that passes.

The numbers you're aiming for

WCAG, the standard most accessibility checks use, measures contrast as a ratio between text color and background. WCAG's contrast guidance sets these levels:

To make this concrete, I calculated a few common greys on a white background:

That #9e9e9e is a very popular "subtle" grey. It fails.

Fixing it in DevTools

These steps follow Chrome's contrast documentation:

1. Inspect the text. Right-click it and choose Inspect. Hovering the element in inspect mode shows its contrast ratio in the tooltip, with a warning sign if it's too low.
2. Open the Color Picker. In the Styles pane, click the small color swatch next to the element's color value.
3. Expand "Contrast ratio." The picker shows the current ratio and whether it meets AA or AAA.
4. Use the lines. The shade area shows two lines. Drag the circle below the top line to pass AA, or below the bottom line to pass AAA.
5. Or let DevTools choose. Click Use suggested color next to the AAA level, and DevTools applies a text color that passes.

Then copy the new value into your CSS. DevTools changes are only temporary.

What's new in this month's DevTools

Chrome's November 2026 DevTools update, covering Chrome 155 and 156, added two things to the color picker:

• APCA suggestions for light text on dark backgrounds, which is exactly the case that trips up dark modes.
• Converting out-of-gamut colors to oklab() and oklch() without producing NaN values.

APCA is a newer contrast method that accounts for how we actually perceive light and dark text differently. Older guides say you need to switch it on under Settings > Experiments, while newer ones show it by default. If your picker shows only AA and AAA, check Experiments in your version.

Dark mode needs its own check

Contrast doesn't carry over automatically when you flip themes. Here's the same idea on a common dark background:

Run the DevTools check in both themes. It takes a minute, and dark modes are where low-contrast text hides most often.

Bonus: check contrast in code

If you generate colors or build a design system, you can test contrast automatically. This is the WCAG formula in a few lines:

function luminance(hex) {
  const [r, g, b] = hex.replace('#', '').match(/../g)
    .map(x => parseInt(x, 16) / 255)
    .map(c => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function contrast(fg, bg) {
  const [a, b] = [luminance(fg), luminance(bg)].sort((x, y) => y - x);
  return (a + 0.05) / (b + 0.05);
}

contrast('#9e9e9e', '#ffffff').toFixed(2); // "2.68"
contrast('#595959', '#ffffff').toFixed(2); // "7.00"

Drop it into a unit test and you'll catch a failing color before it ever ships.

What's your go-to for checking contrast? I'm curious how many people check dark mode separately, because I suspect it's not many.