Importance for Accessibility
Color and contrast are essential design elements that make web content visually engaging and readable. However, poor color choices can create barriers for users with low vision or color blindness. What appears clear to one person may be difficult or impossible for another to read.
WCAG 2.1 Level AA provides specific contrast ratio requirements to ensure text is accessible to the widest possible audience. Tools like the WebAIM Contrast Checker can help you test your color combinations and confirm they meet accessibility standards before publishing.
Below are links to the relevant WCAG success criteria and the WebAIM Contrast Checker to help you evaluate your designs.
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.
Non-text Contrast
Meeting the Standard
- Non-text contrast of user interface components and graphical objects has a minimum contrast ratio of at least 3:1 against adjacent colors.
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