The formula
WCAG contrast is (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the two colors. Relative luminance is a weighted sum of sRGB channels after linearization.
Thresholds
- 1.4.3 AA: 4.5:1 for body text, 3:1 for large text (≥18pt or ≥14pt bold).
- 1.4.6 AAA: 7:1 body, 4.5:1 large.
- 1.4.11 AA: 3:1 for interactive UI components and meaningful graphics.
Known limitations
WCAG 2 contrast underweights blue and mid-tone contrast. APCA (the algorithm proposed for WCAG 3) is closer to perceptual reality but is not yet normative. Design for WCAG 2 today, keep an eye on APCA for the future.
Practical rules for design systems
- Define a text scale with pre-checked pairings: text-primary on bg-canvas, text-muted on bg-card.
- Never place body text on gradients or images without a solid backdrop.
- For focus rings, aim for 3:1 against both the component and the adjacent background.
- Test with CVD simulators (protanopia, deuteranopia, tritanopia). Never rely on color alone to convey state — pair it with an icon or label.
Alpha and blending
Semi-transparent text (rgba(0,0,0,0.6)) must be composited over its actual background before measuring. Our Contrast Checker does this automatically.