Under WCAG 2.2 success criterion 1.4.11 Non-text Contrast, which icons on a car-rental site must reach 3:1, and which are exempt?

## What the criterion says WCAG 2.2 success criterion **1.4.11 Non-text Contrast** is at Level **AA**. It requires a contrast ratio of at least **3:1 against adjacent colors** for two kinds of visual information: - **User interface components**: the visual information required to identify a component and its states — except **inactive** components, and components whose appearance is determined by the user agent and not modified by the author. - **Graphical objects**: parts of graphics required to understand the content — except when a particular presentation of the graphic is **essential** to the information being conveyed. Icons fall under both halves. An icon-only button's glyph is often the only visual information that tells a user a control exists and what it does. A standalone icon that conveys information is a graphical object. The Understanding document names both cases: a stand-alone icon such as a print icon with no text is a graphical object, and status icons on a dashboard without associated text are given as an example that needs 3:1. How the ratio itself is calculated, and the separate thresholds for text, belong to criterion 1.4.3 and the wider contrast topic; the question here is **which icons are in scope**. ## In scope on a car-rental site | Icon | Must reach 3:1? | Reason | |---|---|---| | Icon-only close button on the filter panel | Yes | The glyph identifies the control | | Standalone insurance icon in a feature row | Yes | Graphical object required for understanding | | Booking-status icon with no text | Yes | Status conveyed only by the icon | | Pin icon next to the words “Show on map” | No | Visible text carries the same information | | Ornamental pattern behind the price | No | Not needed to understand anything | | Save button while disabled | No | Inactive components are exempt | | A rental partner's logo | No, if shown as the brand requires | Logos are treated as essential | ## The exemptions, precisely The Understanding document lists when a graphic is not “required for understanding”: 1. **Text conveys the same information** — text embedded in or overlaid on the graphic, and, in its testing procedure, graphics that have visible text for the same information. 2. **Aesthetic purpose** — the user does not need to see the graphic to understand the content or use the functionality. 3. **The information is available in another form**, such as a table. 4. **Logos and brand names**, treated as essential. But a logo shown at low contrast by the author's choice — for example, faded until hovered — is not essential and is **not** exempt. Separately, **inactive** components are exempt from the component half. Text that sits inside a graphic is not covered by 1.4.11 at all; it must meet text contrast under 1.4.3. This ties back to “never icon-only meaning”: pairing an icon with a visible label helps comprehension and also takes the icon out of 1.4.11's scope, although the label text must then meet text contrast. ## What “adjacent colors” means for an icon The ratio is measured between the icon and the colors it touches, not the page as a whole: - A white phone icon inside an orange circle is measured against the **orange**; the Understanding document's own example says the background behind the circle is irrelevant when the icon alone carries the meaning. - If the circle itself carries meaning (its presence or color is the message), the circle is measured against the page too. - For multi-color icons or gradients, identify the parts required for understanding and test the least contrasting area; if that area were invisible, would the icon still be understood? If yes, it passes. ## Boundaries and states The criterion does **not** require a visible boundary around every control. The Understanding document says that when a control has visible content, such as text or a sufficiently contrasting icon, the boundary of its hit area is not subject to the requirement. An icon-only button with a contrasting glyph passes without a border — the glyph does the identifying. States need care. The criterion does not require the colors that distinguish two states of one component to contrast 3:1 with each other when they do not appear side by side. But each state's non-text indicator must contrast with its adjacent colors: if the only sign that a car is saved is a filled heart, that filled heart must reach 3:1 against the card behind it, and the outlined heart must too. ## Designing for it in a system - Check icon colors against every surface they sit on, including hover, selected and inverted surfaces, not only the default background. - Give meaningful icons their own color role with a contrast check, rather than reusing a pale secondary color intended for decoration. - Watch the “muted” variant: a light grey icon used for a meaningful status is a frequent audit finding. - Record in the icon guidance which uses are exempt and why, so a reviewer does not demand 3:1 of a decorative glyph or waive it for a standalone one.