WCAG Contrast Checker
Check palette colors for WCAG contrast compliance
Palette colors
Contrast matrix
| FG \ BG | ||||||
|---|---|---|---|---|---|---|
| - | ||||||
| - | ||||||
| - | ||||||
| - | ||||||
| - | ||||||
| - |
Come usare
Add your design system colors to build a contrast compliance grid. Each color is checked against every other color in the palette, showing the WCAG level (AAA, AA, AA Large, or Fail) for each combination. Click any cell to see a live text preview. The overall score shows what percentage of your palette combinations pass WCAG AA.
Formula
Esempi
Design system audit
Add your brand colors (primary, secondary, background, text, accent) and instantly see which combinations are safe for text. A 5-color palette generates 20 contrast pairs to check.
Dark mode check
Enter both light and dark mode colors to verify all text/background combinations meet AA standards. Common failures: light gray text on dark backgrounds, colored text on colored backgrounds.
EU Accessibility Act compliance
The European Accessibility Act (effective June 2025) requires websites to meet WCAG 2.1 AA. Use this tool to verify your palette before an audit. All normal text needs a minimum 4.5:1 contrast ratio.
Domande frequenti
What contrast ratio does WCAG require?
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt/24px or 14pt/18.66px bold). Level AAA requires 7:1 for normal text and 4.5:1 for large text. Most legal requirements (ADA, EU Accessibility Act) mandate Level AA compliance.
What counts as large text in WCAG?
Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (18.66px) or larger for bold weight. Large text has relaxed contrast requirements (3:1 for AA, 4.5:1 for AAA) because bigger text is inherently easier to read.
Come viene calcolato il rapporto di contrasto?
The contrast ratio uses relative luminance values of both colors. Relative luminance (L) is calculated from sRGB values using the formula L = 0.2126R + 0.7152G + 0.0722B after gamma correction. The ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color. The result ranges from 1:1 (identical) to 21:1 (black on white).
Does this tool check WCAG 2.2 or 3.0?
This tool checks WCAG 2.1 contrast requirements, which are the current legal standard. WCAG 2.2 uses the same contrast ratios. WCAG 3.0 (still in draft) proposes a new algorithm called APCA (Advanced Perceptual Contrast Algorithm) that accounts for font weight and polarity, but it is not yet a standard.
What is the EU Accessibility Act?
The European Accessibility Act (EAA) became mandatory in June 2025 for products and services sold in the EU. It requires websites and apps to meet WCAG 2.1 AA standards. Non-compliance can result in fines and market access restrictions. This affects any business serving EU customers, regardless of where the company is based.
Informazioni su questo strumento
Check your entire color palette for WCAG 2.1 accessibility compliance. See a contrast matrix showing AA/AAA pass/fail for every color combination with live text previews.
Tutti i calcoli vengono eseguiti localmente nel browser. I tuoi dati non lasciano mai il tuo dispositivo.