WCAG contrast checker
Test a colour pair
Contrast: —
| Criterion | Level | Threshold | Result |
|---|---|---|---|
| Enter two valid colours… | |||
Preview
Normal text (16 px): what 90% of your users actually read.
Large text (24 px / 18.7 px bold)
UI element: ▢ icon · ── border · ⬤ control
Text over an image
Pair checkers assume flat backgrounds; the real web puts text over photos. Upload a screenshot, draw the text box with your mouse (or type its coordinates) and the background will be sampled pixel by pixel.
What the criteria mean
1.4.3 Contrast (Minimum) — level AA: normal text needs a contrast ratio of at least 4.5:1, and large text (18 pt / 24 px, or 14 pt / 18.7 px bold) at least 3:1, except for decorative text or logotypes.
1.4.6 Contrast (Enhanced) — level AAA: raises the bar to 7:1 for normal text and 4.5:1 for large text.
1.4.11 Non-text Contrast — level AA: interface parts that identify state (field borders, icons, focus indicators) need at least 3:1 against adjacent colours.
The ratio is computed with the relative luminance from the official specification: (L1 + 0.05) / (L2 + 0.05). In image mode, every background pixel is evaluated against the text colour: the worst case flags the hostile area, and the % of passing area tells you whether you need an overlay, a crop, or to move the text.