Color Contrast and Accessibility: A Practical WCAG Guide

Updated September 10, 2026

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 (at least 14pt bold or 18pt regular, approximately 18.67 CSS px bold or 24 CSS px regular), with separate non-text contrast requirements for visual information needed to identify active controls and meaningful graphics.
• 7:1 — the stricter AAA standard for body text, worth aiming for when readability is critical.

At AAA, large text requires at least 4.5:1. Passing a color contrast check alone does not establish WCAG conformance for an entire page.

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. Check active buttons, links and placeholder text as well as paragraphs. Inactive controls are exempt from these contrast criteria, although making them understandable still matters.
• 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.

Sources and scope

See W3C’s Contrast (Minimum), Contrast (Enhanced) and Non-text Contrast explanations for thresholds, exceptions and examples. Test actual foreground/background pairs, including interactive states; hue relationships alone cannot establish readability.

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.