Under WCAG 1.4.11, which parts of a fitness app's controls and graphics need 3:1 against adjacent colors, and which are exempt?

## What 1.4.11 covers WCAG 2.2 Success Criterion **1.4.11 Non-text Contrast** (Level AA) extends contrast beyond text. It asks for a contrast ratio of **at least 3:1 against adjacent colors** for two kinds of content: - **User interface components**: the visual information needed to identify a component and its states, such as an input's boundary, a checkbox's check, a switch's thumb position, or a focus indicator. - **Graphical objects**: the parts of a graphic needed to understand the content, such as the filled arc of a progress ring or the line in a chart that carries the data. **Adjacent colors** means whatever sits directly next to the part being judged. For an input with a white inside, a dark border and a white page, the border is judged against the white page around it. For a check mark inside a checkbox, the adjacent color is the box's own fill. The 3:1 figure is a threshold, not a rounded target: WCAG's guidance says 2.999:1 does not meet it. ## Walking through a fitness app | Element | Needs 3:1? | Why | |---|---|---| | Search field shown only by a thin border | Yes | The border is the only visual cue that the field exists | | Button with a clear text label | Not for its boundary | The label already identifies the control; the label falls under text contrast | | Switch for workout auto-pause | Yes, for the state cue | Users must tell on from off by what they see | | Focus ring on any control | Yes | Focus is a state that must be identifiable | | Step-progress ring with no number | Yes | The arc is the only way to read progress | | Step-progress ring with count and goal printed beside it | Not for the arc | The text conveys the same information | | Disabled workout-sync control | No | Inactive components are excluded | | Background illustration of a runner | No | Decorative graphics are not required for understanding | ## The exemptions, precisely 1. **Inactive components** are excluded. A disabled control has no contrast requirement, though it should still look like a control. 2. **Appearance determined by the user agent and not modified by the author** is excluded, so an unstyled platform-default control is not the author's responsibility; once the system restyles it, it is. 3. **Graphics not required for understanding** are excluded: decorative art, or a graphic whose information is also presented as text, such as labels and values on a chart. That text must then meet 1.4.3. 4. **Hover effects** added by the author are treated as supplemental, as long as they do not make the component or its other indicators lose contrast. 5. **Logos** are treated as essential presentation, though a logo that acts as a control is better given a contrasting variant. ## What this means for pairings A pairing system that lists only text pairs leaves teams guessing about icons, borders and rings. So the documented pairs need a **non-text tier**: border, icon and indicator roles that reach at least 3:1 on every surface they are allowed on. In a ramp where steps are defined by luminance, the non-text distance is usually shorter than the body-text distance, because 3:1 is a lower bar than 4.5:1. Two patterns are worth building in: - **Check the state cue, not the state change.** 1.4.11 does not require the on and off colors of a switch to contrast with each other; it requires the cue that shows the state to contrast with what sits next to it. A state shown by a hue change alone is a Use of Color problem instead. - **Prefer a label over a stronger color when both work.** Printing the step count next to the ring takes the arc out of the requirement and helps everyone, including people who find arcs hard to judge. ## Common misreadings - Treating every border as needing 3:1: only a boundary that is the sole cue for a control is required. - Treating icons as text: an icon required for understanding needs 3:1 under 1.4.11, not the 4.5:1 text minimum. - Forgetting focus: even a control that needs no visible boundary still needs a focus indicator with sufficient contrast. - Measuring against the wrong neighbour: the ratio is taken against the adjacent color, not against the page background in general. Getting these distinctions right is what lets a system approve lighter borders where labels carry the meaning, without quietly failing the controls that depend on a border alone.