WCAG color contrast: a practical guide to accessible colors

By the 000098 editorial team · Updated October 16, 2026 · 8 min read

Contrast is the difference in brightness between text and its background. Too little and people with low vision, older eyes or a phone in sunlight cannot read your content. The Web Content Accessibility Guidelines (WCAG) turn this into measurable thresholds that many laws and procurement rules reference.

The thresholds

Content	Level AA	Level AAA
Normal text	4.5:1	7:1
Large text (24px, or 18.66px bold)	3:1	4.5:1
Icons, borders, focus rings (1.4.11)	3:1	—

Ratios run from 1:1 (identical colors) to 21:1 (black on white). #000098 on white scores 14.45:1, comfortably above AAA, which is one reason deep navies are so popular for text and headers.

How the ratio is calculated

Each color is converted to relative luminance: the sRGB channel values are linearised (undoing gamma), then weighted 0.2126 red, 0.7152 green and 0.0722 blue, reflecting how sensitive the eye is to each. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. The weighting explains a surprise many designers hit: pure blue is very dark to the eye, and pure yellow very light, even though both are "100%" in RGB.

How to fix a failing pair

• Change lightness, not hue. Darken the text or lighten the background in small steps until the ratio passes. Our contrast checker suggests the closest passing shade automatically.
• Reserve brand colors for large elements. A bright brand orange may fail for body text but pass for a 24px heading or a button with dark text.
• Never rely on color alone. Pair red error states with an icon and a message; underline links in body text.
• Check hover and disabled states, placeholder text and text over images or gradients.

What about APCA and WCAG 3?

A newer model called APCA, proposed for future WCAG versions, accounts for font size, weight and polarity (dark-on-light versus light-on-dark). It is still a draft. For compliance today, use the WCAG 2.x ratio, and treat APCA as a useful second opinion, especially for dark mode.

Build contrast into your workflow

1. Define text and background tokens first, then accents.
2. Test every token pair you actually use, not just the main one.
3. Document the passing pairs in your style guide so nobody has to guess.
4. Re-test when you add dark mode; a pair that passes on white often fails on near-black.

Each color page on 000098 shows its contrast against black and white with pass/fail badges, so you can screen a color in seconds before designing with it.