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…
Choosing accessible text colors can be a challenge, especially when it seems to look fine on your screen. Yet, this is one of the most prevalent accessibility issues on the web. Fortunately, Google's Chrome DevTools can automatically suggest an accessible color for you.
The Web Content Accessibility Guidelines (WCAG) measure contrast through a ratio between text color and background. For normal text, the standard is 4.5:1, while large text should meet a minimum of 3:1.
Using Chrome DevTools is straightforward. First, inspect the text element. A contrast ratio will then appear in the tooltip, signaling if it's too low. Next, open the color picker in the Styles pane. Here, you can see the current ratio and whether it meets the AA or AAA standards. Drag the shade area of the picker to reach the required contrast level. Alternatively, click 'Use suggested color' for DevTools to apply an appropriate color. Remember, these changes are temporary.
In the latest update of Chrome's DevTools (November 2026), two new features were introduced: APCA suggestions for light text on dark backgrounds, specifically addressing dark mode issues, and automatically converting out-of-gamut colors to oklab() and oklch() without producing NaN values.
When switching themes, it's crucial to run the contrast check again, as contrast doesn't carry over automatically. Both light and dark modes require their own contrast checks.
For developers generating colors or building design systems, you can automatically test contrast using JavaScript. By implementing the WCAG formula, you can detect failing colors before they become part of your shipped product.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
