Level AASince WCAG 2.1

1.4.11 Non-text Contrast

Guideline 1.4: Distinguishable – Content is easy to see and hear: contrast, size, spacing.

What does the rule require?

Controls and important graphics need contrast too: at least 3:1 for input borders, icons, focus rings and chart lines.

How to get it right

Give inputs a clearly visible border (for example #6b6b85 on white) instead of a barely visible light grey.

Go to the interactive demo

Who benefits most?

Official wording

This page explains the rule in simple words. Only the original W3C text is normative.