Interactive Element Contrast Sufficient
Group: interactive-components • Guideline: control-information
Summary in Plain English
The visual information needed to identify an interactive element and its states has to meet a minimum contrast ratio. Inactive elements, and components whose appearance the browser supplies unmodified, are exempt.
Why It Matters
If the boundary of a control or the mark showing it is selected is too faint to see, the control is effectively invisible to people with low vision, even though its label is readable.
Scope: When This Applies
The draft's own conditions, quoted from guidelines/groups/interactive-components/control-information/interactive-element-contrast-sufficient.md.
Except when
- The interactive element is inactive, or
- The appearance of the component is determined by the user agent and not modified by the content author.
Test Procedure from the W3C Draft
Quoted from the provision's informative document, informative/guidelines/interactive-components/control-information/interactive-element-contrast-sufficient.md. It is the group's own procedure, not an editorial testing guide.
Procedure
For each interactive element:
- Identify which visual information defines the boundaries of the interactive area.
- Check if the visual information meets the minimum contrast ratio test.
- For each possible state, repeat step 1 and 2.
Expected results
- #2 is true for each state.
W3C Working Group Status
The draft records no open editors' notes on this provision.
W3C Threads on This Provision
4 GitHub threads carrying 13 comments, fetched from w3c/wcag3 by the tracker. Titles, numbers and states are the threads' own.
⚠️ This summary is stale — comments landed after it was written.
What the Argument Is About
Whether a visual state requirement should be tied to programmatic state, and whether disabled controls keep their exemption from contrast, get a mandated indicator, or simply stop being classed as non-interactive.
Positions taken in the thread
The draft SC in #193 reads: when a user interface component visibly indicates its states, these states are visually distinct and correspond to the programmatic states. The wording deliberately dodges the question the mobile accessibility task force could not settle โ how much visual difference counts, since changing one pixel in a graphic is technically a difference โ and instead leans on 1.4.11 to handle the 3:1 contrast of the salient part. The value he claims for it is the correspondence itself: catching a state change that is missing, reversed, or otherwise out of sync.
Mixing programmatic state into a visual SC opens a loophole: a control with no programmatic state fails 4.1.2, but would nominally pass this one because there is nothing to disagree with. He proposed replacing that clause with wording along the lines of accurately represents the current state of the component, and also questioned whether visually distinct is firm enough for normative language, foreseeing the same problems as visible focus indication. detlevhfischer accepted the substitution as an improvement.
#197 starts from the observation that disabled interface elements work badly for people with low vision and suggests that, rather than only exempting them from 1.4.3, a better way might be a disabled icon; DavidMacDonald proposes at least 3:1 contrast OR an icon marking the element disabled. bkimmel seconds the problem, particularly where disabled controls are used to advertise the potential of an interaction โ fill these fields in and you can submit โ which he calls a huge safe harbour for things that cut against the Perceivable goal. He is not convinced an icon specifically is the answer.
He would far rather see some form of minimum contrast apply, to solve readability, than require an icon โ WCAG cannot start demanding icons everywhere without dictating visual design. His preferred shape is a more general intent of indicating that something is disabled, and he flags a crossover with how user agents themselves render disabled state.
Reviewing #197 against the current draft, adampage notes disabled elements fall outside the definition of interactive element โ an element that responds to user input and has a distinct programmatically determinable name โ so the neighbouring Interactive elements distinguishable provision does not reach them. They appear instead to match non-interactive element (does not respond to user input and does not include sub-parts), but are absent from that definition's examples and notes, so the intent is unclear. He suggests broadening the term or introducing a new one for elements that exist to be interactive even when conditionally disabled or read-only, and points at the Disabled controls explained provision and w3c/wcag#5053 as related.
#207 proposes reorganising all the colour and contrast outcomes on vision-science lines: luminance carries high spatial frequency information and is what reading depends on, hue matters for object recognition and colour-coded non-text material, and spatial frequency โ font weight, size, letter and line spacing, padding, glyph design โ is the critical factor in readability. That yields two guidelines, one for not relying on colour alone plus non-text contrast, one for luminance contrast in readable content, with non-text use cases classified as Semantic, Symbolic, DataViz and Container. He also argues specific legacy numbers are unsupported: the 80-characters-per-line figure traces to IBM equipment economics rather than research (Bringhurst's 66 characters, or a 50 to 70 range, offered as informative), and a 1.5 line-height rule is near meaningless in CSS because the x-height to font-size ratio varies by 50 percent or more between families.
Agreed
- The programmatic-states clause in the #193 draft should go. detlevhfischer accepted patrickhlauke's alternative framing and nobody returned to defend the original.
- Micro-SC proliferation is a real risk โ detlevhfischer dreads the proliferation of bitty SCs that interact in multiple ways, as 2.4.7 and 1.4.11 already do, and patrickhlauke would rather see a few chunky, well thought-out SCs than a goldrush for 2.2. Their tentative answer was a wider provision covering interface components being visible and their states discernible.
- Exempting disabled controls from contrast entirely is a problem for low-vision users; the disagreement is only over the remedy.
- Both #193 and #197 need more research โ alastc took each off the WCAG 2.2 slate on the same day in July 2020 for that reason, unopposed.
Still open
- Whether disabled elements should be brought inside the definition of interactive element, given a new term, or explicitly named in the non-interactive element notes โ adampage raised all three and has had no reply.
- Whether a state-change requirement can be written testably at all, which is detlevhfischer's original one-pixel question and patrickhlauke's doubt about visually distinct as normative language.
- Whether the default (or only) state of a control counts as a state under the SC. detlevhfischer suggested this could cover the invisible-input problem in w3c/wcag#680; patrickhlauke replied that it would feel odd for a button that only fires an action, rather than toggling, to fall under the SC.
- Whether #193 stays in the repository, moves to WCAG 3 proper, or is deleted. patrickhlauke asked alastc directly in August 2024 and the question is still unanswered.
- Whether the contrast outcomes get restructured along Myndex's luminance/hue/spatial-frequency split. Nobody has responded to #207.
- Whether the requirement is discharged by author styles or by user-agent defaults for interactive items with a background or border โ alastc lists it in #270 as a supplemental item without resolving it.
Note
This provision is assembled from four threads with very little live discussion. The substantive exchange in #193 is from 2019 and the exchange in #197 from 2019 and 2020, with adampage's 2026 comment the only recent analysis; #207 and #270 are both long structural proposals that have drawn no comments at all, so nothing in them has been tested by rebuttal.
- #193 Draft SC "States Discernable" open 8 comments · updated 2026-05-02
- #197 Future Success Criteria: Require disabled icon for disabled UI interface elements open 5 comments · updated 2026-10-26
- #207 Color and Contrast For Text & Non-Text Outcomes open 0 comments · updated 2026-05-01
- #270 Requirements: Non-text Contrast open 0 comments · updated 2026-04-02
WCAG 2.2 Criteria That Map Here
From this site's reviewed WCAG 2.2 → WCAG 3 map. The map is an interpretation, not a W3C mapping: W3C has not published one yet.
W3C Raw Source Text
Verbatim from guidelines/groups/interactive-components/control-information/interactive-element-contrast-sufficient.md · informative document: informative/guidelines/interactive-components/control-information/interactive-element-contrast-sufficient.md
Visual information required to identify interactive elements and states meet a minimum contrast ratio test. :::except-when * The interactive element is inactive, or * The appearance of the component is determined by the user agent and not modified by the content author. :::