Color Contrast Checker
Measure the contrast between a text color and the background behind it, and see at a glance which WCAG levels it clears. Body text, large text, and non-text visuals each have their own threshold, so a color that fails for paragraphs can still be fine for a heading. When a pair fails, a nearby passing shade is offered.
Design Tools
Private by default
This tool runs entirely in your browser. Your data is never uploaded to a server.
How it works
How the ratio is calculated
ratio = (L₁ + 0.05) ÷ (L₂ + 0.05), where L is relative luminance
Each color is converted to a relative luminance between 0 and 1 by linearising its sRGB channels and weighting them for how bright the eye perceives red, green, and blue. The lighter of the two goes on top, which is why the result never depends on which color you called the foreground.
- The 0.05 offset models ambient screen glare, and it is why the maximum possible ratio is 21:1 rather than infinity.
- Green carries about 72% of the luminance weight, red 21%, and blue 7% — pure blue on black is far harder to read than its brightness suggests.
- The large-text allowance starts at 18pt (24px) regular or 14pt (18.66px) bold.
- 1.4.11 covers visual information needed to identify a component or its state, and graphics needed to understand the content — not decorative borders or every icon on a page.
For reference
What each threshold covers
| Level | Ratio | Applies to |
|---|---|---|
| AA, large text | 3:1 | 18pt and up, or 14pt bold and up |
| AA, non-text | 3:1 | Visual information needed to identify an active user interface component or its state, and parts of graphics required to understand the content |
| AA, body text | 4.5:1 | Everything smaller than large text |
| AAA, large text | 4.5:1 | Enhanced level for headings |
| AAA, body text | 7:1 | Enhanced level for small text |
| Maximum possible | 21:1 | Pure black on pure white |
AAA is an enhanced level that WCAG itself does not expect a whole site to meet. Which level applies to you depends on the rules you are subject to — check them rather than assuming.
How to use
4 clear steps.
Enter or pick the text color.
Enter or pick the background color behind it.
Read the contrast ratio and the pass or fail for each WCAG level.
If body text fails, apply the suggested nearby passing shade.
Good to know
Frequently asked questions
- What contrast ratio do I need?
- WCAG AA asks for 4.5:1 for body text and 3:1 for large text, which means 18pt and above or 14pt bold and above. AAA raises those to 7:1 and 4.5:1. A separate rule, 1.4.11, asks 3:1 of the visual information needed to identify a user interface component or its state, and of the parts of a graphic needed to understand the content — decorative borders and icons are not covered.
- Does the order of the two colors matter?
- No. Contrast is a ratio between two relative luminances, so swapping text and background gives the same number. The swap button is there for convenience, not because it changes the result.
- Why does my brand color keep failing?
- Mid-tone saturated colors — most oranges, yellows, and light greens — sit close to the middle of the luminance scale, which is far from both white and black. They usually work as large headings or backgrounds behind dark text rather than as body text on white.
- What about semi-transparent colors?
- The ratio is computed from the colors as entered. A color with alpha below 1 mixes with whatever is behind it, so composite it over its real backdrop first and check the resulting solid color.