Calculate color contrast ratios for foreground and background combinations against WCAG 2.1 and 2.2 Level AA and AAA standards. Test live typography, view compliance badges, and export design tokens.
Outstanding contrast. Complies with all WCAG 2.1 and 2.2 criteria.
According to WCAG Success Criterion 1.4.3, the visual presentation of text and images of text must have a contrast ratio of at least 4.5:1, except for large text which requires at least 3:1. This ensures content is readable for individuals with moderate low vision.
Passing contrast tests does not protect your organization from ADA Title III lawsuits if your website contains keyboard traps, missing ARIA announcements, or inaccessible checkout forms.
Access specific evaluation criteria, downloadable test checklists, code patterns, and technical guidelines across this regulatory domain.
Setting up WCAG 2.2 APCA / 4.5:1 / 3:1 color variables in Figma, automated design linter plugins, non-text contrast checks, and dark mode token pairs.
Step-by-step code patterns for :focus-visible styling, Tailwind ring-offset contrast rules, 2px outline thickness, and multi-layer keyboard rings.
Side-by-side comparison of all 9 new WCAG 2.2 criteria, the removal of 4.1.1 Parsing, and an actionable audit checklist for development teams.
What Lighthouse catches (~25-35% of WCAG criteria) vs what it completely misses: keyboard traps, reading order, screen reader context, and dynamic ARIA states.
Production TypeScript configuration, scanning dynamic React/Next.js/Vue apps, handling iframe boundaries, filtering false positives, and blocking pull requests.
Native skip links, Gutenberg custom block accessibility with React ARIA attributes, Accessible Gravity/CF7 forms, and preventing menu focus traps.