Check color contrast.
Test a text color against a background color for WCAG AA and AAA accessibility — and get the name of every color you try.
What is a contrast ratio?
A contrast ratio measures how different two colors are in brightness. It runs from 1:1 (a color on itself) up to 21:1 (black on white). The higher the number, the easier the text is to read.
WCAG — the Web Content Accessibility Guidelines — sets minimum ratios so text stays readable for people with low vision, color blindness, or a cheap screen in bright sunlight.
The WCAG thresholds
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5:1 | 3:1 |
| AAA (enhanced) | 7:1 | 4.5:1 |
Large text means at least 24 pixels, or 18.5 pixels if bold. AA is the level most accessibility laws and company policies ask for. AAA is stricter and worth aiming for in body text.
Tips for picking accessible colors
If a pair fails, darken the text or lighten the background — small steps in lightness change the ratio quickly. Gray text on white fails sooner than most people expect: anything lighter than #767676 fails AA at normal size.
Check your muted text, placeholder text and hover states too. They fail far more often than headings.
Need a name for a color that passed? Every color here links to its own page, or you can try the color name generator.