frontend-a11y-motion-contrast-wcag22

name	frontend-a11y-motion-contrast-wcag22
description	Use when shipping a feature that must meet WCAG 2.2 conformance (nine new Success Criteria over 2.1), measuring text and non-text contrast against the binding 2.x ratios, deciding how to respect a user's reduced-motion preference in a CSS or View-Transitions animation, picking palette tokens for prefers-contrast more / less, supporting Windows High Contrast Mode via forced-colors, sizing an icon-only target, or remediating an audit finding on focus-not-obscured, dragging-only interaction, redundant-entry, or cognitive-CAPTCHA authentication. Prevents the most common a11y regressions in 2026 : animations that fire by default without a reduced-motion guard and trigger vestibular distress, 16-by-16 icon buttons that fail 2 5 8 Target Size, focus indicators that hide entirely behind a sticky header (2 4 11 fail), drag-only kanban / slider interactions with no single-pointer alternative (2 5 7 fail), CAPTCHA-only authentication that blocks password-manager paste (3 3 8 fail), color-only form-error indication (1 4 1 fail), glassmorphism without a prefers-reduced-transparency opt-out, custom focus rings stripped without a visible replacement, and the misconception that APCA pass-marks satisfy binding WCAG conformance. Covers the nine 2 2 new SCs (2 4 11 Focus Not Obscured Minimum AA, 2 4 12 Enhanced AAA, 2 4 13 Focus Appearance AAA, 2 5 7 Dragging Movements AA, 2 5 8 Target Size Minimum AA with five exceptions, 3 2 6 Consistent Help A, 3 3 7 Redundant Entry A, 3 3 8 Accessible Authentication Minimum AA, 3 3 9 Enhanced AAA), the binding 2 x contrast ratios (1 4 3 normal-4 5 large-3, 1 4 6 enhanced 7 and 4 5, 1 4 11 non-text 3), the prefers-reduced-motion / opt-in versus reduce patterns, prefers-contrast more / less / custom palette swapping, the full forced-colors system-color-keyword surface (Canvas, CanvasText, LinkText, ButtonFace, ButtonText, ButtonBorder, Field, FieldText, Highlight, HighlightText, AccentColor, AccentColorText, Mark, GrayText), the forced-color-adjust escape hatch, the limited-availability prefers-reduced-data and prefers-reduced-transparency, the experimental APCA algorithm with its WCAG-3-Working-Draft non-normative status, and the rule that semantic native HTML beats div-soup for forced-colors mapping. Keywords: WCAG 2 2, prefers-reduced-motion, prefers-contrast, prefers-color-scheme, forced-colors, prefers-reduced-data, prefers-reduced-transparency, contrast ratio, target size, 24 by 24, focus not obscured, focus appearance, dragging movements, accessible authentication, consistent help, redundant entry, APCA, Canvas, CanvasText, ButtonText, Highlight, AccentColor, GrayText, forced-color-adjust, scroll-padding-top, scroll-margin, color-scheme, motion makes user sick, vestibular harm, button too small, focus hidden under header, dark mode broken in HCM, glassmorphism inaccessible, CAPTCHA blocks password manager, text unreadable, contrast fails audit, animation does not respect OS setting, target size warning, drag-only interaction, how do I respect reduced motion, what is WCAG 2 2, how to check contrast, minimum target size for buttons, accessible color contrast, how to support Windows High Contrast Mode, what is APCA, do I need to use APCA, how to handle reduced transparency
license	MIT
compatibility	Designed for Claude Code. Requires Frontend Design evergreen-2026.
metadata	{"author":"OpenAEC-Foundation","version":"1.0"}

Frontend A11y : Motion, Contrast, WCAG 2.2

This skill is the operational reference for WCAG 2.2 conformance, contrast measurement, and user-preference media features (prefers-reduced-motion, prefers-contrast, forced-colors, prefers-reduced-data, prefers-reduced-transparency). It covers the nine WCAG 2.2 Success Criteria added over 2.1, the binding 2.x contrast ratios, motion-reduction patterns, palette swaps for elevated contrast preferences, and Windows High Contrast Mode support via system color keywords. The skill does NOT cover focus / keyboard mechanics (see [[frontend-a11y-focus-keyboard-inert]]), ARIA roles (see [[frontend-a11y-aria-patterns]]), color-palette generation (see [[frontend-theming-color-palette-oklch]]), or INP performance measurement (see [[frontend-perf-core-web-vitals-inp]]).

Quick Reference

Floor rules

• ALWAYS check @media (prefers-reduced-motion: reduce) BEFORE shipping any non-essential motion. NEVER ship parallax, auto-play carousels, slide-in transitions, or scale-on-hover without a reduce-branch fallback.
• ALWAYS size interactive targets to a 24-by-24 CSS-pixel solid square (WCAG 2.2 SC 2 5 8). NEVER ship a 16-by-16 icon button unless one of the five exceptions applies (spacing, equivalent, inline, user-agent, essential).
• ALWAYS provide a single-pointer (click or tap) alternative when an interaction uses dragging (WCAG 2.2 SC 2 5 7). NEVER ship a drag-only slider, kanban, or color wheel.
• ALWAYS allow paste in password fields and support autocomplete="current-password" (WCAG 2.2 SC 3 3 8). NEVER use onpaste="return false" or block password-manager autofill.
• ALWAYS measure contrast on the RENDERED foreground-background pair. NEVER trust the declared token value when the surface uses opacity, gradient, or backdrop-filter.
• ALWAYS treat APCA as informational and cite WCAG 2.x ratios for conformance. NEVER tell a stakeholder that an APCA Lc 60 / 75 / 90 result satisfies legal WCAG 2.2 conformance.
• ALWAYS prefer native HTML elements over <div role="button"> so that forced-colors: active maps ButtonText / ButtonFace correctly.
• ALWAYS test under Windows High Contrast Mode (Settings > Accessibility > Contrast themes) before shipping anything with custom colors. NEVER rely on box-shadow for visual definition ; HCM forces it to none.