Skip to main content
Perceivable WCAG 1.4.11

1.4.11 Non-text Contrast

User interface components and graphical objects have a contrast ratio of at least 3:1 against adjacent colors.

Level AA Serious WCAG 2.1 (new) WCAG 2.2

What This Rule Means

WCAG 1.4.11 extends contrast requirements beyond text to cover two categories: user interface components (form controls, buttons, links, focus indicators) and meaningful graphical objects (icons, charts, infographics). Both must achieve a minimum 3:1 contrast ratio against adjacent colors needed to identify them.

For UI components, this means the visual boundary or indicator that identifies the component must have 3:1 contrast against the background. A text input, for instance, needs its border to be distinguishable from the surrounding area. For graphical objects, the parts of the image that convey meaning must have sufficient contrast against adjacent elements.

Exceptions include inactive components (disabled buttons), components whose appearance is determined by the user agent (unstyled browser defaults), and graphics where a specific color presentation is essential (flags, logos, photographs).

Why It Matters

Users with low vision need to identify interactive elements and understand graphical information. If a form field has a barely visible border, a user may not realize it is an input. If a chart uses low-contrast segments, the data becomes indistinguishable. The 3:1 ratio ensures these non-text elements are perceivable under normal viewing conditions.

Focus indicators are especially critical — if the keyboard focus ring does not meet 3:1 contrast, keyboard-only users cannot track where they are on the page.

Related axe-core Rules

There are currently no automated axe-core rules specifically for 1.4.11 because evaluating non-text contrast requires understanding the visual context of each UI component and graphic. This is primarily a manual testing criterion, though some tools can flag potential issues.

How to Test

  1. Identify all interactive UI components: buttons, inputs, selects, checkboxes, radio buttons, sliders, toggles, links, tabs.
  2. For each component, check the contrast of its visual boundary against the adjacent background using a color contrast tool.
  3. Test focus indicators. Tab through the page and verify the focus ring or indicator has at least 3:1 contrast against the background.
  4. Check meaningful icons and graphical elements. Use a color picker to compare the icon color against its background.
  5. Verify chart elements (bars, lines, pie segments) have 3:1 contrast against adjacent colors.

How to Fix

Ensure form controls have visible, high-contrast borders:

/* Accessible form input styling */
input, select, textarea {
  border: 2px solid #595959; /* 7:1 against white */
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  background: #ffffff;
}

/* Custom checkbox with sufficient contrast */
.checkbox-custom {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid #4a4a4a; /* 9.7:1 against white */
  border-radius: 3px;
  background: #ffffff;
}

.checkbox-custom:checked {
  background: #0055b8;
  border-color: #0055b8;
}

Ensure focus indicators meet the 3:1 requirement:

/* High-contrast focus indicator */
:focus-visible {
  outline: 3px solid #0055b8; /* 7.04:1 on white */
  outline-offset: 2px;
}

/* On dark backgrounds */
.dark-section :focus-visible {
  outline: 3px solid #6eb5ff; /* 7.52:1 on #121212 */
  outline-offset: 2px;
}

Ensure icons and graphical elements have sufficient contrast:

/* Icon contrast */
.icon {
  color: #595959; /* 7:1 against white */
  /* Avoid light gray icons like #ccc (1.6:1) or #aaa (2.3:1) */
}

/* Chart bars with sufficient contrast */
.chart-bar-primary { fill: #0055b8; }   /* 7:1 on white */
.chart-bar-secondary { fill: #c62828; } /* 6.2:1 on white */
.chart-bar-tertiary { fill: #1b5e20; }  /* 7.8:1 on white */

/* Chart bars must also contrast with each other if adjacent */
/* Use patterns as additional differentiator */
.chart-bar-secondary {
  fill: url(#diagonal-stripe);
}

Common Mistakes

  • Minimalist form inputs with no visible border or a very light border like 1px solid #e0e0e0 (1.3:1 against white).
  • Custom checkboxes and radio buttons with insufficient border contrast in their unchecked state.
  • Focus indicators removed with outline: none without providing a sufficient replacement.
  • Light gray icons (#ccc or #aaa) that are barely visible against a white background.
  • Chart segments that are distinguishable from each other only by color, with no contrast against adjacent segments.

Resources