Focus Ring Generator
Generate a focus indicator that meets the contrast and thickness requirements, works on light and dark backgrounds, and appears only for keyboard users through focus-visible.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
Removing the outline breaks the page for keyboard users
The default focus ring is often called ugly, and the standard response of setting outline to none removes the only indication of where the keyboard is. For anyone navigating without a mouse, through preference, injury or assistive technology, that turns the interface into something they cannot use: they can still move focus, but nothing tells them where it went. Replacing the ring with something better is legitimate; removing it and putting nothing back is not.
What the requirements actually specify
A focus indicator must have a contrast ratio of at least 3:1 against the adjacent colours, and must be at least as large as a two pixel perimeter of the focused control. An indicator that only changes the background colour slightly, or one that is a thin light line on a light surface, fails both. The requirement is measurable, which means it can be checked here rather than argued about.
focus-visible is the property that solves the disagreement
The reason designers dislike focus rings is usually that they appear on mouse clicks, where they look like a stuck state. The focus-visible pseudo-class applies only when the browser judges a visible indicator to be appropriate, which in practice means keyboard navigation and not mouse clicks. Styling focus-visible rather than focus gives keyboard users their indicator and stops the ring appearing on click, which was the actual complaint all along.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Why not just set outline to none?
Because it removes the only indication of where keyboard focus is. Anyone navigating without a mouse can still move focus and has nothing telling them where it went. Replacing the ring is fine; removing it is not.
What contrast does a focus ring need?
At least 3:1 against the adjacent colours, and the indicator must be at least as large as a two pixel perimeter of the control. A thin light line on a light background fails both, and both are measurable rather than matters of opinion.
What is focus-visible for?
It applies only when the browser judges a visible indicator appropriate, which is keyboard navigation rather than mouse clicks. Styling it instead of focus resolves the actual complaint, which was that rings appeared on click and looked like a stuck state.
Why use outline rather than a border or box-shadow?
Because outline does not affect layout, follows the element shape including border-radius in current browsers, and remains visible in forced colours mode where box-shadow is discarded entirely.
How do I make a ring work on both light and dark backgrounds?
Use two rings: an inner one in the surface colour and an outer one in the accent, so one of them always contrasts. That pattern survives being placed on any background, which a single colour cannot.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Choose your colours and style to generate a focus indicator that passes the requirements.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.