Note: The creation of this article on testing Non-text Contrast was human-based, with the assistance on artificial intelligence.
Explanation of the success criteria
WCAG 1.4.11 Non-text Contrast is a Level AA conformance level Success Criterion. It ensures that visual elements must have a contrast ratio of at least 3:1 against adjacent colors in the following cases:
- UI Components: Visual cues needed to identify components and their states, excluding inactive elements or those styled solely by the browser.
- Graphics: Key parts of images essential for understanding the content, unless the specific visual style is crucial to the meaning.
The requirements and rationale mirror those in 1.4.3 Contrast (Minimum) for large text. Keep in mind: this doesn’t apply to inactive UI components.
See the examples in the Understanding document for this success criterion.
Who does this benefit?
- Low-contrast controls and informative graphics can be hard or impossible to perceive for people with visual impairments.
Testing via Automated testing
Automated testing is a game-changer for WCAG 1.4.11 Non-text Contrast, offering speed and consistency to quickly spot low-contrast issues in common UI elements like buttons, form fields, and icons. These tools excel at flagging clear contrast failures in SVGs or HTML elements with defined background and foreground colors.
However, automated tools aren’t a silver bullet. They often struggle with complex visuals such as custom controls, images acting as icons, or elements styled with CSS gradients and transparency. Crucially, they can’t determine if an element is essential for understanding or functionality, that requires human judgment. So, use automated testing as a valuable first step, but remember it’s not a standalone solution for evaluating non-text contrast.
Testing via Artificial Intelligence (AI)
AI-powered testing excels at quickly checking vast amounts of visual content for WCAG 1.4.11 Non-text Contrast, catching low-contrast issues on elements like icons and buttons that human eyes might miss.
However, AI isn’t perfect. It often misses the bigger picture, like an element’s purpose or if it’s decorative. It can also misinterpret color contrast due to lighting, gradients, or transparency.
Testing via Manual testing
Manual testing for WCAG 1.4.11 Non-text Contrast offers unique benefits that automated tools simply can’t replicate. It allows testers to evaluate real-world usability, considering the visual environment, different component states (like what happens when you hover or focus on an element), and how contrast appears on various screens or under different lighting. Crucially, manual methods ensure that vital visual cues, such as focus outlines, buttons, and icons, are truly discernible for users with low vision, details often missed or misinterpreted by automated checks.
While invaluable, manual testing isn’t without its drawbacks. It can be time-consuming and inconsistent, particularly without standardized tools or clear reference points for contrast measurements. Furthermore, subtle violations might be overlooked, and a tester’s own vision or device settings could introduce subjectivity. This highlights the need for color contrast analyzers to ensure objective and thorough evaluations.
Which approach is best?
No single approach for testing 1.4.11 Non-text Contrast is perfect. However, using the strengths of each approach in combination can have a positive effect.
Start with automated tools or AI platforms to quickly pinpoint common contrast issues in controls, icons, and visual indicators. These tools are great for rapidly flagging elements that likely fall below the required 3:1 contrast ratio, especially for standard UI components.
However, automation can miss tricky, nuanced problems like contrast in custom graphics, hover states, or focus indicators. That’s where manual testing becomes crucial for a thorough evaluation. Grab a color contrast analyzer to meticulously verify contrast ratios and visually inspect component states across various interactions and screen conditions.
By blending these methods, you ensure both broad coverage and the essential human judgment needed for accurate, inclusive results.