Non-text Contrast

Non-text contrast failures occur when user interface components and graphical objects essential for understanding content do not have a contrast ratio of at least 3:1 against their adjacent colors. WCAG Success Criterion 1.4.11 (Level AA) extends contrast requirements beyond text to include form field borders, icon buttons, focus indicators, chart segments, state indicators, and other meaningful visual elements.

This criterion was introduced in WCAG 2.1 to address a gap: while text contrast had been required since WCAG 2.0, many sites had invisible or near-invisible input borders, low-contrast icons, and chart segments that blended into their backgrounds. A light gray border on a white input field, for instance, makes it difficult for low-vision users to even locate the form field, let alone interact with it.

The requirement applies to two categories: user interface components (buttons, form inputs, toggle switches, checkboxes, links in their various states) and graphical objects required to understand the content (icons conveying information, chart segments, infographic elements). Decorative graphics that do not convey information are exempt.

For users with low vision or color vision deficiencies, a form input with a nearly invisible border is as problematic as missing text. They cannot see where to type, cannot distinguish active from inactive toggle states, and cannot identify which tab is currently selected. This transforms basic interactions into guessing games.

Low-contrast icons are particularly dangerous when they convey status information. A green checkmark and a red X that both fail the 3:1 ratio become indistinguishable for users with reduced contrast sensitivity. Similarly, chart segments that do not contrast with their neighbors make data visualization meaningless.

The impact extends to all users in challenging viewing conditions. On a mobile device in bright sunlight, low-contrast UI boundaries become invisible. Older displays with reduced color gamut exacerbate the problem. Designing for 3:1 non-text contrast benefits everyone, not just users with disabilities.

Scrutia analyzes the computed styles of all interactive UI components and meaningful graphical elements. It measures the contrast ratio of input borders, button boundaries, icon fills, and focus indicators against their adjacent background colors. Elements falling below the 3:1 threshold are flagged with their exact ratio and a suggested color correction.