Focus Indicator Contrast Checker

Focus indicator contrast checker for WCAG 2.2 keyboard focus

This focus indicator contrast checker tests whether your keyboard focus ring is visible enough under WCAG 2.2. Choose the page, component and ring colors, set the width, style, offset and component size, and compare the unfocused and focused states side by side. The tool then shows pass or fail results and ready-to-copy CSS.

A focus indicator is the visual cue that shows which control currently has keyboard focus. Without it, people who navigate with Tab, Shift+Tab or switch devices cannot tell where they are on the page. 66Colorful is free, runs in the browser and needs no signup.

How to test focus ring contrast step by step

1. Enter the Page background color, the color behind your component. The default is #FFFFFF.
2. Set the Component background and Component text colors for the button, link or field you are testing.
3. Choose the Focus indicator color with the picker or by typing a HEX code.
4. Adjust Indicator width (1 to 8 px), Indicator style (Solid, Dashed, Dotted or Double) and Offset (-8 to 8 px).
5. Enter the component Width (px) and Height (px) so the area check uses your real size.
6. Read the badges and the results table, then press Tab in the live preview to see the ring on a button, link and text input.

Use Share link to copy a URL that restores your settings, or Reset to return to the defaults.

Which WCAG 2.2 success criteria apply to focus indicators?

Several WCAG 2.2 criteria touch keyboard focus, and this tool measures two of them: Non-text Contrast (SC 1.4.11, Level AA) and Focus Appearance (SC 2.4.13, Level AAA). The table shows how they differ.

Read the W3C explanations of Non-text Contrast and Focus Appearance for the full wording. Because 2.4.13 is Level AAA, many teams use it as a quality target rather than a legal requirement. Passing it usually means passing 1.4.11 too.

What does SC 1.4.11 check for a focus ring?

SC 1.4.11 requires the focus indicator to reach 3:1 contrast against the colors next to it. A ring drawn outside the component is judged against the page background. A ring drawn inside is judged against the component background.

The tool follows that logic. A positive offset leaves a gap outside the component, so it compares the ring with the page. A negative offset draws the ring inside, so it compares the ring with the component. If the ring straddles the edge, either side may supply the 3:1.

What does SC 2.4.13 check for a focus ring?

SC 2.4.13 needs an indicator whose area is at least a 2 CSS pixel perimeter around the unfocused component, with pixels that change by at least 3:1 between focused and unfocused states. For a component with width w and height h, the minimum area is 4 × w + 4 × h square pixels. The tool shows this number in the results table.

Focus indicator settings and results you can read

• Side-by-side preview: an Unfocused and a Focused sample on your chosen page background.
• Live keyboard preview: a button, a second button, a link and a text input that show the ring only when you reach them with Tab.
• Two WCAG badges: SC 1.4.11 Non-text Contrast (AA) and SC 2.4.13 Focus Appearance (AAA), each marked Pass or Fail.
• Measured values: indicator contrast against the page and against the component, the minimum area, and the indicator area that reaches 3:1.
• Component text check: the contrast of your component text against its background, compared with the 4.5:1 normal text threshold.
• One-click fixes: a same-hue color suggestion that reaches 3:1, or a wider or solid indicator that reaches the area target.

For text contrast on its own, use the WCAG contrast checker.

Worked example: focus ring contrast and area for a button

With the defaults, a 120 × 44 px button has a minimum indicator area of 4 × 120 + 4 × 44 = 656 px². The default ring is a 2 px solid ring at a 2 px offset in Focus blue on a white page.

Contrast first. #1D4ED8 against #FFFFFF is about 6.7:1, so SC 1.4.11 passes for a ring outside the button. The same ring against the Button blue background is only about 1.47:1, which would fail if the ring were drawn inside the button.

Now area. The ring sits from 2 to 4 px outside the button. The outer rectangle is 128 × 52 = 6,656 px² and the inner one is 124 × 48 = 5,952 px², so the ring covers 704 px². That is above 656 px², so SC 2.4.13 passes too.

Does a dashed or dotted focus ring pass WCAG 2.2?

A dashed or dotted ring can pass, but it must be wider than a solid one because it paints less area. The tool counts a dashed or dotted outline at about 50%, a double outline at about two thirds and a solid outline at 100%.

Try it on the 120 × 44 px button above. A 2 px dashed ring covers only 352 px² of qualifying area, below the 656 px² target. A 4 px dashed ring at the same offset reaches 720 px² and passes. Browsers draw dashes slightly differently, so treat these figures as close approximations.

Focus ring CSS and Tailwind output

The Focus Indicator CSS Code panel writes a :focus-visible rule with your outline width, style, color and outline-offset. Switch to the Tailwind CSS tab for a button class using arbitrary values. Press Copy CSS to copy whichever format is selected.

:focus-visible {
  outline: 2px solid #1D4ED8;
  outline-offset: 2px;
}

MDN explains how :focus-visible shows a ring for keyboard focus while usually hiding it for mouse clicks. The outline-offset property controls the gap between the ring and the component edge.

Common focus indicator mistakes and how to fix them

• Removing the outline with no replacement. Setting outline: none without a visible alternative leaves keyboard users lost.
• Using a ring that matches the button. A blue ring drawn inside a blue button fails because it has no contrast with the adjacent color. Use a positive offset or a lighter or darker ring color.
• Testing only one background. Cards, banners and dark sections change the adjacent color. Test each page background your component can sit on.
• Relying on a thin dotted ring. Thin dotted outlines paint little area. Choose a solid ring of at least 2 px, wider on large components.
• Ignoring component text. A good ring does not fix unreadable labels. Check the text ratio in the results table.

When a ring color fails, build a darker or lighter step of the same hue with the tint and shade scale generator. Then build a color-safe palette so every ring in your system starts from accessible colors.

User agent default focus indicators that you have not restyled are exempt from SC 2.4.13. Once you restyle focus with your own CSS, the criterion applies to your version.

Next step after checking your focus indicator

After your focus ring passes, test the rest of your interface. Run a palette accessibility audit to catch weak color pairs, and use the color blindness simulator to confirm the ring stays visible for people with color vision deficiency.