Normal body text sample — the quick brown fox jumps over the lazy dog.
How the ratio is calculated
Each channel is converted to linear light by removing the gamma curve, then combined with the weights 0.2126, 0.7152 and 0.0722 to give relative luminance. Green carries the most weight, which is why light green and light red differ so much in perceived brightness.
The ratio is (lighter + 0.05) / (darker + 0.05). The offset keeps the value finite when both colors are near black. Black on white reaches the maximum of 21:1 and no color pair can exceed it.
Practical targets
Aim for 4.5:1 on body text and 7:1 where you can, especially for long reading. For large or bold headings 3:1 is the floor under AA.
Check the pairs people forget: placeholder text, table zebra striping, button hover states and input borders. Those are the ones that turn a passing page into a failing audit.
| Content | AA | AAA |
|---|---|---|
| Normal text (under 18pt) | 4.5:1 | 7:1 |
| Large text (18pt+ or 14pt bold) | 3:1 | 4.5:1 |
| UI components and graphics | 3:1 | not defined |
Frequently asked questions
Is 4.5:1 a legal requirement?
It depends on jurisdiction. The EU accessibility act and US ADA case law treat WCAG AA as the benchmark, so 4.5:1 is the practical target even where it is not spelled out in statute.
Do logos need to pass?
No. WCAG exempts logotypes and brand text from contrast requirements, but the surrounding navigation does not get the same exemption.
More free tools
Related guides
Related searches
contrast checkerwcag contrastcolor contrast ratioaccessibility checkeraa aaa contrast