Level AAPerceivable1.4.11

WCAG 1.4.11: Non-text Contrast

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

ADA Relevance: Level AA is the standard courts reference for ADA compliance. Failing this criterion creates direct legal exposure for ADA lawsuits.

Why Non-text Contrast Matters

Form field borders, icons, chart elements, and other graphical elements must be visible to users with low vision.

How to Test for WCAG 1.4.11 Violations

Check contrast ratios for form field borders, buttons, icons, focus indicators, and chart/graph elements against their backgrounds.

How to Fix WCAG 1.4.11 Violations

Ensure borders, icons, and interactive elements have at least 3:1 contrast against adjacent colors. Darken borders on inputs, increase icon contrast, add visible focus styles.

Industries Most Affected by Non-text Contrast Violations

These industries commonly fail WCAG 1.4.11 due to the nature of their website content and functionality:

Non-text Contrast by Platform

Different platforms have different levels of built-in support for WCAG 1.4.11:

WCAG 1.4.11 FAQ

What does WCAG 1.4.11 Non-text Contrast require?

WCAG 1.4.11 requires that uI components and graphical objects have a contrast ratio of at least 3:1 against adjacent colors. This is a Level AA criterion under the Perceivable principle, meaning it is required for ADA compliance (courts reference WCAG 2.1 AA).

How do I test for WCAG 1.4.11 violations?

Check contrast ratios for form field borders, buttons, icons, focus indicators, and chart/graph elements against their backgrounds.

Is WCAG 1.4.11 required for ADA compliance?

Yes. WCAG 1.4.11 is a Level AA criterion, and courts consistently reference WCAG 2.1 AA as the standard for ADA compliance. Failing to meet this criterion creates legal exposure for ADA lawsuits, which typically settle for $10,000 to $75,000+.

What happens if my website fails WCAG 1.4.11?

Failing WCAG 1.4.11 Non-text Contrast means form field borders, icons, chart elements, and other graphical elements must be visible to users with low vision. This violation is detectable by automated scanning tools that ADA plaintiff attorneys use to identify lawsuit targets. ADA CodeFix can scan your site for this specific violation and provide AI-generated code fixes.

Test Your Site for WCAG 1.4.11 Violations

ADA CodeFix automatically scans for Non-text Contrast violations and provides AI-generated code fixes — not overlay widgets.

Scan Your Site Free
50+ WCAG rules AI code fixes No credit card