R

RatedWithAI

WCAG guidance

Scan your site

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

Scan your site

Check your WCAG coverage in minutes

Start a free scan