Contrast checker test

Tab to each element and press NVDA+Shift+C to check its focus indicator contrast.

Text contrast (press NVDA+F on focused text)

Move the NVDA cursor onto any of the text below and press NVDA+F to hear formatting information, including the contrast ratio between the foreground and background colors. This is a manual action, not automatic.

#999999 on #ffffff — ~2.85:1, fails 3:1

This text fails the 3:1 minimum requirement. The foreground color #999999 on the background #ffffff gives a contrast ratio of approximately 2.85:1.

#595959 on #ffffff — ~7.0:1, passes AA and AAA

This text passes both WCAG AA (4.5:1) and AAA (7:1). The foreground color #595959 on the background #ffffff gives a contrast ratio of approximately 7.0:1.

Controlled ring contrast (white background)

Outline #b0b0b0 — ~2.2:1, fails 3:1

Outline #888888 — ~3.5:1, above 3:1 but fails 4.5:1

Outline #000000 — 21:1, passes 7:1

Missing or invisible focus indicator

No custom CSS — browser default ring, result varies by browser/OS

outline:none, no replacement — antipattern, script should find no ring

Focus only changes background color — no external ring to detect

box-shadow as focus ring

box-shadow 0 0 0 3px #000 — external spread, same visual as outline, expected ~21:1

box-shadow 0 0 0 3px #b0b0b0 — external spread, expected ~2.2:1

box-shadow inset — ring is inside the element, script samples outside, won't detect

Outline offset

outline-offset 2px — ring at ~3px out, within the 1–4px scan range

outline-offset 4px — ring starts at ~5px, at the edge of scan range

outline-offset 12px — ring at 12px+, beyond the 4px scan range entirely

Non-white backgrounds

White ring on dark bg (#1a1a1a) — expected ~17:1

Ring #555555 on dark bg (#1a1a1a) — expected ~2.3:1, fails 3:1

White ring on blue bg (#1e40af) — expected high contrast

Black ring on gradient bg — result depends on position along gradient

Element types

Link

A link element

Text input

Checkbox

Select

Textarea

div with tabindex="0"

Custom focusable div

Size edge cases

Very small element (32x32px icon button)

Full-width element