Skip to content
ExamsLibraryFor agentsConnect your agent
componentsComponents·25/25

WCAG 2.2 thresholds

The WCAG 2.2 A/AA numbers that turn a preference into a finding — 4.5:1 and 3:1 contrast, 3:1 focus rings, 24×24 targets, a single-pointer path for every drag, focus never hidden under sticky chrome, 200% text and 320px reflow, a pause on anything moving over 5 s. A finding cites one of these or a task an assistive-tech user cannot finish; 44px targets and heading outlines are recommendations.

Raw markdown On GitHub

A review blocks on evidence, not taste. In accessibility the evidence is a WCAG 2.2 Level A or AA criterion by number, or a concrete task an assistive-technology user cannot complete. Everything else — AAA, APG conventions, one <h1> per page, no skipped heading levels, 44px touch targets — is a recommendation and never the top severity in a review-format table.

The numbers

CriterionRule
1.4.3 ContrastText 4.5:1; large text (≥ 24px, or ≥ 18.67px bold) 3:1
1.4.11 Non-text contrastComponent boundaries, states and meaningful graphics 3:1 — includes input borders and custom focus rings against every adjacent colour
1.4.1 Use of colourStatus never by colour alone: add an icon, text or underline
2.5.8 Target size24×24 CSS px, or a smaller target spaced so a 24px circle centred on it touches no other target (links inside a sentence are exempt)
2.5.7 DraggingEvery drag has a single-pointer alternative — buttons or a menu that reach the same result
2.4.7 / 2.4.11 FocusA visible indicator, and the focused element never fully hidden behind a sticky header, footer or banner
1.4.4 Resize textEverything survives 200% text
1.4.10 ReflowWorks at 320px wide (400% zoom on 1280px) with vertical scroll only; tables, maps and code scroll in their own box
2.2.2 Pause, stop, hideAnything that moves, blinks or updates itself for more than 5 s has a visible pause
1.4.2 Audio controlNothing autoplays with sound

Inactive controls and logos are exempt from contrast. Measuring a pair is a colour job (contrast-and-color-scheme, color-scales-oklch): measure the foreground against what it actually renders on, report the pair, the value and the threshold missed, and leave the colours alone unless asked.

The fixes the numbers imply

  • Targets — keep the visual small and grow the hit area with a pseudo-element; hit areas never overlap; decorative layers get pointer-events: none so a glow never swallows the click beneath it. Aim for 44px touch and 40px desktop where density allows (touch-and-focus), but keep an established, usable dense tool dense.
  • Focus under sticky chrome — scroll-padding-block-start on the scroller equal to the header's height; -block-end for a sticky footer or cookie bar (growth-and-overflow).
  • Zoom — never maximum-scale=1 or user-scalable=no; the iOS input-zoom fix is a 16px input, not a locked viewport (forms-behavior). Text boxes take min-height, never height. Write media queries in rem so a larger browser font size reaches the narrow layout.
  • Forced colours — Windows High Contrast drops every box-shadow. A shadow ring keeps border: 1px solid transparent under it so an edge still draws; never forced-color-adjust: none without checking the control stays visible.
  • Timed UI — auto-dismiss only low-stakes confirmations. A toast carrying an action, an error or something the user may need stays until dismissed; one that must time out gets ≥ 5 s and pauses while hovered or focused. An undo link that vanishes on a timer is data loss on a schedule.

Gotcha

This graph reaches for APCA when designing contrast (contrast-and-color-scheme). A finding still cites the WCAG 2 ratio, because that is the criterion a product is held to. Pass both; report the one with a number on it. The split is settled in interfaces-reconciliation.

Sources

  • Jakub Krehel, interfaces skills (MIT, github.com/jakubkrehel/skills, HEAD 592aedc, read 2026-10-25): skills/better-accessibility/SKILL.md (Criteria, not conventions, Minimum hit area, Pair color with a second cue, Survive zoom and text resize), hit-areas.md, motion-and-zoom.md, focus-and-keyboard.md; skills/better-ui/SKILL.md (the forced-colors border).
  • W3C, Web Content Accessibility Guidelines 2.2 — success criteria as numbered above.
  • Related: accessibility-baseline, keyboard-patterns, screen-reader-announcements, prefers-reduced-motion.

componentsaccessibilitywcagcontrasttargetsreflow