Color Contrast and Accessibility: A Practical WCAG Guide

Updated June 28, 2026 · 5 min read

Color contrast is where good-looking design meets usability. Get it wrong and a meaningful share of your visitors literally cannot read your text. The good news: the rules are simple and easy to check.

Why contrast matters

Contrast is the difference in lightness between two colors — typically text and its background. When that difference is too small, text becomes hard or impossible to read, especially for people with low vision or color vision deficiencies, and for anyone using a phone in bright sunlight. Sufficient contrast is one of the most impactful accessibility improvements you can make.

What WCAG requires

The Web Content Accessibility Guidelines (WCAG) express contrast as a ratio between two colors, ranging from 1:1 (identical) to 21:1 (black on white). The key thresholds are:

• 4.5:1 — the minimum for normal body text at the AA level.
• 3:1 — the minimum for large text (roughly 18px bold or 24px regular and up), and for meaningful UI elements like icons and input borders.
• 7:1 — the stricter AAA standard for body text, worth aiming for when readability is critical.

AA is the level most projects target and that many regions reference in accessibility law. AAA is a worthy goal but not always practical for every color.

How contrast ratio is calculated

The ratio is based on relative luminance — a weighted measure of how much light a color emits, accounting for the fact that the human eye is most sensitive to green and least to blue. Each color's luminance is computed, then the lighter and darker values are compared. Because it is driven by luminance rather than hue, two colors can look very different yet still fail contrast if they share a similar lightness.

Practical tips

• Lean on lightness, not just hue. A dark hue on a light background almost always passes; two mid-tone colors often do not.
• Test your actual text sizes. Large headings can use lower-contrast colors than body copy.
• Check every combination. Buttons, links, placeholder text and disabled states all need to clear the bar, not just your main paragraph color.
• Be careful with brand colors on white. Many vivid brand colors (especially yellows and light greens) fail as text and need darkening.

Don't rely on color alone

Contrast is about lightness, but accessibility also means not using color as the only way to convey information. Pair color with text labels, icons or underlines — for example, don't mark form errors with red alone, since a red-green color-blind user may not perceive it. Color should reinforce meaning, not carry it by itself.

Checking your colors

You don't have to compute luminance by hand. HueWiz shows a live WCAG contrast ratio for its high-contrast accent suggestions and grades them AA or AAA, so you can spot a readable pairing at a glance while you design.