1.4.11: Non-text Contrast

What it means

User interface parts and meaningful graphics need at least 3:1 contrast against adjacent colours. This covers icons, button borders, form outlines, and chart segments — not body text (that is 1.4.3).

People with low vision must see controls and key shapes, not only read nearby text.

How to fix it

• Check contrast of icon strokes, focus rings, and input borders against their background.
• Ensure selected tabs, checkmarks, and chart slices meet 3:1 against surrounding colours.
• Do not rely on very pale grey outlines on white for essential controls.
• Test inactive and active states — both may need sufficient contrast when meaningful.

Quick examples

• Good: A grey input border is dark enough to reach 3:1 against the white field background.
• Bad: Light grey icons on white are nearly invisible and fail non-text contrast.
• Good: Focus rings use a solid colour that contrasts with both page and component.
• Bad: Chart slices differ only by pastel shades that fail 3:1 against each other.