Focus Indicator Tester
Enter a focus color, backgrounds, and outline thickness to measure contrast locally and try the example with Tab.
A QUICK WALKTHROUGH
How to use this tool
- Enter valid #RGB or #RRGGBB colors and an outline thickness in pixels.
- Review the two contrast measurements and the live component preview.
- Press Tab to focus the example and confirm how the indicator appears in this page.
Two background measurements
The tool calculates WCAG relative-luminance contrast ratios between the indicator and the component background, and between the indicator and the adjacent background. These are contrast measurements, not a pass/fail or compliance conclusion.
Try the real keyboard state
The sample is a native button that can receive focus with Tab. The preview shows how this page’s CSS draws the outline; only real keyboard operation can confirm that a target page’s focus indicator actually appears.
A focused check
This browser-only tool does not evaluate complete accessibility, target size, focus order, semantics, motion, or other interaction requirements. No values are uploaded or saved.
GOOD TO KNOW
Common questions
What do the ratios measure?
They compare the focus indicator color with the component background and the adjacent background using WCAG relative luminance.
Does a ratio mean my interface is compliant?
No. The result is a contrast measurement only. This tool does not evaluate complete accessibility or make a pass/fail or compliance determination.
How can I test the preview?
Use Tab or another real keyboard action to move focus to the sample button and observe the outline.
Are my colors uploaded?
No. Parsing, measurement, and preview styling happen locally in your browser.