Demystifying WCAG 2.2 Color Contrast Compliance
Web Content Accessibility Guidelines (WCAG 2.2) require adequate visual contrast between text and its background to ensure content is legible for people with visual impairments or low vision.
WCAG Compliance Thresholds
- Level AA Normal Text (< 18pt / 24px): Requires a contrast ratio of at least 4.5:1.
- Level AA Large Text (≥ 18pt / 24px regular or ≥ 14pt / 18.67px bold): Requires a contrast ratio of at least 3.0:1.
- Level AAA Normal Text: Requires an enhanced contrast ratio of at least 7.0:1.
- Level AAA Large Text: Requires an enhanced contrast ratio of at least 4.5:1.
Understanding Relative Luminance Math
Contrast ratio is calculated by comparing relative luminance values (L1 and L2) using the sRGB linearization formula: (L1 + 0.05) / (L2 + 0.05). Pure black on pure white produces the maximum possible ratio of 21.00:1, whereas identical colors produce a minimum ratio of 1.00:1.
Accessibility Note: Passing WCAG contrast thresholds is essential but does not guarantee complete digital accessibility. Consider font weight, line spacing, and avoiding reliance on color alone for interactive state indicators.