Non-text Contrast
Tier 1 · The normative floor
Baseline compliance
What the normative text of WCAG 2.2 requires, and nothing more. Only a failure of this tier is a WCAG failure.
The bare minimum
These have a contrast ratio of at least 3:1 against adjacent colors: the visual information needed to identify user interface components and their states (except inactive components, and components whose appearance is set by the browser and not modified by the author), and the parts of graphics needed to understand the content (unless a particular presentation is essential).
Normative text
Verbatim from WCAG 2.2, W3C Recommendation 12 December 2024. Underlined terms are defined below.
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
- User Interface Components
- Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component 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 graphics is essential to the information being conveyed.
Known failures
These fail this criterion or a related one named in the text. Log them as WCAG failures.
- A state shown only by a change of color, such as a button whose background shifts shade on focus, fails 1.4.1 Use of Color. W3C's 1.4.11 Understanding document says 1.4.11 doesn't compare the two states, "However, this would not pass Use of color."
Not required by the normative text
Common claims that this criterion does not support. Don't log these as WCAG failures.
- Contrast between a component's own states, such as focused versus unfocused. Contrast is measured against adjacent colors.
- A border on every input. If something else identifies the field, such as a contrasting background, the border needn't meet 3:1.
Definitions used (6)
Glossary definitions are normative. Their notes are informative.
- presentation
-
rendering of the content in a form to be perceived by users
- contrast ratio
-
(L1 + 0.05) / (L2 + 0.05), where
- L1 is the relative luminance of the lighter of the colors, and
- L2 is the relative luminance of the darker of the colors.
Informative notes (6)
Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1).
Because authors do not have control over user settings as to how text is rendered (for example font smoothing or anti-aliasing), the contrast ratio for text can be evaluated with anti-aliasing turned off.
For the purpose of Success Criteria 1.4.3 and 1.4.6, contrast is measured with respect to the specified background over which the text is rendered in normal usage. If no background color is specified, then white is assumed.
Background color is the specified color of content over which the text is to be rendered in normal usage. It is a failure if no background color is specified when the text color is specified, because the user's default background color is unknown and cannot be evaluated for sufficient contrast. For the same reason, it is a failure if no text color is specified when a background color is specified.
When there is a border around the letter, the border can add contrast and would be used in calculating the contrast between the letter and its background. A narrow border around the letter would be used as the letter. A wide border around the letter that fills in the inner details of the letters acts as a halo and would be considered background.
WCAG conformance should be evaluated for color pairs specified in the content that an author would expect to appear adjacent in typical presentation. Authors need not consider unusual presentations, such as color changes made by the user agent, except where caused by authors' code.
- user interface component
-
a part of the content that is perceived by users as a single control for a distinct function
Informative notes (3)
Multiple user interface components may be implemented as a single programmatic element. "Components" here is not tied to programming techniques, but rather to what the user perceives as separate controls.
User interface components include form elements and links as well as components generated by scripts.
What is meant by "component" or "user interface component" here is also sometimes called "user interface element".
- state
-
dynamic property expressing characteristics of a user interface component that may change in response to user action or automated processes
States do not affect the nature of the component, but represent data associated with the component or user interaction possibilities. Examples include focus, hover, select, press, check, visited/unvisited, and expand/collapse.
- user agent
-
any software that retrieves and presents web content for users
- essential
-
if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform
Tier 2 · The gap
Usability & user impact
Where content can meet this criterion and still make things harder for people with disabilities. These are not failures of SC 1.4.11, so raise them as usability defects. Known failures, including failures of related criteria, are listed in Tier 1.
A state change that meets 3:1 but is shown only by a thin border change is easy to miss.
Tier 3 · The golden path
Recommended best practice
The pattern that meets the floor, closes the gap, and avoids audit disputes. A recommendation, not a requirement.
Give inputs clear borders and focus indicators, and make states differ in more than color (for example a check mark or a thicker border).
W3C's Understanding document and techniques for SC 1.4.11 ↗ are informative: sufficient techniques show ways to pass, and documented failures show common ways to fail, but neither changes what the criterion requires.
How SC 1.4.11 maps to the WCAG 3 draft
From this site's reviewed map to the WCAG 3 editor's draft. It's an interpretation: W3C has not published a mapping.
Successor provisions
From WCAG 2.2, section 5.1: “The main content of WCAG 2.2 is normative and defines requirements that impact conformance claims. Introductory material, appendices, sections marked as "non-normative", diagrams, examples, and notes are informative (non-normative). Non-normative material provides advisory information to help interpret the guidelines but does not create requirements that impact a conformance claim.”