Tests colour pairs against the AAA thresholds: 7:1 for normal text, 4.5:1 for large text. Real luminance maths, instant pass-fail, no signup. The strictest reading of WCAG 2.2.
Paste a foreground and background hex. The tool returns the WCAG relative luminance ratio and grades it against AAA normal, AAA large, and the AA fallbacks for context.
AAA is the highest level of conformance under the Web Content Accessibility Guidelines. For contrast specifically, that means a ratio of 7:1 for normal text and 4.5:1 for large text, defined under success criterion 1.4.6 (Contrast Enhanced). Large text means anything 18pt and above, or 14pt bold and above, which in practical CSS terms is roughly 24px regular or 18.66px bold.
The jump from AA to AAA looks small on paper but materially shrinks the colour palette you can use. A button that just passes AA at 4.6:1 will fail AAA by a long way. Many brand colours that work fine on white at AA fail AAA without darkening.
AAA is rarely the default. Even WCAG itself says full AAA conformance is not always achievable for every kind of content. The four situations where AAA is the right bar:
For most commercial UI, the right strategy is to target AA as the baseline, design body text at AAA where possible without compromising the brand, and accept AA for non-text accents.
A vibrant brand blue or violet that passes AA on white at 4.7:1 will almost always fail AAA. Two options: darken the brand colour by 10 to 20 percent for body copy use, or restrict the brand colour to large text and accents where the 4.5:1 threshold applies.
The classic #666 on white sits at 5.7:1, which passes AA and fails AAA. To clear AAA you need to be at roughly #595959 or darker. Most "soft" body greys used for hierarchy fail AAA.
Designers often deliberately style disabled and placeholder copy below AA on the grounds that it conveys no information. WCAG does grant exemptions, but if the disabled state is ever the only signal of meaning, AAA tightens that exemption considerably.
A button that passes AAA at rest, then lightens on hover, often drops below AAA in the hover state. Test every interactive state, not just the resting one. The same applies to focus rings under 1.4.11, which we cover in the focus state contrast checker.
If you want a defensible AAA palette to start from:
#1A1A1A through #404040. Anything lighter than #595959 fails AAA.#E8E9EC or lighter. Mid-tone greys fail.What is the WCAG AAA contrast ratio?
7:1 for normal text and 4.5:1 for large text, under WCAG 2.2 success criterion 1.4.6. Large text is 18pt and above, or 14pt bold and above.
Do I need to meet WCAG AAA?
Rarely as a baseline. AAA is the right target for public sector content, accessibility-first products, high-glare environments, and selectively for high-stakes UI copy. Most commercial products target AA and apply AAA tactically.
What is the difference between AA and AAA contrast?
AA requires 4.5:1 normal, 3:1 large. AAA raises both to 7:1 normal and 4.5:1 large. AAA is roughly 50 percent stricter and meaningfully shrinks the available brand palette, especially on white.
Is AAA contrast a legal requirement?
Generally no. UK and EU public sector bodies must meet AA under PSBAR. US ADA references WCAG AA. AAA is a recommendation rather than a legal minimum, although some procurement contracts and specific government standards do require it.
How do I pass AAA without losing brand colour?
Restrict the brand colour to large text and UI accents where 4.5:1 applies. Use a darker neutral for body copy. If brand must appear on body text, darken it slightly or shift the hue. The brand palette generator returns AAA-safe pairings automatically.