Skip to content

Focus Indicator CSS Generator

Generate accessible CSS focus indicator styles that meet WCAG 2.2's new focus appearance requirements. Configure outline color, width, offset, and style. The tool checks compliance with WCAG 2.4.11 (Focus Not Obscured) and 2.4.13 (Focus Appearance) and generates copy-ready CSS.

Why This Matters

Visible focus indicators are essential for keyboard navigation. Many developers remove the default browser outline (outline: none) without providing a replacement, making keyboard navigation impossible for users with motor or visual impairments. WCAG 2.2 introduced SC 2.4.11 (Focus Not Obscured, AA) and 2.4.13 (Focus Appearance, AAA) with specific measurable requirements for focus indicator size and contrast.

How to Use This Tool

  1. 1

    Choose a style

    Select from CSS outline, box-shadow, border, background highlight, or a combined approach.

  2. 2

    Configure colors

    Pick an outline color and adjust width and offset to meet WCAG requirements.

  3. 3

    Check compliance

    The tool verifies your configuration against WCAG 2.4.11 and 2.4.13 in real time.

  4. 4

    Copy CSS

    Copy the generated CSS or download it as a .css file for your project.

Frequently Asked Questions

What is WCAG 2.4.11 (Focus Not Obscured)?

New in WCAG 2.2 at Level AA. The keyboard focus indicator must not be entirely hidden by author-created content. The focused component must be at least partially visible when it receives focus.

What is WCAG 2.4.13 (Focus Appearance)?

New in WCAG 2.2 at Level AAA. The focus indicator must have a minimum area of the CSS pixel perimeter of the unfocused component and a contrast ratio of at least 3:1 between focused and unfocused states.

Should I use :focus or :focus-visible?

:focus-visible is recommended. It shows the focus indicator only for keyboard navigation (not mouse clicks), providing a cleaner experience for mouse users while still supporting keyboard users. All modern browsers support it.

Why is box-shadow sometimes better than outline?

If a parent element has overflow:hidden, CSS outlines can be clipped and become invisible. Box-shadow is not affected by overflow and can be a reliable alternative in those cases.

Related Tools

Statement Generator

Generate a compliant accessibility statement for EAA, ADA, and Section 508. Fill in the form, get a ready-to-publish statement.

ARIA Generator

Generate accessible ARIA roles, states, and properties for common UI patterns. Copy-paste ready HTML with proper ARIA markup.

AI Alt Text

Upload an image and generate descriptive alt text using AI. Uses your own OpenAI API key — no server involved.

Skip Links

Generate accessible skip navigation links with HTML, CSS, and React code. Required by WCAG 2.4.1 to let keyboard users bypass repeated navigation.