WCAG 1.4.3 (Contrast Minimum) requires a contrast ratio of at least 4.5:1 between text and its background for normal text, and 3:1 for large text (18pt or 14pt bold). WCAG 1.4.11 extends contrast requirements to non-text UI components and graphical objects. These are Level AA requirements — the standard for legal compliance.
How contrast ratio is calculated
Contrast ratio is calculated from the relative luminance of two colors. Relative luminance is a linear measure of light — white is 1.0, black is 0.0. The contrast ratio formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color and L2 is the darker. The ratio ranges from 1:1 (identical colors) to 21:1 (black on white). The 0.05 offset prevents division by zero and accounts for real-world display luminance floors.
What counts as large text
Large text is defined as 18 point (24px) or larger, or 14 point (approximately 18.67px) or larger when bold. This corresponds to the CSS properties font-size and font-weight. A 3:1 ratio is required for large text instead of 4.5:1 because large text is inherently more legible — the letterforms provide more visual information even at lower contrast. The 3:1 threshold also applies to UI components under 1.4.11.
A practical system for design tokens
Instead of checking every color combination at design time, build your color palette with accessibility constraints built in. Define a base neutral scale from white to black with enough steps that any adjacent pair of "text on background" combinations passes 4.5:1. For brand colors used on white backgrounds, calculate the minimum darkness required for 4.5:1 contrast against white and set that as your darkest usable text variant. Then any token pairing within the system is pre-validated.
Note
Decorative text — text that is purely visual and conveys no information — is exempt from contrast requirements. Logos, inactive UI components, and text that is part of an image are also exempt. But the exemptions are narrow: if the text conveys anything meaningful to any user, the contrast requirements apply.
WCAG 3 and APCA — the future
The upcoming WCAG 3.0 will replace the current contrast formula with the Accessible Perceptual Contrast Algorithm (APCA), which better models human visual perception and accounts for polarity (light text on dark vs. dark on light), font weight, and font size independently. APCA is not yet required for compliance, but designing with it in mind now means fewer retrofits later. Tools like Colour & Contrast and the APCA Contrast Calculator implement it.