How to sample an accessible focus-ring color

A focus ring can look clear on one button and disappear against another surface. If you are choosing a color for a website or app, check the actual ring against the colors around it, not just against a blank color swatch.

The Color Picker samples a color from anywhere on your screen and gives you its HEX, RGB, and HSL values. Use it to capture the ring and nearby colors, then check the contrast and visibility in each state where the ring will appear.

Sample the focus ring

1. Open the Color Picker in Chrome or Edge on a computer. The full screen color picker works in those browsers. Other browsers may offer a reduced version or no screen picking.
2. Show the focused control in your design, prototype, or running website. Use keyboard navigation, such as Tab, to display the focus state if needed.
3. Use the tool's color-from-screen picker and select a flat part of the ring. Avoid its blurred or antialiased edge, where neighboring pixels can mix into the sample.
4. Note the ring's HEX value. Repeat the sample on each different background where the ring appears, such as a white card, a gray page, and a dark panel.
5. Sample the color immediately outside the ring as well. If the ring touches a control border, sample that border too. These nearby colors help you judge whether the ring stands out.

If the ring is thin, zoom in on the interface before sampling. A very narrow outline may be only a few pixels wide, so it is easy to select a blended edge instead of the solid center.

What the samples tell you

The ring is a flat, solid color

A HEX or RGB value gives you a useful starting point for measuring contrast. Check the ring against the adjacent surface and any control border that touches it. A color that contrasts well with the page may still blend into a button border.

The sampled value changes around the ring

The outline may be translucent, have a gradient, or be blended with the background. The value you sample is the color as it appears on screen, not necessarily the original design token. Check the ring on every background where it will be used, and consider making it opaque or adding a second outline color.

The color passes contrast but the ring is hard to see

Contrast is one part of visibility. A one-pixel line can be difficult to notice, especially at a distance or beside a thick control border. Increase the ring's thickness, add space between it and the control, or use a two-color outline so that one edge contrasts with the control and the other with the page.

The ring works on one surface but not another

A single color may not stand out across a design with both light and dark areas. Use a contrasting outline or shadow, or choose separate focus styles for different surface themes. Retest the rendered result rather than assuming a color token will look identical everywhere.

How to improve a focus ring that blends in

1. Check every adjacent color. Compare the ring with the page, the control, and any border or selected-state color it touches. Do this for light and dark themes and for disabled or selected controls if they can receive focus.
2. Measure contrast between the rendered colors. Enter the sampled ring and adjacent colors into a contrast checker in your design or accessibility workflow. For WCAG 2.2's Focus Appearance criterion, the indicator needs at least a 3:1 contrast ratio against adjacent colors, along with a minimum indicator area. A contrast value alone does not establish that the whole criterion is met.
3. Make the indicator easier to see. Increase its thickness, add space between the ring and the control, or add a second contrasting outline. Then sample the updated version on every relevant background.
4. Check the actual keyboard state. Move through the interface with Tab and Shift + Tab. Confirm that focus is visible on links, buttons, fields, and other controls, and that it does not get hidden behind another element.
5. Test at normal size. Zooming in helps you sample accurately, but zoom back out to the size people will use. Check the ring on a real display and in the interface's normal light or dark theme.

Choose a color that works across the interface

Start with the colors used by your design system, but do not assume that a brand accent is automatically suitable for focus. A saturated blue may stand out on a white page and blend into a blue button. A white ring can work on a dark control but disappear on a pale card.

One robust approach is a two-color ring: a light outer edge and a dark inner edge, or the reverse. This can preserve a visible boundary across varied surfaces. Check the contrast of each edge against the color beside it, and make sure the outline is thick enough to see.

WCAG's Focus Appearance guidance covers both contrast and indicator size. Sampling colors is a practical way to gather the values, but it does not assess the ring's area, whether it is obscured, or whether every keyboard-focusable control has an indicator.

You can sample a color directly from what is displayed on your screen, without uploading a screenshot.