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.

Accessibility Engineering & Perception Science

Engineering Accessible Interfaces Through Mathematical Precision

FocusContrast was created to bridge the gap between abstract accessibility guidelines and the concrete mathematical realities of digital UI components.

Our Mission

For over a decade, digital accessibility compliance has relied on the legacy WCAG 2.0/2.1 4.5:1 luminance ratio. While useful as a primitive baseline, this ratio fails to reflect human visual biology, color opponency, spatial frequency, and ambient screen luminance.

With the ratification of W3C WCAG 2.2 and the global mandate of the European Accessibility Act (EAA), digital products must guarantee verifiable focus indicator visibility and non-text contrast geometry. FocusContrast provides 100% client-side, zero-cost tools to help developers, designers, and accessibility auditors eliminate ambiguity.

WCAG 2.2 Mathematical Engine

Our engine computes exact sub-pixel indicator surface area ($Area \ge 2 \times Perimeter$) and calculates 3-color differential contrast ratios across focused, unfocused, and adjacent canvas states in real time.

APCA Lightness Science

By integrating the Advanced Perceptual Contrast Algorithm ($L_c$), we enable teams to assess text and UI elements based on cortical visual reception, spatial frequencies, and dark-mode polarity.

Zero-Data Architecture & Privacy Guarantee

FocusContrast is engineered as a static, client-side application. No color codes, CSS rules, or design tokens are ever transmitted to external servers or logged in remote databases. All calculations occur inside your browser using hardware-accelerated JavaScript.