WCAG Color Contrast Guide

Color contrast is the difference in brightness between two colors, usually text and its background. The bigger the difference, the easier text is to read. The Web Content Accessibility Guidelines (WCAG) define a contrast ratio: a number from 1:1 (no difference, invisible text) to 21:1 (pure black on pure white, maximum difference).

This guide explains how that ratio is calculated, what WCAG requires at each level, and how to choose colors that pass. Use the Color Contrast Check tool to test your own colors as you read.

What Is a Contrast Ratio?

WCAG calculates contrast from each color's relative luminance, roughly how bright it appears to the human eye, accounting for the fact that green reads brighter than blue or red at the same intensity. The ratio between the lighter and darker luminance gives a number between 1 and 21.

1:1: identical colors, invisible text
4.5:1: the minimum for most body text
7:1: a comfortably high-contrast pairing
21:1: pure black on pure white, the theoretical maximum

You don't need to calculate this by hand. The tool does it automatically as you pick colors.

WCAG Contrast Requirements

WCAG sets different minimum ratios depending on what the color is used for.

Normal Text

Normal text is any text below 18pt (about 18.66px), or below 14pt when bold. It needs the highest contrast because it's typically small and read closely.

Level AA: 4.5:1 minimum
Level AAA: 7:1 minimum

Large Text

Large text is 18pt (about 24px) or larger, or 14pt (about 18.66px) when bold. Larger glyphs are easier to distinguish even at lower contrast, so the bar is lower.

Level AA: 3:1 minimum
Level AAA: 4.5:1 minimum

UI Components & Graphics

Buttons, form borders, icons, and other essential interactive or graphical elements need enough contrast against their surroundings to be perceivable, even though they aren't text.

Level AA: 3:1 minimum

AA vs AAA: Which Do You Need?

WCAG defines three conformance levels: A, AA, and AAA. For contrast specifically, AA is the level most commonly targeted in practice, and it's the threshold most style guides, design systems, and accessibility checklists reference. AAA is a stricter, harder-to-reach bar that's worth aiming for on body text where possible, but isn't always practical across an entire interface, since large decorative headings, brand colors, and subtle UI chrome often can't hit 7:1 without losing their intended look.

A reasonable default: target AA everywhere, and push for AAA on your primary reading content, such as paragraphs and articles meant to be read at length.

This guide describes contrast standards, not legal requirements. It doesn't say whether meeting a given level satisfies any specific law or regulation.

Color Blindness & Contrast

Contrast ratio is calculated from luminance, not hue, so a pairing can technically pass WCAG and still be hard to distinguish for someone with color vision deficiency. If the only thing separating two elements is their color rather than their contrast, that's a separate accessibility problem worth checking for. The Color Contrast Check tool includes simulations for protanopia, deuteranopia, tritanopia, and achromatopsia so you can preview how your color choices might appear.

How to Fix Low-Contrast Colors

Darken or lighten one color rather than the other. Moving the darker color darker, or the lighter color lighter, usually fixes contrast faster than changing hue.
Avoid gray-on-gray. Muted grays are a frequent source of failing contrast, especially for secondary or placeholder text.
Check both light and dark themes separately. A pairing that passes on a white background can fail once inverted for dark mode.
Don't rely on color alone to convey information. Pair it with icons, labels, or underlines where it matters.

Ready to test your own colors? Open the Color Contrast Check tool → Or see real pairings with computed ratios on the Color Contrast Examples page.

This tool and guide evaluate color contrast only. They don't guarantee WCAG, ADA, or other legal or regulatory compliance.