Enter two hex colours — get instant WCAG 2.1 AA and AAA pass/fail results.
The quick brown fox
jumps over the lazy dog — 0123456789
SMALL TEXT SAMPLE · BODY COPY SAMPLE
Foreground
Background
Contrast Ratio
16.08:1
Requirements from WCAG 2.1. Large text means at least 18pt (24px) regular or 14pt (18.67px) bold.
| Level | Min Ratio | Applies To |
|---|---|---|
| AA — Normal text | ≥ 4.5:1 | Body copy, labels, input text (under 18pt / 14pt bold) |
| AA — Large text | ≥ 3:1 | Headings (18pt+ or 14pt+ bold), decorative text |
| AAA — Normal text | ≥ 7:1 | Enhanced accessibility for critical or extended reading |
| AAA — Large text | ≥ 4.5:1 | Enhanced large text — highest contrast requirement |
| UI components | ≥ 3:1 | Active UI elements, input borders, focus indicators (WCAG 1.4.11) |
What is WCAG?
WCAG (Web Content Accessibility Guidelines) is an international standard developed by the W3C that defines how to make web content more accessible to people with disabilities, including those with visual impairments. The contrast ratio requirements are found in WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) and 1.4.6 (Contrast Enhanced).
What contrast ratio do I need to pass WCAG AA?
For AA compliance: normal text (under 18pt or 14pt bold) needs a minimum 4.5:1 ratio. Large text (18pt or 14pt bold) needs at least 3:1. Most websites aim for AA compliance at minimum.
What is WCAG AAA?
AAA is the highest WCAG conformance level, requiring 7:1 for normal text and 4.5:1 for large text. AAA is recommended for text that users need to read for extended periods, but the W3C notes it may not be possible to achieve for all content.
How is contrast ratio calculated?
Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 the darker. Luminance is calculated by converting sRGB values to linear light values. A ratio of 1:1 means identical colours; 21:1 is black on white (the maximum).
Does the contrast checker work for dark mode?
Yes. Enter your dark mode background as the background colour and your dark mode text as the foreground colour. The WCAG ratio requirements are the same regardless of whether the design is light or dark.
Why do I sometimes see colours that look fine but fail WCAG?
Human perception of contrast is subjective and context-dependent. WCAG uses a mathematical formula that doesn't perfectly match perceived contrast in all cases. Some colours that seem fine to those with normal vision may be difficult for people with colour vision deficiencies or low contrast sensitivity.
More free tools
JWT decoder, regex tester, JSON formatter — all free, all in your browser.
Browse all tools