Color contrast checker
Large heading text
Normal body text looks like this. The quick brown fox jumps over the lazy dog.
| Level | Normal text | Large text | UI & icons |
|---|---|---|---|
| AA required by most laws | 4.5:1 | 3:1 | 3:1 |
| AAA stricter target | 7:1 | 4.5:1 | — |
Large text means 18pt and up, or 14pt bold. Black on white is 21:1; two identical colors are 1:1.
About this checker
Test any text and background color pair against WCAG 2.2. Type a hex code or pick a color and the ratio, the pass marks and the preview all update as you type — nothing to submit.
Use it when you have already chosen colors and need to know whether they are safe for text: body copy, buttons, labels on a colored background. When a pair fails, the checker names the nearest shade of your text color that would pass, so you keep the hue and only move the lightness.
FAQ
What contrast ratio do I need?
WCAG 2.2 requires at least 4.5:1 for normal text and 3:1 for large text (18pt, or 14pt bold) and UI components to pass level AA. Level AAA requires 7:1 for normal text and 4.5:1 for large text.
How is contrast ratio calculated?
The ratio compares the relative luminance of the two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. Pure black on white is 21:1; identical colors are 1:1.
What should I do if my colors fail?
Darken the text color or lighten the background until the ratio passes. When a pair fails, the line under the result shows the nearest passing shade of your text color.