BRev Colour contrast checker — WCAG AA & AAA, free
A colour contrast checker for WCAG AA and AAA: see the verdict on real text, get the nearest passing colour and simulate colour blindness — 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 |
What APCA isRead
APCA (Accessible Perceptual Contrast Algorithm) is the candidate successor being drafted for WCAG 3. It is polarity-aware — light-on-dark and dark-on-light are scored differently, which WCAG 2 cannot do — and it weights small text more heavily. It is a draft. Nothing you are legally or contractually held to is measured in Lc today; ship against the WCAG 2.1 ratio above and treat this as a second opinion when the ratio is borderline. Implemented from APCA 0.1.9 (SA98G / G-4g constants).
| 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 |
How the simulation is computedRead
These are approximations. They are computed from cone-fundamental models — Viénot, Brettel & Mollon (1999) for protanopia and deuteranopia, Brettel, Viénot & Mollon (1997) for tritanopia — which model a dichromat with one cone type entirely absent. Most colour-blind people are anomalous trichromats: they have all three cones but one is shifted, so they see more colour than this shows. Use the simulation to catch a design that depends on hue, never to claim a design has been validated.
What the numbers actually meanthe parts of WCAG contrast that are usually got wrongRead
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.