Can everyone read this colour on that one?
Pick a text colour and a background. We calculate the WCAG contrast ratio, tell you which levels it passes for body text, headings and buttons, and if it fails, find the nearest shade that passes.
Five colours make twenty text-on-background combinations. The grid shows which you can safely use for body text, which only for large headings, and which to avoid. Edit any swatch; click a square to load it into the checker.
Contrast is about lightness, so it mostly survives colour-vision differences. Meaning carried by hue alone does not: a red "error" and a green "success" can look identical. Here are your two colours and a status pair, simulated for four types of colour vision.
WCAG counts text as "large" from 24 px regular, or 18.7 px bold. Large text only needs 3:1 at level AA instead of 4.5:1. Move the size and weight to see which rule applies to your colours.
WCAG 2's ratio is the one accessibility laws point to. It treats every colour pair the same way, so dark text on white and white text on dark score identically. APCA, the Accessible Perceptual Contrast Algorithm proposed for WCAG 3, models how contrast is actually seen. It gives a signed lightness contrast (Lc) that depends on which colour is the text. Both are computed here for the colours in the checker above.
(L1 + 0.05) / (L2 + 0.05)= (1.0 + 0.05) / (0.3636 + 0.05)= 2.53:1Swapping text and background never changes the score. The 0.05 added to both stands in for screen flare, which is why pure black on white tops out at 21:1.
Y = 0.2126·R^2.4 + 0.7152·G^2.4 + 0.0722·B^2.4Y text 0.3389 · Y background 1.0dark on light: (Ybg^0.56 − Ytxt^0.57) × 1.14 − 0.027= Lc 49.77Positive Lc is dark text on a light background; negative is light on dark. The two directions use different exponents because the eye adapts differently to each.
APCA here is the published 0.0.98G-4g base formula. Its full guidance adds font-size and weight lookup tables, simplified to the six levels above. APCA is still a working draft and isn't a legal standard: conformance today is measured with WCAG 2.
Screens store colour gamma-encoded, so #808080 isn't half as bright as white; it's about a fifth. The ratio first undoes that encoding, then weights green far more than blue, because the eye is most sensitive to green. Here is every step for both colours, followed by what happens when text is made semi-transparent.
The success criteria an audit checks, with the colours from the checker tested against each where a ratio applies. Level AA is what most laws require, including the European Accessibility Act and the US ADA Title II rule.
Tools people use alongside this one.