RatedWithAI

RatedWithAI

Accessibility scanner

Free Scan

WCAG 2.1

1.4.11 Non-text Contrast

Level AA success criterion

User interface components and graphical objects must have sufficient contrast.

Why it matters

Low-contrast focus rings, borders, and icons are hard to see for low-vision users.

Common violations

  • Focus outlines that blend into the background
  • Icon-only buttons with low contrast
  • Thin borders on form inputs

Code examples

Bad

<button class="border border-slate-600 text-slate-600">Save</button>

Good

<button class="border border-slate-200 text-white">Save</button>

How to fix

Increase contrast for UI elements and ensure focus indicators are clearly visible.

Related criteria

1.4.3 Contrast (Minimum)2.4.3 Focus Order2.1.1 Keyboard

Related resources

Google accessibility scoreYouTube accessibility scoreSpotify accessibility scoreWordPress accessibility guideShopify accessibility guideSquarespace accessibility guide

Test & fix this criterion

Use these free tools and guides to check and fix 1.4.11 Non-text Contrast violations:

Free accessibility checker — find WCAG violations automaticallyColor contrast checker — test contrast ratiosHow to fix common WCAG failuresTop 10 most common WCAG failures

Scan your site

Check your WCAG coverage in minutes

Start a free scan