WCAG Color Contrast Requirements — AA & AAA Ratios Explained

Contrast ratio is a measure of the luminance difference between two colors — typically the foreground (text) and background. It is calculated from each color's relative luminance, a value that accounts for how the human eye perceives brightness differently across the red, green, and blue channels.

The WCAG formula is:

(L1 + 0.05) / (L2 + 0.05)

Where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. The result is expressed as a ratio, such as 4.5:1 or 7:1.

• 1:1 — identical colors, no contrast whatsoever (e.g., white text on a white background)
• 21:1 — maximum possible contrast (black on white)
• Most readable body text falls between 7:1 and 15:1 in real-world designs

You do not need to calculate relative luminance by hand — every contrast checking tool does this automatically. What matters is understanding what ratio your color pairs achieve and whether that meets the required threshold.

WCAG defines two conformance levels for contrast: AA (the widely accepted legal and industry standard) and AAA (enhanced accessibility, typically targeted by government and healthcare sites). WCAG 2.2, published in 2023, maintains the same contrast thresholds as WCAG 2.1.

Text that is purely decorative, part of a logo, or inactive (disabled UI) is exempt from contrast requirements. All other visible text — including placeholder text in form fields and text in images — is subject to these thresholds.

Many frequently used color combinations fail WCAG AA requirements. Light gray text on a white background is an especially common offender — it looks clean in a design tool but becomes unreadable for users with low vision or in bright ambient light conditions.

Contrast ratio addresses luminance difference, but color blindness involves difficulty distinguishing specific hues. These are separate concerns and both must be considered. Approximately 8% of males and 0.5% of females have some form of color vision deficiency.

Key design rules for color-blind users:

• Never rely on color alone to convey information — use shape, pattern, icon, or text labels alongside color coding
• Avoid red/green as the only distinction — this is the most frequently confused pair (deuteranopia and protanopia both affect it)
• Test in grayscale — if your design still communicates clearly without any color, it will work for most color vision deficiencies
• Contrast ratio requirements protect against luminance-based issues; they do not protect against hue-based confusion — you need to address both independently
• Browser DevTools and dedicated simulators (e.g., Colour Contrast Analyser from TPGi) can preview your page through various color blindness filters

• Start dark: dark text on a light background is easier to control and verify than light text on a dark background, and tends to produce higher contrast ratios at moderate color values
• Use a contrast checker before finalizing any color pair — do not guess; even experienced designers misjudge luminance contrast
• Body text: aim for 7:1 or higher (AAA) for the most comfortable long-form reading experience, even if your legal target is only AA (4.5:1)
• Placeholder text in form fields is technically exempt from contrast requirements, but aim for 4.5:1 anyway — low-contrast placeholders are a usability problem for everyone, not just users with low vision
• Hover and focus states must also meet contrast requirements — an outline or highlight that lacks sufficient contrast against both the element and the page background fails WCAG
• Do not rely on font weight to compensate for low contrast — making text bold does not improve its contrast ratio; only the color values determine the ratio
• Check your disabled and inactive states — while exempt from contrast rules, overly invisible disabled controls can create confusion about whether a feature exists at all

A range of free and paid tools make it straightforward to check contrast ratios during design and development. Using at least one at every stage of the process — design, development, and QA — prevents accessibility regressions from reaching production.

• HTML Color Codes Reference — Complete guide to hex, RGB, HSL and named CSS colours
• ColorMania – Free Color Picker for Windows — Pick colours from anywhere on screen, manage palettes, convert between 15+ formats