What the focus indicator contrast checker tests
The focus indicator contrast checker verifies that your keyboard focus ring meets the visibility rules introduced in WCAG 2.2 Success Criterion Focus Appearance. It compares the focused and unfocused pixels of a control, measures the contrast ratio against the adjacent background, and confirms the indicator is thick enough to be counted as visible — so you can ship interactive UI that keyboard users can actually see.
Per the W3C, when the keyboard focus indicator is visible, an area of the focus indicator must be at least as large as the area of a 2 CSS pixel thick perimeter of the unfocused component, and have a contrast ratio of at least 3:1 between the focused and unfocused states. This tool checks both halves of that rule in one pass.
Why a dedicated focus ring contrast ratio tool matters
Generic contrast tools only score foreground text against background. Focus rings are different: Focus Visible requires that a visible focus indicator exists while a component has keyboard focus, Focus Appearance defines a minimum level of visibility, and Non-text Contrast requires sufficient contrast for the focus indicator itself. A specialised checker models all three at once.
It also catches common mistakes that slip past visual review. Browser default focus styles often fail WCAG 2.4.11 requirements — Chrome's default blue outline is typically sufficient, but Firefox and Safari defaults may be too thin or low-contrast, so custom focus styles are recommended for consistent compliance. If you only test in one browser, you will miss real failures.
What "passes" looks like
- A solid outline of at least 2 CSS pixels around the component, or a 1 CSS pixel perimeter that still covers the minimum area.
- A 3:1 contrast ratio between the focused pixels and the same pixels in the unfocused state.
- A 3:1 contrast ratio between the indicator and the adjacent background, so it does not blend into the page.
The simplest way to meet this SC is to use solid outlines for focus indication — an outline style of 2px solid is sufficient, while dotted or dashed outlines only render half the area of a solid outline, so the minimum width would have to be 4px.
Pairing focus checks with the rest of your color workflow
Focus styles never live in isolation. Use the Contrast Checker to validate body text and icon contrast on the same surface, then run pairings through the Palette Accessibility Matrix to confirm every foreground/background combination in your design system clears WCAG AA. For richer scoring that combines WCAG 2 with APCA, the Color Legibility Analyzer is the next step. When you are ready to lock in tokens, push the values into a CSS Theme Builder so focus colors stay consistent across light and dark modes.
Example: a compliant focus style
.button:focus-visible {
outline: 2px solid #1d4ed8;
outline-offset: 2px;
}Drop the colors into the checker, vary the background, and you will see exactly where a 2 px ring stops being legible — for example, on dark hero sections or photographic backgrounds. For the full spec, see the W3C Understanding Focus Appearance document and the MDN :focus-visible reference.