What is WCAG 2.2 Criterion 2.4.11 Focus Appearance?

WCAG 2.2 Criterion 2.4.11 requires that a focus indicator has a minimum surface area at least equal to a 2-pixel thick solid perimeter around the component and achieves at least a 3:1 contrast ratio against the adjacent colors.

How does APCA contrast differ from WCAG 2.1?

APCA (Advanced Perceptual Contrast Algorithm) models human spatial vision, accounting for font weight, text size, and background luminance polarity rather than simple flat 4.5:1 mathematical ratios.

Updated for European Accessibility Act (EAA) & WCAG 2.2

WCAG 2.2 Focus Appearance & APCA Contrast Studio

Stop relying on obsolete 4.5:1 text-only checkers. Calculate sub-pixel focus ring geometry (Criteria 2.4.11/2.4.13), 3-color differential boundaries, and spatial APCA lightness.

WCAG 2.2 Focus (2.4.11) PASS

1332 px² (req. 832px²)

Area satisfies mandatory 2px perimeter surface math.

APCA Text LightnessPreferred

-80.2 Lc

Perceptual spatial contrast for body text.

3-Way Differential Ratio≥ 3.0:1

8.33:1 vs bg / 2.41:1 vs comp

Contrast against adjacent boundary states.

Color Matrix

Canvas Background

Component / Button

Text Label

Focus Ring Indicator

Focus Indicator Geometry

Ring Thickness3px

Ring Offset2px

Width (160px)

Height (48px)

Border Radius (8px)

Vision Simulation

Interactive Component Sandbox

Simulated active focus state

Production-Ready CSS

/* WCAG 2.2 Compliant Focus Indicator */
.accessible-button {
  background-color: #2563eb;
  color: #ffffff;
  border-radius: 8px;
  outline: none;
  transition: outline-offset 0.15s ease;
}

.accessible-button:focus-visible {
  outline: 3px solid #38bdf8;
  outline-offset: 2px;
  /* APCA Lc: -59.5 | WCAG 2.2 Status: PASS */
}

01. Understanding WCAG 2.2 Focus Appearance

Under WCAG 2.2 Criterion 2.4.11 (Level AA), web components must provide a focus indicator with sufficient visual area and contrast. The mathematical requirement dictates that the surface area of the focus indicator must be at least:

Minimum Area (px²) ≥ 2 × Perimeter of Focused Component

Additionally, the focus indicator must achieve at least a 3:1 contrast ratio between its focused and unfocused states, or against adjacent background colors.

02. Why Legacy 4.5:1 Checkers Fail

Legacy WCAG 2.1 formulas use a simple mathematical luminance ratio that ignores spatial frequency, font weight, and background polarity.

The Advanced Perceptual Contrast Algorithm (APCA) calculates lightness difference (Lc) based on human visual cortex processing. This prevents false passes on thin fonts and properly evaluates dark mode UI components.