Contrast Checker WCAG
Verifica il rapporto di contrasto tra colori secondo le linee guida WCAG 2.1. Controlla la conformità AA e AAA per garantire accessibilità.
Verifica Contrasto
Testo normale (16px)
Testo grande (24px / 18px bold)
AA richiede 4.5:1, AAA richiede 7:1
AA richiede 3:1, AAA richiede 4.5:1
WCAG 2.1 richiede minimo 3:1
Come utilizzare Contrast Checker WCAG
Scegli il colore del testo (Foreground)
Clicca sul selettore colore o digita il codice esadecimale nel campo di testo per impostare il colore del testo. Puoi anche usare il pulsante frecce per scambiare i due colori rapidamente.
Scegli il colore dello sfondo (Background)
Imposta il colore di sfondo con il secondo selettore. Il rapporto di contrasto viene calcolato automaticamente non appena cambi uno dei due colori.
Leggi il rapporto di contrasto e il livello WCAG
Il pannello centrale mostra il rapporto numerico (es. 7.32:1) e il badge del livello WCAG raggiunto: "WCAG AAA" (massima accessibilità), "WCAG AA" (standard consigliato) o "Non conforme". Il verde indica conformità, il rosso indica che i colori non soddisfano i requisiti minimi.
Verifica la conformità per tipo di contenuto
La griglia di conformità mostra separatamente i risultati per testo normale (minimo 4.5:1 per AA, 7:1 per AAA), testo grande sopra 24px o 18px bold (minimo 3:1 per AA) e componenti UI come bordi e icone (minimo 3:1).
Applica i suggerimenti automatici o usa i preset
Se il contrasto non è sufficiente, il pannello "Suggerimenti per migliorare" propone colori alternativi con contrasto sufficiente. Clicca su un suggerimento per applicarlo. Usa i preset nella barra laterale per caricare combinazioni di colori note come GitHub Dark o Material Blue.
Suggerimenti
- Usa il pulsante di scambio (frecce) per invertire foreground e background: spesso basta invertire i colori per migliorare notevolmente il contrasto.
- Il testo grande (oltre 24px o 18px bold) ha requisiti di contrasto più bassi: se stai progettando intestazioni, puoi usare colori con rapporto 3:1 invece di 4.5:1.
- Il preset "Low Contrast" è incluso intenzionalmente come esempio di coppia di colori non conforme, utile per vedere come appare il badge "Non conforme".
Domande frequenti
What is the contrast ratio of WCAG and why is it important for accessibility?
Contrast ratio of WCAG measures the difference in brightness between text and background on a scale from 1:1 (no contrast) to 21:1 (maximum contrast). The WCAG 2.1 guidelines require at least 4.5:1 for normal text (level AA) and 7:1 for level AAA, ensuring readability for people with low vision or color blindness.
What is the difference between WCAG AA and WCAG AAA for color contrast?
Concise text - maintain similar length. Normal text ratio is 4.5:1 and large text ratio is 3:1 (over 24px or 18px bold). Level AAA is the most restrictive, requiring 7:1 for normal text and 4.5:1 for large text; recommended for critical content or senior public.
How is the contrast between two colors calculated according to WCAG 2.1?
The WCAG 2.1 formula uses relative luminance of each color, calculated by linearizing RGB values. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lightest color. This tool automatically calculates with the official formula.
Does my site have to comply with WCAG?
In many countries WCAG AA compliance is mandatory for public administration sites and strongly recommended for everyone. In Italy, Legislative Decree 106/2018 requires WCAG 2.1 level AA accessibility for public sites. For private sites it is good practice that improves user experience and SEO.
How do I choose accessible colors for my design while maintaining aesthetics?
Start with your brand's primary color and use the tool's auto-suggestions to find darker or lighter variations that exceed a 4.5:1 contrast ratio. Always test combinations with included presets like GitHub Dark, which are already WCAG AA compliant for inspiration.