WCAG 2.2 Color Contrast Studio
Test color combinations against WCAG 2.2 Level AA and AAA standards. Simulate color vision deficiencies and automatically calculate compliant alternative shades.
Color Selection
Auto-Tune for Compliance
If your color combination doesn't pass, click to calculate the nearest perceptible shade that meets WCAG AA (4.5:1) or AAA (7:1).
Color Vision Deficiency Simulation
Simulate how viewers with various forms of dichromacy perceive this color pair.
Calculated Contrast
Interactive Component Preview
Live preview rendered with your exact foreground and background colors:
Accessible Web Experiences For Everyone
Good visual contrast ensures people with low vision or age-related vision loss can perceive content comfortably in any ambient lighting environment.
Small footnote text (12px / 0.75rem) requires at least 4.5:1 contrast against the container background.
How color contrast is measured
WCAG measures contrast as a ratio between the relative luminance of two colors, from 1:1 (no difference) to 21:1 (black on white). Success criterion 1.4.3 Contrast (Minimum) requires at least 4.5:1 for normal text and 3:1 for large text, which means 18 point or larger, or 14 point or larger in bold. At Level AAA, criterion 1.4.6 raises those to 7:1 and 4.5:1.
Criterion 1.4.11 Non-text Contrast requires 3:1 for the visual information needed to identify interface components and states, such as an input border, a focus indicator or an icon that has no text. Low contrast text and low contrast form controls are among the most common failures found on real websites.
This tool runs in your browser. Enter a foreground and a background color, read the ratio and the pass or fail result for each level, preview color vision deficiencies and use the auto-tuner to find the nearest compliant shade.
Frequently asked questions
What contrast ratio does WCAG AA require?
Normal text needs at least 4.5:1, large text needs at least 3:1, and user interface components and meaningful graphics need at least 3:1 against adjacent colors.
Did WCAG 2.2 change the contrast requirements?
No. The contrast thresholds in WCAG 2.2 are the same as in 2.1. What 2.2 adds is a new Level AA criterion, Focus Not Obscured (Minimum), which is about whether a focused element is hidden, not about color.
What counts as large text?
Text that is at least 18 point (about 24 CSS pixels), or at least 14 point (about 18.66 CSS pixels) and bold.
Is any text exempt from the contrast rule?
Yes. Logotypes, purely decorative text and text that is part of an inactive user interface component are exempt. Text in images is not exempt unless it is a logo.
Want every page of your site checked, not just one? Request a free WCAG 2.2 AA audit, or read our accessibility guides.