Get Started
Interactive tool

Build focus states keyboard users can actually see

Focus Ring Architect lets you adjust outline colour, width, and offset for focus-visible states and checks the result against contrast thresholds, so you can see whether a keyboard user would actually spot it.

How-To Guide

Building a focus ring that survives contact with real browsers

Focus Ring Architect builds the CSS for a focus indicator that stays visible against whatever background it lands on. This guide is for anyone shipping components who has watched a keyboard user lose track of where they are on a page. The contrast ratio it reports is only as good as the background colour you feed it, so it's worth checking the result against the real page before you rely on it.

Level: Intermediate
Best for: Front-end and product designers who own component states
Focus Ring Architect interface showing a button with a generated focus outline and its contrast ratio

  1. Set the element states

    Note which interactive elements, buttons, links, form fields, need a visible ring and what background colour sits behind each one.

  2. Shape the ring

    Adjust the ring's colour, thickness and offset until it stays clear of the element's edge on every background you're testing against.

  3. Check the contrast and copy the CSS

    Read the contrast result against the background it will actually sit on, then copy the outline or box-shadow rule into your stylesheet.

Focus Ring Architect

Build a two layer focus ring: a transparent outline that keeps a focus indicator visible in Windows High Contrast Mode, plus a box shadow ring on top. Set the gap colour to match whatever surface the element actually sits on, then tab to the two preview buttons below to see the real result.

Ring settings
3px
3px
6px

Generated CSS

Try it: tab to these buttons

Each preview injects its own surface colour as the gap, so both are honestly correct: the light panel uses the light surface colour, the dark panel uses the dark surface colour.

Light surface

Dark surface

Free Tools

See your focus ring the way a keyboard user will, before you ship it.

Focus Ring Architect lets you set outline colour, width, offset and shape together, then check the result against your own background. It's built for anyone shipping a keyboard-navigable interface, from a single button to a full design system. The preview shows you what the ring will look like, not whether it meets a specific accessibility standard, so it's worth checking the numbers against your own criteria before you rely on them.

No sign-up, works on any device, always free.

Popular Tools

CSS Variable Architect

An interactive CSS Variable Architect, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.

Tools / CSS Variable Architect

True-Contrast Smart Palette

An interactive True-Contrast Smart Palette, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.

Tools / True-Contrast Smart Palette

CSS Unit Converter (px / rem / em / vw / vh)

An interactive CSS Unit Converter (px / rem / em / vw / vh), free to run in the browser. The companion guide sets out the method behind it, so you can check the working.

Tools / CSS Unit Converter (px / rem / em / vw / vh)

Aspect Ratio Calculator

An interactive Aspect Ratio Calculator, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.

Tools / Aspect Ratio Calculator

CSS Grid Architect

An interactive CSS Grid Architect, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.

Tools / CSS Grid Architect

CSS Specificity Calculator

An interactive CSS Specificity Calculator, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.

Tools / CSS Specificity Calculator