Perceivable · 1.4 Distinguishable

Non-text Contrast WCAG 1.4.11 · Level AA

Visual cues needed to identify controls and their states, such as input borders and focus indicators, and the parts of graphics needed to understand the content, need at least 3:1 contrast against adjacent colors. Inactive controls, unstyled browser defaults and essential graphics are exempt.

Level
AA
Since
WCAG 2.1
Principle
Perceivable
Guideline
1.4 Distinguishable
Try the live demo Open the Contrast Checker Checklist

Live demo

Find the email field and the send button

The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.

Switch to Fails and look for the edge of the email field and the arrow button. Then pick your own border and icon color: it needs 3:1 against the background.

Live example

Passes

Get the weekly deals email

What happened

    Why it passes

    The field border and the arrow are 4.83:1 against white. People with low vision can see where to type and what to press.

    Why it fails

    The field border and the arrow are 1.47:1 against white. They almost disappear, so people with low vision may not find the field or the button.

    Examples

    Code that fails, and the fix

    Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.

    01What changes − #dddddd + #8a8a8a

    Fails

    Pale border on a text field

    Live preview

    CSS
    /* The page and the field are both white */.search input {  border: 1px solid #dddddd;  background-color: #ffffff;}

    #dddddd against white is 1.36:1. The border is the only thing that shows where the field is, so it needs 3:1.

    Passes

    Border dark enough to find

    Live preview

    CSS
    /* The page and the field are both white */.search input {  border: 1px solid #8a8a8a;  background-color: #ffffff;}

    #8a8a8a against white is 3.45:1, so people with low vision can see the edge of the field.

    02What changes 2 lines

    Fails

    Pale icon on an icon-only button

    Live preview

    HTML
    <button type="button" class="icon-button" aria-label="Search">  <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">    <circle cx="11" cy="11" r="7" fill="none" stroke="#b3b3b3" stroke-width="2"/>    <path d="M16 16l5 5" stroke="#b3b3b3" stroke-width="2"/>  </svg></button>

    On a white button, the magnifier is the only sign of what the button does. #b3b3b3 on white is 2.10:1, below 3:1.

    Passes

    Icon dark enough to recognize

    Live preview

    HTML
    <button type="button" class="icon-button" aria-label="Search">  <svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false">    <circle cx="11" cy="11" r="7" fill="none" stroke="#6b7280" stroke-width="2"/>    <path d="M16 16l5 5" stroke="#6b7280" stroke-width="2"/>  </svg></button>

    #6b7280 on white is 4.83:1, so the icon, and with it the button, is easy to pick out.

    Passes

    Focus ring that stands out

    Live preview

    CSS
    /* The button sits on a white page */.icon-button:focus-visible {  outline: 3px solid #1d4ed8;  outline-offset: 2px;}

    The focus ring is #1d4ed8 on white, 6.70:1, so the focused state meets 3:1 against the colors around it.

    Why it matters

    Who it helps

    People with low vision can find buttons, fields, focus and icons, and read charts, when their edges and key parts stand out from their surroundings.

    W3C: Understanding 1.4.11

    • Level AA

      Level AA is the level most laws and policies require.

    • In WCAG versions

      Added in WCAG 2.1 in June 2018, and kept in 2.2.

      No WCAG 1.0 checkpoint maps to it.

    • Where it is required

      Required where the law names WCAG 2.1 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Australia and New Zealand.

    How to test

    Checking it

    A few concrete steps. Automated tools find some failures; most need a person.

    1. Measure input borders, icons, focus indicators and any button outlines that identify the control against their adjacent colors.
    2. Check state cues too, such as checked, selected and focused, and confirm each reaches 3:1.
    3. For charts and diagrams, check that lines, bars and segments needed to understand them reach 3:1 against their neighbors.

    Common failures

    Where it breaks

    • Text inputs are marked only by a light gray border, such as #dddddd on white at about 1.4:1.
    • Custom focus outlines or checkbox states use pale colors that barely stand out from the background.
    • A line chart uses pale series lines that fall below 3:1 against the chart background.

    On the Accessibility Checklist

    Related