Color Contrast Checker: Understanding WCAG Requirements and How to Apply Them

WCAG contrast requirements are widely cited but frequently misunderstood. This guide explains the contrast ratio formula, the 4.5:1 and 3:1 thresholds, when each applies, and how to make contrast decisions that go beyond minimum compliance.

ContrastAccessibilityWCAGColor TheoryUI Design

Key points

The WCAG contrast ratio formula measures relative luminance — a perceptual measure that accounts for how human vision responds to different colors — not raw RGB differences or HSL lightness.

The 4.5:1 minimum applies to text smaller than 18pt (or 14pt bold). Large text (18pt+ or 14pt+ bold) only requires 3:1. Interactive components and focus indicators require 3:1 against adjacent colors.

Passing WCAG minimum contrast doesn't guarantee good readability — it's a floor, not a target. High-quality typography often targets 7:1 or higher for body text.

How the contrast ratio is calculated

The WCAG contrast ratio compares the relative luminance of two colors using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance and L2 is the darker. Relative luminance is computed from sRGB values using a gamma correction formula that models how human vision perceives light — it's not the same as HSL lightness. Two colors at similar HSL lightness can have very different relative luminance. The formula produces ratios from 1:1 (identical colors) to 21:1 (pure black against pure white). The +0.05 constants prevent division-by-zero at pure black and provide a slight adjustment for the non-linearity of human visual response near absolute black.

Which threshold applies when

WCAG 2.1 AA defines three contrast thresholds. The 4.5:1 ratio applies to normal text: any text under 18pt regular or 14pt bold. The 3:1 ratio applies to large text (18pt+ or 14pt+ bold), to UI components in their resting state (button backgrounds, input borders), and to graphical objects like icons and charts that convey meaning. Non-text elements that are purely decorative require no contrast minimum. WCAG AAA (the enhanced level) requires 7:1 for normal text and 4.5:1 for large text. Most accessibility audits target AA compliance, but for high-stakes contexts like healthcare, finance, or government, AAA is appropriate. WCAG 3.0 (in development) will replace the contrast ratio with APCA — the Advanced Perceptual Contrast Algorithm — which accounts for font weight and size more precisely.

Common contrast failures and how to fix them

The most frequent contrast failures in real interfaces are: gray-on-gray text (caption and metadata text against light gray backgrounds often fails 4.5:1 even when it looks 'fine' visually), light-colored text on colored backgrounds (a yellow button with white text almost never passes), placeholder text (which is intentionally lighter than body text but must still meet 4.5:1 if it conveys form instructions), and focus indicators (which must contrast 3:1 against their adjacent colors, not the page background). Fixing these usually requires lightening the background or darkening the foreground — or both. Shifting hue can sometimes achieve adequate contrast without dramatically changing the visual design.

Beyond compliance: designing for actual readability

WCAG minimum contrast is a floor. A 4.5:1 ratio is the minimum that research shows allows most people with typical vision impairment to read text; it's not the target for general design quality. Body text in high-quality editorial and book design typically targets 10:1 to 15:1 — well above WCAG requirements. For UI design, a practical approach is: body text at 7:1+, secondary text at 4.5:1+, tertiary at 3:1+. This creates a meaningful visual hierarchy while ensuring all tiers are accessible. When testing contrast, also test at multiple screen brightness levels and in simulated daylight conditions — a color combination that passes at 4.5:1 may appear to fail in bright ambient light if the effective luminance of both colors shifts toward white.

Practical next step

Move from the guide into a concrete palette lane

Guides explain the use case. Collections prove the taste. Packs handle the export and implementation layer.

Browse packs More guides

Related guides

Accessibility Guide

Accessible Color Palette Ideas That Pass WCAG Without Looking Clinical

How to build an accessible color palette that meets WCAG contrast requirements while still feeling warm, branded, and intentional rather than defaulting to black text on white.

Accessibility

WCAG Color Accessibility Guide: Contrast Ratios, Color-Blind Design, and What You Actually Need to Know

WCAG color accessibility requirements are often reduced to a contrast ratio number. This guide explains what that number actually measures, what it misses, how to design for color vision deficiency, and how to build a color system that is genuinely accessible rather than just technically compliant.

Accessibility

Accessible Color Design: Beyond WCAG Contrast Ratios

WCAG contrast ratios are the floor for accessibility, not the ceiling. What the standard doesn't measure — hue-based discrimination difficulty, font weight interaction, simultaneous contrast effects, and contextual viewing conditions — and how to go further.