Understanding WCAG Color Contrast & Accessibility
Web accessibility ensures that digital content is readable and usable by everyone, including individuals with visual impairments like low vision or color blindness. The Web Content Accessibility Guidelines (WCAG) dictate mathematical thresholds for how "contrasting" background and text colors must be.
The Math Behind Contrast Ratios
Contrast is calculated using the relative luminance of two colors. Luminance is a measure of perceived brightness, weighted because the human eye is vastly more sensitive to green light than blue light. The formula weights linear RGB values as follows: L = 0.2126 * R + 0.7152 * G + 0.0722 * B.
Once the luminance of both colors is found, the ratio is calculated by dividing the lighter luminance (plus 0.05) by the darker luminance (plus 0.05). The resulting score ranges from 1:1 (invisible, same color) to 21:1 (maximum contrast, pure black on pure white).
WCAG AA vs AAA Standards
- WCAG AA (Normal Text): Requires a minimum ratio of 4.5:1. This is the global standard for body paragraphs.
- WCAG AA (Large Text): Requires a minimum ratio of 3.0:1 for text that is 18pt regular or 14pt bold.
- WCAG AAA: The strictest standard, required for highly accessible public infrastructure. It demands 7.0:1 for normal text and 4.5:1 for large text.