Skip to content

Learn

1.4.11 Non-text Contrast

Parts of controls, focus indicators and meaningful graphics have a contrast ratio of at least 3:1 with the colors next to them.

Level AA

What the automated checks look for

Controls' focus outlines are too faint

The focus outline is too faint against the color behind it, so keyboard users can lose sight of where they are.

Who it affects. People with low vision who use a keyboard can't make out which control has focus.

How to fix it. Give the focus outline a color with at least 3:1 contrast against the background it is drawn on.

<style>a:focus-visible { outline: 2px solid #1a4fd6; outline-offset: 2px; }</style>

Read more