Color Contrast & Color Reliance
Importance for Accessibility
When creating web content, color and contrast are important design features that help bring your page to life. Web designers can spend hours tweaking their complementary colors to find the best combination of text content and background color that matches their designs.
When improperly chosen, clashing color choices can create reading issues for users with low vision or color blindness. What might seem like clear blue text against a dark green background can become an invisible distinction for someone with a vision impairment.
Fortunately, WCAG 2.0 AA standards create clear guidelines for the contrast ratio that will be usable by the most individuals and the group at WebAIM built a contrast checker that will help you find the perfect color balance on your page.
Below, we have provided links to color contrast success criteria as well as the WebAIM Contrast Checker. With these resources, you can test your designs to make sure they are accessible before you publish.
Color Contrast Standards
Success Criterion 1.4.3 (minimum)
Meeting the Standard
- Text and images of text have a contrast ratio of at least 4.5:1.
- Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold - has a contrast ratio of at least 3:1.
Color Reliance
WCAG Level A Success Criterion 1.4.1: Use of Color:
Color is not used as the only visual means of conveying information, indicating an action, prompting a response or distinguishing a visual element.
Meeting the Standard
- Ensure your data conveyed by color is also available in text
- Text cues should be included for colored form labels
- If using color to convey link text, make sure it meets contrast standards and also has additional visual cues to capture a users attention