What level is WCAG 1.4.11?

WCAG 1.4.11 Non-text Contrast is a Level AA criterion under the Perceivable principle.

Level AA Perceivable

WCAG 1.4.11: Non-text Contrast

UI components (form inputs, buttons, focus indicators) and meaningful graphical objects must have at least 3:1 contrast ratio against adjacent colors. This ensures interactive elements are visible to users with low vision.

What is WCAG 1.4.11 Non-text Contrast?

WCAG 1.4.11 Non-text Contrast is a Level AA web accessibility success criterion under the Perceivable principle. UI components (form inputs, buttons, focus indicators) and meaningful graphical objects must have at least 3:1 contrast ratio against adjacent colors. This ensures interactive elements are visible to users with low vision. Common failures include form inputs with very light gray borders on white backgrounds and custom focus indicators with insufficient contrast. Meeting this criterion is essential for accessible, inclusive web design.

How to Test

✓ Check form input borders have 3:1 contrast against the background
✓ Verify button borders or backgrounds have 3:1 contrast against the page background
✓ Test focus indicator visibility — it must have 3:1 contrast
✓ Check that icons and graphical indicators have sufficient contrast
✓ Verify custom checkboxes, radio buttons, and toggle switches are visible

Common Failures

✗ Form inputs with very light gray borders on white backgrounds
✗ Custom focus indicators with insufficient contrast
✗ Icons that are too light to perceive against their background
✗ Toggle switches or checkboxes that rely on subtle color changes
✗ Chart elements (lines, bars) with insufficient contrast against the background

✓ Good Example

<!-- Input with visible border: #6b7280 on #ffffff = 5.03:1 -->
<input type="text" style="border: 2px solid #6b7280; padding: 0.5rem; border-radius: 0.25rem;">

<!-- Button with clear boundary -->
<button style="background: #2563eb; color: white; padding: 0.5rem 1rem; border: none; border-radius: 0.25rem;">
  Submit
</button>

The input has a visible border with 5.03:1 contrast. The button has a solid background color with strong contrast against the white page background.

✗ Bad Example

<!-- Input with faint border: #e5e7eb on #ffffff = 1.13:1 -->
<input type="text" style="border: 1px solid #e5e7eb; padding: 0.5rem;">

<!-- Ghost button barely visible -->
<button style="background: transparent; color: #d1d5db; border: 1px solid #e5e7eb;">
  Submit
</button>

The input border has only 1.13:1 contrast — nearly invisible. The ghost button has extremely low contrast for both its border and text.