WCAG AA Compliance Checker
Fast, secure, client-side utility running entirely in your browser with zero server dependencies.
WCAG AA Compliance Checker
Verify web interfaces against mandatory WCAG 2.2 Level AA success criteria—the international baseline for legal ADA & EAA digital compliance.
WCAG 2.2 Level AA Interactive Evaluation
Select your component properties below to evaluate conformance against key Level AA criteria including contrast ratios, minimum target dimensions, and focus states.
Visual Component Preview
WCAG AA Compliance Checker - W3C Level AA Conformance Auditor: Free WCAG AA Compliance Checker tool: audit HTML and CSS against WCAG 2.2 Level AA legal compliance standards required by ADA Title II/III, Section 508.
How to Use the WCAG AA Compliance Checker
Enter Foreground & Background Hex Colors
Provide your UI element text color and container background color to verify the 4.5:1 normal text or 3.0:1 large text contrast ratio (SC 1.4.3).
Specify Typography Dimensions
Set font size in pixels and font weight. Text 24px and larger (or 18.66px bold) qualifies as large text with relaxed 3.0:1 requirements.
Audit Interactive Target Dimensions
Check button or link bounding box dimensions against the WCAG 2.2 Success Criterion 2.5.8 minimum target size of 24x24 CSS pixels.
Verify Focus Indicator Visibility
Confirm that keyboard focus states feature a visible focus indicator (minimum 2px outline with sufficient contrast under SC 2.4.13).
Comprehensive Guide: WCAG AA Compliance Checker
WCAG 2.2 Level AA represents the definitive gold standard for digital accessibility worldwide. Adopted by global courts and regulatory bodies—including the United States Department of Justice for ADA Title II, Section 508 for federal technology, and the European Union’s European Accessibility Act (EAA Directive 2019/882)—Level AA compliance establishes a fair, usable baseline across diverse digital user experiences.
A cornerstone of Level AA conformance is Success Criterion 1.4.3 Contrast (Minimum). Under this rule, standard body text must maintain a contrast ratio of at least 4.5:1 against its background. For "large text"—defined by the W3C as 18 point (24px) or 14 point bold (18.66px bold)—the threshold is lowered to 3:1. This mathematical formula models human ocular photopic response, ensuring that users with moderate low vision or age-related contrast sensitivity loss can read copy without strain.
The WCAG 2.2 release introduced critical interactive ergonomics with Success Criterion 2.5.8 Target Size (Minimum). On mobile devices and touchscreens, users with tremors, motor disabilities, or large fingertips frequently suffer accidental misclicks when interactive tap targets are clustered tightly. Level AA mandates that all interactive targets must be at least 24 by 24 CSS pixels, or provide sufficient perimeter spacing so that a 24px diameter circle centered on the target does not overlap adjacent clickable areas.
Level AA also mandates robust keyboard navigation and focus management. Success Criterion 2.4.7 (Focus Visible) and the enhanced 2.4.13 (Focus Appearance) require that every interactive element receiving keyboard focus displays an unmistakable visual boundary. Eliminating the browser outline (`outline: none` or `outline: 0`) without providing an equal or higher contrast replacement indicator is one of the most cited violations in modern ADA web accessibility litigation.
Key Features & Capabilities
WCAG 2.2 Level AA Benchmark
Ensures your component architecture satisfies mandatory ADA Title II and European Accessibility Act legal baselines.
Precise Luminance Contrast Math
Calculates relative luminance ratios adhering strictly to W3C photopic formulas for normal and large font thresholds.
SC 2.5.8 Target Size Validation
Evaluates touch target width and height to prevent mobile touch clustering and accidental misclicks.
SC 2.4.13 Focus Outline Appearance
Checks keyboard focus ring thickness and spacing to avoid non-compliant outline:none design antipatterns.
Interactive Live Visual Preview
Renders an interactive button preview in real time matching your exact dimensions, color contrast, and focus rings.
Defensible Compliance Evidence
Produces objective pass/fail metrics that can be documented in design systems and VPAT accessibility conformance reports.
Frequently Asked Questions
W3C states that it is not recommended that Level AAA compliance be required as a general policy for entire websites because it is impossible to satisfy all Level AAA criteria for certain types of content (such as live video captions, sign language interpretation, and pure 7:1 contrast across diverse imagery). Level AA strikes the optimal balance of comprehensive usability and design flexibility.
WCAG 2.2 added several key Level AA criteria: SC 2.4.11 Focus Not Obscured (Minimum) ensuring sticky footers or headers do not cover focused items; SC 2.5.8 Target Size (Minimum) requiring 24x24px targets; SC 3.2.6 Consistent Help requiring help links in consistent locations; and SC 3.3.7 Redundant Entry preventing users from re-entering identical information.
Large text is defined as at least 18 point (24 CSS pixels) for normal weight text, or at least 14 point (18.66 CSS pixels) for bold text. Large text requires a lower contrast ratio of 3.0:1 instead of 4.5:1 because larger letterforms are significantly easier for the human visual system to resolve.
Yes. The target size is measured by the clickable/tappable bounding box area. Adding CSS padding (e.g. padding: 8px 12px) to a small icon or text link expands the hit area to meet or exceed 24x24px without altering the visual font size.
Removing outline:none allows the browser default focus ring to appear, which technically provides a focus indicator. However, default browser outlines can vary widely and may lack sufficient contrast against custom dark or brand-colored backgrounds. The best practice is to specify an explicit high-contrast outline (e.g. outline: 2px solid #2563eb; outline-offset: 2px).