What Is Color Contrast?
Color contrast is the difference in perceived luminance between text and its background. The Web Content Accessibility Guidelines (WCAG) define specific contrast ratios to ensure text is readable for people with various visual abilities, including those with low vision or color blindness.
WCAG Contrast Requirements
- AA Normal Text: Minimum contrast ratio of 4.5:1 for text smaller than 18pt (or 14pt bold).
- AA Large Text: Minimum contrast ratio of 3:1 for text 18pt or larger (or 14pt bold).
- AAA Normal Text: Enhanced contrast ratio of 7:1 for the highest level of accessibility.
- AAA Large Text: Enhanced contrast ratio of 4.5:1 for large text at the highest accessibility level.
Frequently Asked Questions
How is the contrast ratio calculated?
The ratio is calculated using the relative luminance of each color. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker. Luminance is derived from linearized sRGB channel values.
What level should I aim for?
AA compliance is the minimum standard and meets most legal requirements. AAA provides the best readability for all users and is recommended when possible, especially for body text.