WCAG 2.2 Colour Contrast & Accessible Palette
Audit foreground and background colour contrast ratios against WCAG 2.2 Level AA (4.5:1) and AAA (7.0:1) standards with live simulated Protanopia.
Live Typography & UI Preview
Accessible Web Typography Preview
Good color contrast improves readability for people with low vision, color blindness, or aging eyes, and benefits everyone reading screens in bright sunlight.
Color Vision Deficiency Simulation
About this tool
How to use it
- Choose a Text (foreground) color and a Background color using the visual color pickers or by typing hexadecimal codes.
- Review the calculated contrast ratio (e.g. 17.65:1) and overall accessibility score.
- Verify compliance across individual WCAG 2.1 & 2.2 levels (Normal Text AA, Large Text AA, Normal Text AAA, and UI Components).
- Inspect the interactive Typography & UI Preview sandbox to examine real-world text rendering and button aesthetics.
- Review the Color Vision Deficiency simulation cards to ensure usability for users with protanopia, deuteranopia, tritanopia, or monochromacy.
Why it matters
Web accessibility standards like WCAG 2.1, WCAG 2.2, ADA Section 508, and the European Accessibility Act mandate adequate luminance contrast to ensure text is legible for users with low vision, color blindness, and screen glare.
When to use it
Use this tool when designing brand color palettes, styling buttons and form inputs, auditing websites for accessibility lawsuits and compliance, or evaluating dark mode themes.
Good to know
Calculations execute entirely client-side using the official W3C relative luminance and contrast ratio algorithms. No color choices or code snippets are uploaded.
Common questions
What is the minimum WCAG contrast ratio for normal text?
Under WCAG AA, normal body text (under 18pt regular, or under 14pt bold) requires a minimum contrast ratio of 4.5:1. For enhanced AAA compliance, 7:1 is required.
What qualifies as 'Large Text'?
Large text is defined as text at least 18pt (24px) regular weight, or at least 14pt (18.66px) bold. The minimum contrast ratio for large text under WCAG AA is 3.0:1.
Do buttons and form borders require contrast?
Yes. Under WCAG 2.1 Non-Text Contrast (Success Criterion 1.4.11), visual boundaries of active user interface components and graphical objects must achieve at least 3:1 contrast against adjacent background colors.
How does color vision deficiency (CVD) simulation work?
The CVD simulation applies scientific transformation matrices that simulate how eye cone photoreceptor deficiencies alter red, green, and blue wavelength perception.