BRev Colour contrast checker — WCAG AA & AAA, free
Check any two colours against the WCAG 2.1 thresholds — 4.5:1 for body text, 3:1 for large text and UI components, 7:1 for AAA — and see the verdict on real sample text rather than as a bare number. When a pair fails, the nearest passing colour is computed for you in both directions, with a keep-the-hue mode so a brand colour survives. Build a palette to get a full contrast matrix, and check the pair through protanopia, deuteranopia, tritanopia and achromatopsia. Everything runs on your device.
| Hex | |
| RGB | |
| HSL | |
| Oklch | |
| Relative luminance | |
| CIE L* | |
| Hue / saturation | |
| Black text on it | 8.52:1 |
| White text on it | 2.46:1 |
| Hex | |
| RGB | |
| HSL | |
| Oklch | |
| Relative luminance | |
| CIE L* | |
| Hue / saturation | |
| Black text on it | 21.00:1 |
| White text on it | 1.00:1 |
| text ↓ / bg → | #1a6ae8 | #0f172a | #f8fafc | #e11d48 | #16a34a | #f59e0b |
|---|---|---|---|---|---|---|
| #1a6ae8 | 1.00 | 3.63 | 4.69 | 1.04 | 1.49 | 2.28 |
| #0f172a | 3.63 | 1.00 | 17.06 | 3.80 | 5.41 | 8.31 |
| #f8fafc | 4.69 | 17.06 | 1.00 | 4.48 | 3.14 | 2.05 |
| #e11d48 | 1.04 | 3.80 | 4.48 | 1.00 | 1.42 | 2.18 |
| #16a34a | 1.49 | 5.41 | 3.14 | 1.42 | 1.00 | 1.53 |
| #f59e0b | 2.28 | 8.31 | 2.05 | 2.18 | 1.53 | 1.00 |
Why 4.5:1?
WCAG's baseline is 3:1 — the contrast the ISO/ANSI standards treat as the minimum for readable text for normal vision. Success Criterion 1.4.3 then multiplies that by 1.5 to cover roughly 20/40 vision, the loss typical of a person around 80, or of anyone with mild uncorrected sight. That is where 4.5:1 comes from. AAA's 7:1 is the same idea taken to about 20/80 vision, the point at which magnification is usually needed anyway.
What “large text” actually means
Large text gets the easier 3:1 bar because bigger letterforms have thicker strokes, and stroke width is what contrast has to carry. WCAG defines it as at least 18 point, or 14 point bold. At the CSS reference resolution that is 24px, or 18.66px when the weight is bold. A 20px regular heading is not large text; it needs the full 4.5:1. This is the single most common mistake in a hand-written contrast audit.
Non-text still has a bar
SC 1.4.11 requires 3:1 for user-interface components and graphical objects: input borders, the focus indicator, toggle states, icons that carry meaning, and the parts of a chart you have to be able to tell apart. A form field whose border is a 1.6:1 grey is a failure even when the label above it is perfect.
Contrast is not the same as legibility
A ratio is a measurement of two flat colours. It knows nothing about the font. Thin weights, tight letter-spacing, low x-height, long line lengths, italics, condensed faces and text over a photograph all reduce readability at an identical ratio. 21:1 hairline type is harder to read than 7:1 set in a solid weight at a comfortable measure. Treat the ratio as a floor you must clear, not as proof you are done.
The exceptions — and how they are abused
- Disabled controls and purely decorative text are exempt from 1.4.3. That does not make an unreadable disabled control good design; it makes it legal.
- Placeholder text has no exemption. It is real text, and pale grey placeholder used as the only label is one of the most common failures on the web.
- Logotypes are exempt. The rest of your brand colour is not.
- Text that is part of a photograph is not exempt if it carries information.
Hue-only differences fail before contrast does
Around one man in twelve has some form of colour-vision deficiency. Red and green of similar lightness are the classic trap: a red “error” and a green “ok” can have an excellent contrast ratio against the page and still be the same colour to a deuteranope. WCAG covers this separately under SC 1.4.1 Use of Colour: colour must never be the only way information is conveyed. Add an icon, a label, a shape, or a lightness difference.