Perceivable / 1.4 Distinguishable
1.4.11Non-text Contrast
Level AAEnsure visual elements needed for operation or understanding -- button borders, form controls, and icons indicating state such as focus or hover -- have at least a 3:1 contrast ratio against adjacent colors. Inactive components, unmodified browser-default styling, and graphics whose specific appearance is essential (such as a photo) are exempt.
Specification updated
- Enhancement#5064(opens in a new tab)1.4.11: Rewrite the boundaries explanation
Specification changes under review
- #5090(opens in a new tab)1.4.11: Add C40 as sufficient technique, reorganize by situation
Note
A detailed commentary for this success criterion is not yet available. In the meantime, this page lists related patterns, techniques, and links to the normative sources.
Related Techniques
Specific implementation techniques for meeting this success criterion. This site doesn't include the full text, so follow the links to the original W3C documents.
Sufficient Techniques(4)
- G174: Providing a control with a sufficient contrast ratio that allows users to switch to a presentation that uses sufficient contrast(opens in a new tab)waic.jp(opens in a new tab)
- G195: Using an author-supplied, visible focus indicator(opens in a new tab)waic.jp(opens in a new tab)
- G207: Ensuring that a contrast ratio of 3:1 is provided for icons(opens in a new tab)waic.jp(opens in a new tab)
- G209: Provide sufficient contrast at the boundaries between adjoining colors(opens in a new tab)waic.jp(opens in a new tab)
Normative References
- Success Criterion 1.4.11 Non-text Contrast — WCAG 2.2(opens in a new tab)The normative requirement text.
- Understanding Non-text Contrast — W3C(opens in a new tab)Official guidance on intent, examples, and techniques.