Web accessibility checkers, checklists and references

Esc

Focus Indicator Checker

Enter the focus ring color, thickness and component size to check its contrast and area against WCAG, then copy the CSS.

Open on Accessible Web Kit

Embed

Embed this tool

Copy this code into your website, blog or class page. The tool runs inside your page.

Please keep the credit link below the tool.

A focus indicator is the visible mark, usually an outline or ring, that shows which control has keyboard focus, such as after you press Tab. This free Focus Indicator Checker tests whether your indicator is visible enough by checking its color contrast and its size against WCAG rules. You enter your colors and component size, and the tool returns a verdict. It also shows an area comparison, a contrast table, a live preview of the focused component, and a CSS snippet you can copy. Everything runs in your browser, so nothing you enter is uploaded. Use it while you design buttons, links, or form fields, before you write the final code.
Focus indicator example

How to use the Focus Indicator Checker

  1. Enter the Focus indicator color. You can use hex, rgb(), hsl(), or a CSS color name.
  2. Enter the Page background color.
  3. Enter the Component color (the button or field fill).
  4. Enter the Component width and height in CSS px. The defaults are 120 by 40 px.
  5. Choose where the indicator is drawn: outside as an outline, or inside as an inset border or shadow.
  6. Enter the Indicator thickness in CSS px.
  7. If the indicator is outside, enter the Gap between the component and the outline in CSS px.
  8. Read the verdict, then compare the indicator area with the 2 px perimeter area.
  9. Check the contrast table. Every row needs at least 3:1 to pass.
  10. Test the result with the keyboard on your real page too: the tool cannot see clipping or overlays.
  11. Review the preview, then press Copy CSS to copy the snippet. Press Reset to restore the defaults.

Every field updates the result as you type, so there is no Check button. The page address keeps your settings, so a bookmarked or copied link reopens with the same values. The checker reads only the numbers you enter, so after you add the CSS to your site, press the Tab key to confirm the ring is visible.

What is a focus indicator

A focus indicator is the visible mark that shows which control has keyboard focus. When someone presses Tab, the browser moves focus to the next link, button, or field, and the indicator tells them where they are. WCAG 2.4.7 Focus Visible (Level AA) requires that this indicator is visible. Without one, keyboard users cannot see where they are on the page.

Size is measured by area, not by a fixed thickness, because a larger component has a longer edge and so needs more indicator area to meet the rule. The area of a 2 px thick perimeter of a w by h box is 4(w + h) − 16. For a 100 by 40 px button, that is 544 px². An outline 2 px thick with no gap covers 576 px² and passes. A 1 px outline covers 284 px² and fails. A 2 px outline with a 2 px gap covers 608 px² and passes. An inset band 2 px thick covers exactly 544 px² and also passes. WCAG 2.2 criterion 2.4.13 Focus Appearance (Level AAA) uses this area test, and it also requires 3:1 contrast between the focused and unfocused states.

What contrast does a focus indicator need

The indicator needs at least 3:1 contrast against the colors it sits next to. WCAG 1.4.11 Non-text Contrast (AA) sets this rule for a visual indicator that identifies a component state. The tool checks the indicator against the pixels it replaces in the unfocused state. For an outline drawn outside, that is the page background. For an inset indicator, it is the component color. An outside outline with no gap is also checked against the component color, and an inset indicator is also checked against the page background.

Translucent colors are flattened over the page background before the ratio is computed. Ratios are cut to two decimals, not rounded. A black ring on white is 21:1. #949494 on white is 3.03:1 and passes. #aaaaaa on white is 2.32:1 and fails.

Frequently asked questions

What is a focus indicator?

It is the visible outline or ring that marks the control with keyboard focus, usually after you press Tab. WCAG 2.4.7 Focus Visible (Level AA) requires that it can be seen.

How thick should a focus indicator be?

WCAG 2.2 does not set a single thickness. It uses an area test: the indicator must cover at least the area of a 2 px thick perimeter of the component. For a 100 by 40 px button, that is 544 px², so a 2 px outline with no gap passes and a 1 px outline fails.

What contrast does a focus indicator need?

It needs at least 3:1 against the adjacent colors. For an outside outline, that is usually the page background. For an inset indicator, it is the component color.

What is WCAG 2.4.13 Focus Appearance?

It is a WCAG 2.2 criterion at Level AAA. It requires the indicator’s area to be at least that of a 2 px thick perimeter of the unfocused component, and it requires 3:1 contrast between the focused and unfocused states on the pixels that change.

Does the tool read my CSS file?

No. It checks only the numbers you enter. A ring that is clipped by overflow:hidden or hidden behind a sticky header still needs a Tab-key test on the live page.

Is my data uploaded anywhere?

No. Everything runs in your browser, and nothing you enter is uploaded.