Lab 1

Focus Lab

Design a focus ring. Then watch it on twelve backgrounds at once. A ring that only works on white is a ring that fails for half the web.

Before you start

Press the Tab key right now. The outline that appears around the next link is the focus ring. For anyone who navigates by keyboard, switch, or voice, that ring is the cursor. Lose it and they are lost.

The lab below starts with this site's own ring: one blue outline, three pixels wide. It fails on eight of the twelve backgrounds. Your job is to make it pass on all twelve, then take the CSS with you.

The lab

Change a control and every cell updates. Each cell shows the sample button with your ring forced on, the background name, and the contrast ratio between your ring and that background. Tab into a cell to see the ring the way the browser would really draw it.

What you just learned

One color can only match half the world. A dark ring vanishes on dark backgrounds, a light ring on light ones. The fix is two tones: one light, one dark, so one of them always has contrast.
3:1 is the floor, not the goal. WCAG 2.2 asks for 3:1 between a focus indicator and the colors next to it. Rings that clear 4:1 or 5:1 on every background are easier to spot in sunlight and at a glance.
A gap helps. Offsetting the ring from the element edge keeps it from blending into borders and gives the eye a clean shape to find.
Use :focus-visible, not :focus. The generated CSS shows the ring for keyboard users and hides it after a mouse click, which is what each of those users expects.
Never outline: none without a replacement. The generated rule removes the default outline only when it puts a box-shadow ring in its place.

Read the companion note

The focus ring is the interface explains the five properties of a great ring and why most rings fail. Why your focus ring vanishes in dark mode covers the arithmetic behind the failing cells.

Why the busy pattern is in the grid

Buttons land on photos, charts, and striped tables. A ring has to survive there too. The busy cell checks your ring against every color in the pattern, because the ring can land on any of them.

Proud of your ring?

Send the CSS and the score through the form. The best rings go in the gallery with credit.

Submit to the gallery