Focus Indicator Contrast Checker

Focus Indicator Contrast Checker measures the color of a focus ring against the surface behind it and judges the pairing at 3 to 1.

What is Focus Indicator Contrast Checker?

Focus Indicator Contrast Checker measures a focus ring against the surface it will appear on and reports the ratio to two decimal places, judged at 3 to 1. The sample draws the ring the way it is usually built, as a 2px outline in the indicator color around a control whose label uses that same color, so you can see the indicator and its surface together rather than as two swatches.

The check matters because keyboard focus is the one piece of interface state that some users cannot work without. Someone navigating by keyboard has no pointer to tell them where they are, so a focus ring that disappears against a background is not a cosmetic problem. The requirement it is measured against sits alongside the non-text contrast rule, which treats the indicator as part of the interface rather than as decoration.

Three things have to hold for a focus indicator to be genuinely visible, and this page only measures the first:

• The ring color against its surrounding surface, which is the 3 to 1 pairing this tool evaluates.
• The ring against the component it surrounds, which is a different pair and is not measured here.
• The ring's area or thickness, since a thin indicator can be lost even when the colors separate well.

The ratio comes from the standard WCAG 2.x calculation: both colors are converted to sRGB, their channels are linearised, and the linear values are weighted 0.2126 red, 0.7152 green and 0.0722 blue into a relative luminance. The lighter luminance plus 0.05 is divided by the darker plus 0.05, rounded to two decimals before comparison.

The limits here are practical rather than mathematical.

• Only the ring against the background is measured. The ring against the component it wraps is a second pairing that the tool does not evaluate.
• Thickness and area are not inputs, so a passing pair does not guarantee the indicator will be noticed.
• One surface is measured at a time, but a control can sit on a card, on the page background and on a sticky header, and each is its own surface.
• The tool cannot see whether something else overlaps the ring, which is a common cause of invisible focus in real pages.
• No alpha and no third surface behind the pair.

Check the ring against every surface a control can land on, including the hover state of the row behind it, and against the component's own fill for the second pairing. If a single ring color cannot clear 3 to 1 everywhere, a common answer is to pair the ring with a contrasting outline offset so it carries its own background rather than relying on whatever is behind it.

A useful habit is to treat 3 to 1 focus contrast as a floor rather than a goal, and to test keyboard focus visibility on the surfaces where a ring is most likely to be crowded out: table rows, selected list items and the primary action of a dialog. Those are the places where the indicator is drawn next to a colored fill rather than a neutral page, and they are where a ring that passes a focus ring contrast measurement in isolation still ends up hard to see. If one indicator has to work everywhere, give it a contrasting halo so it carries its own separation instead of borrowing it from whatever sits behind.

How to use Focus Indicator Contrast Checker

1. Set the focus ring color in the first field, which is labelled Indicator.
2. Set the surface the control sits on in the second field.
3. Read the ratio at the top of the second panel, to two decimal places.
4. Check the Pass or Fail line against the 3 to 1 threshold, and read the sample to see the ring drawn as a 2px outline around a focused control.

When to use Focus Indicator Contrast Checker vs related tools

Use the focus indicator contrast checker for the ring that appears when a control is reached by keyboard, especially on controls that sit on more than one surface. The component's own boundary belongs with the UI component contrast checker, label legibility inside the control belongs with the WCAG 2.1 AA checker, and a whole interface where several indicators share one color is quicker to review with the palette accessibility checker.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Focus Indicator Contrast Checker