Non Text Contrast

title: "Non-text Contrast — SC 1.4.11" weight: 16 description: "Learn WCAG Success Criterion 1.4.11 Non-text Contrast: UI components and graphical objects require 3:1 contrast ratio, covering buttons, icons, focus indicators, charts, and form controls." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, color-contrast]

WCAG Success Criterion 1.4.11 Non-text Contrast requires a 3:1 contrast ratio for UI components (buttons, form controls) and graphical objects (icons, chart elements) against adjacent colors, ensuring users can perceive interactive and informational elements.

## What You'll Learn

You will understand SC 1.4.11 requirements, identify non-text elements that need contrast checking, test icons and UI components, and remediate contrast failures in interactive elements.

## Why It Matters

Text contrast is well understood, but non-text elements are often overlooked. A button with insufficient contrast against its background may be invisible to users with low vision. Icons without sufficient contrast convey no information.

## Real-World Use

A designer creates a search icon in light gray (#bbb) on a white header. The icon has 1.8:1 contrast, failing SC 1.4.11. A user with low vision cannot see the search icon and cannot find the search functionality. The fix is darkening the icon to #555.

## Non-text Contrast Scope

```mermaid
flowchart TD
  A[SC 1.4.11] --> B[UI Components]
  A --> C[Graphical Objects]
  B --> D[Buttons, inputs, toggles]
  B --> E[Focus indicators]
  B --> F[Form control borders]
  C --> G[Icons]
  C --> H[Chart elements]
  C --> I[Infographic graphics]

Testing Non-text Contrast

Identify all interactive and informational non-text elements and check their contrast against adjacent backgrounds.

<!-- Non-text contrast examples -->
<!-- Button background vs page background -->
<button style="background: #e0e0e0; color: #333; border: none;">
  Submit
</button>
<!-- Button background #e0e0e0 against white page: 1.4:1 -- FAILS -->

<!-- Icon in a link -->
<a href="/search">
  <svg width="24" height="24" fill="#999">
    <path d="M15.5 14h-.79l-.28-.27..."/>
  </svg>
</a>
<!-- Icon fill #999 on white: 2.8:1 -- FAILS -->

/* SC 1.4.11 compliant UI colors */
.button-primary {
  background: #0056b3; /* 4.7:1 against white -- passes */
  color: #fff;
}

.button-outline {
  border: 2px solid #0056b3; /* 4.7:1 against white -- passes */
  color: #0056b3;
  background: transparent;
}

.icon-color {
  fill: #555; /* 5.1:1 against white -- passes */
}

.focus-indicator {
  outline: 3px solid #4A90D9; /* 4.1:1 against white -- passes */
}

// Non-text contrast checker
function checkNonTextContrast(element) {
  const computed = window.getComputedStyle(element);
  const bgColor = getComputedBackground(element);
  let elementColor;

  if (element.tagName === 'svg' || element.querySelector('svg')) {
    elementColor = computed.fill || computed.color;
  } else {
    elementColor = computed.backgroundColor;
  }

  const ratio = getContrastRatio(elementColor, bgColor);
  return {
    element: element.tagName,
    type: element.tagName === 'svg' ? 'icon' : 'ui-component',
    ratio: ratio.toFixed(1),
    passes: ratio >= 3,
    threshold: '3:1'
  };
}

Common Mistakes

• Testing only text contrast and ignoring UI components
• Not checking icons inside links and buttons
• Forgetting about focus indicator contrast
• Assuming borders need the same contrast as backgrounds
• Testing default state but not hover or active states
• Ignoring chart and graph element contrast
• Not considering the adjacent color in gradient backgrounds

Practice and Challenge

Practice 1: Check the contrast of a button background against the page background. Practice 2: Test an icon's contrast against its background. Practice 3: Verify a focus indicator has sufficient contrast. Practice 4: Check form input borders for contrast. Practice 5: Test a chart element against its background.

Challenge: Create a non-text contrast audit tool that scans a page for UI components (buttons, inputs, toggles), graphical objects (icons, SVGs), and focus indicators, and reports their contrast ratios against adjacent backgrounds. Include pass/fail for each element.

FAQ

Mini Project

Create a design system audit for non-text contrast. Document the contrast ratios for: primary button background, secondary button border, input border, search icon, hamburger menu icon, focus indicator, and chart primary color. All against both white and light gray backgrounds.

What's Next

Color Contrast Tools covers tools like Stark, Colour Contrast Analyser, and contrast checkers.