Check contrast against WCAG accessibility standards
Whether text is readable isn't a property of the text color or the background color on its own — it's the relationship between them. This checker measures that relationship as a contrast ratio and tells you which accessibility standards the pair meets, so you can catch an unreadable combination while it's still easy to change.
Everything runs entirely inside your browser, with nothing to install or sign up for.
The ratio runs from 1:1 (identical colors, invisible) to 21:1 (black on white). WCAG — the Web Content Accessibility Guidelines — sets thresholds along that range. AA is the level most organisations aim for and the one written into accessibility regulations in many countries: 4.5:1 for normal text, 3:1 for large text. AAA is stricter at 7:1 and 4.5:1, worth targeting for body text on content-heavy sites, though it's demanding enough that hitting it everywhere is unusual.
The catch is what counts as "large". It isn't a judgement call — WCAG defines it as roughly 18pt (24px) and up, or 14pt (18.66px) and up if the text is bold. Anything below that is normal text and needs the higher ratio, so a 20px subheading still has to clear 4.5:1 for AA. Note too that these thresholds apply to text; icons and interface components that convey meaning have their own requirement, and purely decorative elements are exempt.
AA is the practical target for most projects and the level accessibility regulations generally reference. Reach for AAA on body text if you can, but don't let it block a design everywhere.
Around 18pt (24px) or larger, or 14pt (18.66px) or larger when bold. Below that, the stricter normal-text ratio applies even if the text looks fairly big.
Light grey on white is the most common failure. Darkening the text is usually the smallest change that fixes it — take the color into the Color Picker and lower its HSL lightness a step at a time until it passes.
The same thresholds apply, but the background varies across the area. Test the text against the lightest and darkest parts it sits on, or add a solid overlay behind it so there's one background to measure.