Focus Indicator Tester
Test your custom focus-visible outlines against WCAG 2.4.11 and 2.4.13 Focus Appearance requirements. Adjust outline width, offset, colour, and border radius with interactive sliders and see a live preview on a sample button, input, or link. Instantly see whether your focus indicator passes AA and AAA area and contrast requirements - with actionable feedback and a ready-to-use CSS :focus-visible rule to copy. Fully private, 100% free, and no signup required.
Element Presets
Outline Settings
Colours
Live Preview
CSS for focus-visible
/* WCAG-compliant focus-visible style */
:focus-visible {
outline: 3px solid #6366F1;
outline-offset: 2px;
border-radius: 6px;
}Why Use Our Focus Indicator Tester?
Real-Time WCAG Compliance Check
The focus indicator tester evaluates your custom focus-visible styles against WCAG 2.4.11 AA and 2.4.13 AAA requirements in real time. Adjust outline width, offset, and colour sliders and see instant pass/fail results for both area and contrast criteria.
Live Preview with Element Presets
See your focus indicator rendered on a real interactive element - choose from 10 preset element backgrounds including buttons, inputs, and links. The live preview updates as you adjust width, offset, colour, border radius, and element type.
100% Private - No Upload
All WCAG compliance calculations happen locally in your browser. Your colour and design values never leave your device and are never sent to any server - safe for client projects and proprietary design systems.
Free & No Limits
Test unlimited focus indicator configurations with no signup, no subscription, and no usage caps. The focus indicator tester is completely free forever with no ads blocking the interface.
Common Use Cases for Focus Indicator Tester
CSS Development & QA
Front-end developers use the focus indicator tester to validate custom focus-visible styles during development. Test different outline colours, widths, and offsets against your component backgrounds to ensure every interactive element meets WCAG focus appearance requirements before shipping.
Accessibility Audits
Accessibility specialists use the focus indicator tester during WCAG compliance audits to check focus indicators against 2.4.11 and 2.4.13 criteria. The clear pass/fail results and detailed breakdown of area and contrast requirements simplify the audit process.
Design-to-Development Handoff
Designers use the focus indicator tester to verify that custom focus styles in design mockups will pass WCAG requirements before handing off to developers. Test focus colours against the actual component backgrounds used in the design system.
Cross-Platform Focus Styling
Mobile and cross-platform developers use the focus indicator tester to validate focus indicators across different platforms. Test how focus outlines appear on various background colours and element types to ensure consistent accessibility across web, React Native, and Flutter.
Enterprise Accessibility Compliance
Enterprise development teams use the focus indicator tester to enforce focus indicator standards across large codebases. The tool helps maintain consistent, WCAG-compliant focus styles by validating that every custom focus-visible rule meets both AA and AAA requirements.
WCAG Certification Preparation
Teams preparing for WCAG certification use the focus indicator tester to systematically verify focus indicator compliance. The real-time feedback and CSS export make it easy to fix issues and generate compliant focus styles for certification documentation.
Understanding Focus Indicator Testing
What is Focus Indicator Testing?
Focus indicator testing evaluates whether a custom focus-visible outline meets the WCAG (Web Content Accessibility Guidelines) requirements for Focus Appearance. WCAG 2.4.11 (Level AA) requires that focus indicators be at least as large as a 2px thick border around the element and have a contrast ratio of at least 3:1 against the adjacent background. WCAG 2.4.13 (Level AAA) raises the area requirement to the equivalent of a 4px thick border. Our focus indicator tester checks both requirements in real time as you adjust the outline settings.
How Our Focus Indicator Tester Works
- Configure your focus style: Set the outline width (0-10px), offset (0-10px), colour, and border radius using the sliders and colour pickers. Choose an element type (button, input, link, checkbox, or custom) and pick from 10 element background presets or enter custom HEX values for the element background and text.
- Live preview updates instantly: A sample element renders with your focus-visible style applied, showing exactly how the focus indicator will appear in the browser. The background and text colours match your settings for an accurate visual representation.
- WCAG results display: The focus indicator tester calculates the outline area and contrast ratio between the focus colour and the element background. Clear pass/fail badges for WCAG AA, WCAG AAA, contrast ratio, and area requirements provide immediate feedback on compliance.
- Copy compliant CSS: Once you have a passing configuration, copy the generated focus-visible CSS rule to use directly in your project stylesheets.
WCAG Focus Appearance Requirements Explained
- Area requirement (2.4.11 AA - Minimum): The focus indicator must be at least as large as the area of a 2px thick border around the element. This ensures the focus indicator is visually prominent enough to be easily located by keyboard users. Our focus indicator tester calculates the approximate perimeter of the element and multiplies it by the outline width to determine the indicator area.
- Area requirement (2.4.13 AAA - Enhanced): For Level AAA compliance, the focus indicator must be at least as large as a 4px thick border. This provides a more prominent focus indication for users with visual impairments or those relying solely on keyboard navigation.
- Contrast requirement (both AA and AAA): The focus indicator must have a contrast ratio of at least 3:1 between its pixels and the adjacent non-focus-indicator colours. This ensures the focus indicator is visually distinguishable from the element it surrounds. The contrast ratio is calculated using the WCAG relative luminance formula based on the sRGB colour space.
Privacy, Security & Availability
100% client-side processing: Our focus indicator tester runs entirely in your browser using JavaScript. No colour values, design settings, or test results are ever uploaded, stored, or transmitted to any server. This makes it safe for sensitive client projects and proprietary design systems.
No signup or limits: The focus indicator tester is completely free with no account required, no usage caps, and no premium features. Test unlimited focus indicator configurations instantly without any restrictions.
Related Accessibility Tools
Color Contrast Checker
Calculate WCAG 2.1 contrast ratio and check AA/AAA compliance for normal text, large text, and UI components with live preview.
Text on Background Checker
Test how readable text is on any background colour. Adjust font weight and size. Shows pass/fail for AA/AAA with precise contrast ratio.
WCAG Compliance Report
Enter a full colour palette and get a complete WCAG compliance report showing which colour combinations pass or fail for accessibility.
Color Picker & Converter
Visual colour picker with HEX ↔ RGB ↔ HSL ↔ HSV ↔ CMYK ↔ HWB ↔ CIE LAB conversion and built-in WCAG contrast checker.
Frequently Asked Questions About Focus Indicator Tester
A focus indicator tester is a tool that evaluates custom focus-visible CSS styles against WCAG Focus Appearance requirements. It checks two criteria: the outline area (at least as large as a 2px border for AA, 4px for AAA) and the contrast ratio (at least 3:1 between the focus colour and the adjacent background). Our focus indicator tester provides real-time pass/fail results as you adjust the outline settings.
The focus indicator tester checks WCAG 2.4.11 Focus Appearance (Level AA, minimum) and WCAG 2.4.13 Focus Appearance (Level AAA, enhanced). Both require a contrast ratio of at least 3:1 between the focus indicator and the adjacent background. The area requirement is at least 2px equivalent border width for AA and 4px for AAA.
The area is calculated by taking the approximate perimeter of the element (based on a standard 120×40px rounded rectangle) and multiplying it by the outline width. This gives an estimate of the total focus indicator area. The minimum area required for AA is the perimeter multiplied by 2px, and for AAA it is the perimeter multiplied by 4px.
WCAG requires a minimum contrast ratio of 3:1 between the focus indicator colour and the adjacent non-focus-indicator colours (typically the element background). This is the same contrast ratio required for graphical objects. The focus indicator tester calculates this ratio in real time using the WCAG relative luminance formula.
Yes. All WCAG compliance calculations happen 100% client-side in your browser. Your colour values and design settings are never sent to any server, never stored, and never transmitted anywhere. The focus indicator tester is completely private and processes everything locally on your device.
The focus indicator tester generates a CSS :focus-visible rule that you can copy directly into your stylesheets. The rule includes the outline width, outline colour, outline offset, and border radius that you have configured. When the settings pass WCAG requirements, you can use the generated CSS with confidence that it meets accessibility standards.
The focus indicator tester supports five element types: buttons, text inputs, links, checkboxes, and custom block elements. Each type renders with appropriate default styling for a realistic preview. You can also choose from 10 preset element backgrounds or enter custom colours for the element background and text.
Yes. The focus indicator tester is 100% free with no signup required, no premium features, and no usage limits. Test unlimited focus indicator configurations without any restrictions or hidden costs. There are no ads blocking the interface.