WCAG Color Contrast: Complete Accessibility Guide
How to meet WCAG color contrast requirements for web accessibility.
Color contrast is a fundamental aspect of web accessibility. The Web Content Accessibility Guidelines (WCAG) set specific contrast ratio requirements to ensure text is readable by people with low vision.
What Is Contrast Ratio?
Contrast ratio measures the relative luminance difference between two colors. It ranges from 1:1 (no contrast, same color) to 21:1 (maximum contrast, black on white). Higher ratios mean better readability.
WCAG Requirements
Level AA (Minimum)
Normal text (under 18pt or 14pt bold) requires a contrast ratio of at least 4.5:1. Large text (18pt or 14pt bold and above) requires at least 3:1. This is the most commonly required conformance level.
Level AAA (Enhanced)
Normal text requires 7:1. Large text requires 4.5:1. This level provides better readability for users with moderate vision loss.
Common Mistakes
Light gray text on white backgrounds is the most common contrast failure. Placeholder text in form fields often fails contrast requirements. Text over images without sufficient overlay frequently fails. Colored links that are not distinguishable from surrounding text are problematic.
Testing Contrast
Use our Contrast Checker tool to test any color combination against WCAG requirements. Enter your text and background colors to see the ratio and whether it passes each WCAG level.
Tips for Better Contrast
Start with dark text on light backgrounds for body content. Use color and another indicator like underlines for links. Test your designs in grayscale to check if information is still distinguishable. Consider users with color blindness by not relying on color alone to convey meaning.
🎨 Try our color tools!