Color Contrast Theory — Complete Design Guide
Why contrast is the foundation of readable design, and how to use it intentionally.
What Is Color Contrast?
Color contrast measures how distinguishable two colors are from each other. The most important application is text contrast — the difference between text color and background color, which determines readability.
Contrast is not just brightness. Two colors can have the same brightness but different hues (red and green at equal luminance), and the eye will still perceive them as distinct. But when we talk about contrast in accessibility and readability, we almost always mean luminance contrast: how much lighter or darker one color is than another.
Why Contrast Matters
Readability
Low-contrast text is difficult for everyone to read. For users with low vision, color blindness, or anyone in bright light (using a phone outdoors), low contrast makes text essentially unreadable. WCAG sets minimum contrast ratios to ensure content is accessible.
Accessibility Compliance
WCAG AA requires 4.5:1 contrast for normal text and 3:1 for large text. AAA requires 7:1 and 4.5:1 respectively. In many jurisdictions these are legal requirements, not suggestions.
Visual Hierarchy
Even when not required for readability, contrast establishes hierarchy. High contrast elements dominate attention; low contrast elements recede. Good design uses contrast intentionally to guide the eye.
The Four Types of Contrast
Luminance Contrast
The brightness difference between two colors. This is what WCAG measures. Black on white is maximum luminance contrast (21:1). Light gray on white is minimal (often 1.5:1 or less).
This is the most important contrast type for accessibility.
Hue Contrast
The difference in hue between two colors. Red on green has strong hue contrast even if luminance is similar. But this type of contrast is invisible to people with color blindness, so it should never be the sole distinction between important elements.
Saturation Contrast
The difference in vividness between two colors. A muted gray-blue next to a vivid blue creates saturation contrast. This is subtle and mostly aesthetic, not accessibility-relevant.
Simultaneous Contrast
The phenomenon where a color appears different depending on its surrounding colors. Gray looks darker when placed on white than on black. This is a perceptual effect, not a measurable difference in the colors themselves. See our article on simultaneous contrast.
WCAG Contrast Requirements
The Web Content Accessibility Guidelines (WCAG) 2.2 define four thresholds:
| Level | Normal Text | Large Text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
"Large text" is 18pt (24px) or larger, or 14pt (18.66px) or larger when bold.
How Contrast Ratio Is Calculated
The WCAG contrast ratio uses relative luminance, which is computed from the sRGB channels with gamma correction. The formula is:
Contrast = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the lighter luminance and L2 is the darker.The result ranges from 1:1 (identical) to 21:1 (black on white). Our contrast checker computes this formula exactly.
Using Contrast Intentionally
High Contrast for Primary Actions
Primary buttons and CTAs should have maximum contrast (7:1+). This ensures they stand out from the rest of the interface and are readable even in bad conditions.
Moderate Contrast for Secondary Elements
Secondary buttons, form labels and supporting text can use lower contrast (4.5:1) to establish hierarchy — they're visible but subordinate to primary elements.
Low Contrast for Decorative Elements
Dividers, borders and background patterns can use low contrast (2:1 to 3:1). They provide structure without competing for attention. But never use low contrast for text.
Contrast Consistency
Once you establish a contrast hierarchy, apply it consistently. If primary buttons are 7:1 and secondary are 4.5:1, that relationship should hold across the entire interface. Inconsistency is one of the most common design mistakes.
Beyond WCAG
WCAG Is the Minimum
Meeting WCAG AA is the baseline. Many accessibility experts recommend exceeding it — targeting 7:1 or higher for body text — because real-world conditions (glare, small screens, aging eyes) make borderline contrast inadequate.
APCA
The Advanced Perceptual Contrast Algorithm (APCA) is a newer standard that better accounts for how human vision perceives contrast at different font sizes and weights. It is not yet part of WCAG 2.2, but is under consideration for WCAG 3.0. Our tools currently use WCAG 2.2 for compatibility.