Non-text Contrast
Summary:
WCAG 1.4.11, "Non-text Contrast," expands the concept of contrast beyond text. It focuses on ensuring that visual elements like user interface components and graphical objects have enough contrast against adjacent colors, aiding users with visual impairments or color deficiencies.
What:
This guideline requires a minimum contrast ratio of 3:1 for essential graphical elements and user interface components against their adjacent colors. It covers elements like buttons, form fields, icons, and other visual elements necessary for interaction or understanding.
Why:
Good contrast is not just about text. Users with low vision or color vision deficiencies might struggle to discern buttons, icons, or other interactive elements if they blend into the background. This guideline ensures these elements are easily identifiable and usable by a broad range of users.
Examples and Scenarios:
- Buttons and Controls: Ensure buttons, especially those with icons like ‘submit’ or ‘next’, have sufficient contrast against the background.
- Input Fields: Form fields, checkboxes, and radio buttons must stand out from their backgrounds to be easily located and used.
- Visual Indicators: Icons or graphical representations (like error symbols or progress bars) should be clearly distinguishable from their surroundings.
How to Comply:
- Websites: Use CSS to set appropriate colors for interface components, ensuring a contrast ratio of at least 3:1 with their background.
- Mobile Apps: Design elements like buttons, toggles, and status icons with high contrast in mind, making them easily discernible on small screens.
- Software Applications: Check and adjust the contrast of all interactive and informative graphical elements within the UI to meet this criterion.
Exceptions:
- Logos: Elements that are part of a logo or brand name, which are often stylized, are exempt from this contrast requirement.
- Decorative Graphics: Non-essential, decorative graphics that don't contribute to the functionality or understanding of the content are not required to meet this contrast ratio.