Contrast Checker
Get the exact WCAG 2.1 contrast ratio for any foreground and background colour, with pass/fail results for AA, AAA, large text, and interface components.
| Level | Normal text | Large text | UI / graphics |
|---|---|---|---|
| AA | 4.5 : 1 | 3 : 1 | 3 : 1 |
| AAA | 7 : 1 | 4.5 : 1 | — |
Design is not just what it looks like
Good contrast is the difference between text people read and text people skip. WCAG 2.1 asks for at least 4.5:1 for normal text and 3:1 for large text or interface elements such as borders, icons, and focus rings.
Inline link sampleReading the Ratio
4.5:1 minimum
The AA threshold for body text. Most brand palettes fail it on muted greys — check your secondary and placeholder colours, not just your headline colour.
3:1 for interfaces
Buttons, input borders, icons, and focus indicators need 3:1 against their surroundings, even when no text is involved.
Large means 24px
18.66px bold or 24px regular and above counts as large text — it can pass AA at 3:1. Anything smaller needs the full 4.5:1.