Skip to main content
Ink·tab

Focus ring 3:1 + live preview

Confirm a keyboard focus ring stays 3:1 against both adjacent colors at once.

Ring vs element5.78:1Need: 3:1 (WCAG 1.4.11)
Ring vs page5.39:1Need: 3:1 (WCAG 2.4.11, new in 2.2)
VerdictPassWorst 5.39:1
Width
Offset
Style
Preview
Button
Input

Covers the automated WCAG 2.4.11 / 1.4.11 portion. Formal KWCAG audits also need real user testing.

When to use it

Adding a new brand color to your design system and need to confirm it holds up as a focus ring (outline) under KWCAG / WCAG, verifying the ring is visible across light and dark themes, or restoring focus styles after a CSS reset and picking a color via :focus-visible.

Two backgrounds, at the same time

A focus ring needs to clear 3:1 against both adjacent backgrounds:

  • The element itself (when outline-offset: 0, or for the inner edge) — the button or input fill that the ring sits next to.
  • The page background (where offset pushes the ring outward) — the page color the outer edge touches.

Checking only one side hides failures on the other. A yellow warning button with a yellow ring may pass against the button but score 1.5:1 against a white page.

WCAG criteria

  • WCAG 2.4.11 — Focus Appearance (new in WCAG 2.2, AA). The focus indicator's color change must be 3:1 against adjacent colors.
  • WCAG 1.4.11 — Non-text Contrast (WCAG 2.1, AA). UI component boundaries and graphic information must be 3:1 against adjacent colors.

KWCAG (Korean Web Content Accessibility Guidelines) 2.2 mirrors the same clauses. This tool measures both at once.

Outline options

  • width 2 / 3 px — thicker reads stronger. 2 px is the recommended default.
  • offset 0 / 2 / 4 px — bigger offsets shift the dominant contrast from element to page. 0 makes element-vs-ring the deciding pair.
  • style solid / double / dashed — solid is safest. Dashed introduces gaps between strokes that weaken the visual effect even if the math passes — verify visually.

Limits of automated measurement

This tool covers the color-arithmetic portion only. Other parts of WCAG 2.4.11 require human review:

  • Focus-indicator area (≥ 1 CSS pixel × length total).
  • The change must not be completely obscured (e.g. an element scrolled behind a sticky header still receives focus).
  • Distinguishability from other adjacent visual elements.

These can't be measured automatically — pair with keyboard-tab / screen-reader / magnifier testing.

Privacy

Brand and focus tokens you paste are not transmitted. Only culori-based color parsing and luminance math run; zero external calls.

Not the right tool when

  • 3D or shadow-only focus — focus expressed via box-shadow or custom rings instead of an outline. This tool simulates outline directly. Shadow-blur color comparison needs a separate evaluation.
  • Focus + hover at the same time — only one state per check here. Full state-matrix verification belongs in design-token tools or Figma plugins.
  • Image or gradient backgrounds — the calculation assumes solid colors. For photo backgrounds, sample the dominant page color separately.

Color tokens stay on the page

Design-system brand and focus tokens you paste are not transmitted. culori-only client-side math; zero external calls.

Frequently asked questions

Why not just use the contrast tool?
The contrast tool measures text / general UI ratio. Focus rings need 3:1 against *two* adjacent backgrounds at the same time — the element it sits over and the page background it extends into (with offset). Checking just one side misses the other.
Does outline-offset change the result?
The arithmetic ratio is the same, but visual emphasis isn't. offset: 0 means the ring overlaps the element's edge — the page-background-vs-ring contrast is what matters. offset: 4 puts the entire ring on the page background — that contrast becomes the only one. The bigger the offset, the more page-background contrast matters.
Do double / dashed styles use the same threshold?
WCAG 2.4.11's text says 'change of color' only. Dashed introduces blank gaps that can weaken the visual effect — empirically check it. Solid is the safest default.
Are browser-default focus rings good enough?
Case by case. Chromium's default adapts to OS light/dark theme and is usually sufficient. If you conflict with brand colors or your CSS reset removes outlines, define an explicit one. Use :focus-visible to scope it to keyboard navigation.
Can I cite this directly in a Korean public-sector KWCAG audit?
As a reference. Formal audits combine NIA / Korean Accessibility Technology Association guides with real user testing (screen reader, magnifier). This tool covers the automated portion — pair the narrative and cited spec sections in your report.