WCAG (Level AA) SC 1.4.11 Non-text Contrast (W3.org)
Issue description
WCAG 1.4.11, “Non-text Contrast” extends the principles of color contrast beyond just text to encompass user interface components and graphical objects. It aims to ensure that all visual elements on a web page have sufficient contrast against their background, making them easily discernible for users with low vision or color vision deficiencies. Many websites use color combinations with poor contrast for user interface components (like buttons, icons, form elements) and graphical objects. This can make it difficult for some users to:
- Perceive visual elements: Users with low vision may struggle to see or distinguish elements that lack sufficient contrast with their surroundings.
- Understand the interface: Users might not be able to identify interactive elements or understand their purpose if they blend in with the background.
- Complete tasks: Poor contrast can hinder users from interacting with the website and completing tasks, such as clicking buttons or filling out forms.
Read our post on Website Color Contrast: How to Check For It for more information on color contrast.
WCAG requirements
This guideline sets minimum contrast ratios for: User interface components: Interactive components and visual indicators should have a contrast ratio of at least 3:1 against adjacent color(s).
- Graphical objects: Graphical objects that convey information should also have a contrast ratio of at least 3:1.
Exceptions:
- Inactive components: Inactive user interface components (e.g., disabled buttons) have no contrast requirement.
- Decorative elements: Purely decorative elements that don’t convey information have no contrast requirement.
- Logotypes: Logotypes (logos) have no contrast requirement.
Essentially, this guideline ensures that all visual elements on a page are easily perceivable and distinguishable, regardless of a user’s visual abilities. It promotes inclusivity and provides a better user experience for everyone.
Related requirements
The following WCAG source criteria are often related to this as well. They can provide additional insights into specific challenges you may be encountering.
Who this issue impacts
Follow the links for additional information on user impairments:
Suggestions for remediation
Remediating WCAG 1.4.11, “Non-text Contrast” involves ensuring sufficient color contrast between user interface components and graphical objects and their backgrounds. Here’s how:
Use a contrast checking tool:
- Measure contrast ratios: Use a contrast checker (e.g., WebAIM Contrast Checker) to analyze the contrast ratio between your UI components, graphical objects, and their backgrounds. Aim for a ratio of at least 3:1.
- Test different states: Check the contrast in all states of interactive components (normal, hover, focus, active, disabled).
Adjust colors:
- Increase contrast: If the contrast is insufficient, adjust the colors of the elements or their backgrounds to improve the ratio.
- Darken or lighten: Try darkening the foreground color (the element) or lightening the background color (or vice versa) to achieve better contrast.
Use other visual cues:
- Borders and outlines: Add borders or outlines to elements to enhance their visibility against the background.
- Patterns and textures: Use subtle patterns or textures to differentiate elements from the background. Icons and symbols: Use clear icons or symbols to supplement color and provide additional visual cues.
- Consider user Settings: High contrast mode: Ensure your website works well with the user’s operating system high contrast mode.
Examples:
- Buttons: If you have a light gray button on a white background, try:
- Darkening the button color: Change the button color to a darker gray or blue.
- Adding a border: Add a dark border around the button.
- Icons: If you have a white icon on a light gray background, try:
- Changing the icon color: Change the icon color to black or a darker gray.
- Adding a drop shadow: Add a subtle drop shadow to the icon to make it stand out.
By implementing these techniques, you can ensure that your website’s user interface and graphical objects are easily perceivable and distinguishable for everyone, including those with low vision or color vision deficiencies.
