The WCAG contrast ratio tells you whether the gap between your text color and its background is enough for users with low vision, color blindness, glare, or just an aging display. It’s the simplest accessibility check you can run, and one of the most consequential — failing it makes the page unreadable for a meaningful slice of users, including the elderly demographic that grows every year.
How the ratio is computed
WCAG 2.1’s formula is two short steps:
- Convert each sRGB color to relative luminance — a single number from 0 (black) to 1 (white) that approximates how bright the human eye perceives it. The formula weights green heaviest (0.7152), then red (0.2126), then blue (0.0722).
- Compute the ratio:
(L_lighter + 0.05) / (L_darker + 0.05). The +0.05 anchors the ratio so identical colors return 1, not zero, and keeps the range bounded at 21:1 (pure white on pure black).
The constants come from BT.709 (the colour primaries baked into sRGB and HDTV). The +0.05 anchors come from a flare-resistance model — they roughly account for ambient-light reflection off a typical screen.
Example: black on white
#000000 on #ffffff returns 21:1 — the maximum possible contrast in sRGB. Passes everything (AA / AAA / UI). This is the gold standard but rarely the right design choice — full-black text on full-white background is harsh on the eyes for long reading. Aim for high-contrast-but-not-pure pairs like #1a1a1a on #fafafa (still 18:1) for body copy.
Example: classic Material grey on white
#999999 on #ffffff returns 2.85:1 — fails AA normal (needs 4.5), fails AA large (needs 3.0), fails UI (needs 3.0). Yet many design systems use light greys for “secondary text” or placeholder text. They are unreadable for older users and color-deficient users. Bumping to #666666 lifts the ratio to 5.74:1 and clears AA normal — the smallest defensible step for placeholder text. If you want to tune a grey by eye and preview the hex, use the hex/RGB/HSL converter.
Example: brand color on brand color
A common pattern: brand orange #ff6600 on white. Ratio: 3.94:1. Passes AA large but not AA normal. Fine for big call-to-action buttons; not fine for body links inside paragraphs. Compositors who care about brand purity often nudge their accent slightly darker (e.g. #cc5200 for body-link contexts, ratio 5.59:1, AA normal pass) and reserve the lighter brand for hero / display use.
What about color blindness?
Contrast ratio does not test for color blindness — two colors with great contrast can still confuse a deuteranope (red-green color blindness) if the only difference is hue. Use the contrast checker to confirm legibility, then verify color-as-information separately with the color blindness simulator and never rely on color alone for status / state.
When the ratio “looks wrong”
The reported ratio assumes:
- Both colors are fully opaque sRGB (no transparency).
- The display is roughly sRGB-calibrated (most modern displays approximate this).
- Ambient lighting is moderate (not glare-heavy).
In practice, the reported ratio is what every accessibility tool, every browser devtools, and every WCAG audit will report. If your designer’s eye disagrees with the number, trust the number — the designer is calibrating for their own ideal viewing condition, not for the long tail of your users.
What this tool does not do
It doesn’t simulate color blindness — contrast ratio and color vision deficiency are separate checks, covered above.
It doesn’t handle alpha. Pre-composite your translucent colors against the actual backdrop, then test the resulting opaque RGB.
It doesn’t suggest accessible alternatives. If a pair fails, you have to nudge the colors yourself — though the live preview makes the iteration tight.
It doesn’t enforce 1.4.11 graphical / focus-indicator rules beyond reporting whether a color pair clears the 3:1 bar. The 1.4.11 success criterion has additional context-of-use rules (e.g. focus indicators need 3:1 against adjacent state, not just background) that need a holistic accessibility review.