Color
Contrast

Verifica istantaneamente il contrasto cromatico secondo gli standard WCAG AA e AAA — per testi, bottoni e componenti UI.

Standard WCAG 2.14 criteri verificatiAnteprima live

① Inserisci il colore di primo piano ② Inserisci il colore di sfondo ③ Controlla il rapporto di contrasto WCAG

Foreground (testo)

Background

Presets:

WCAG AA

4.5:1 normal · 3:1 large

WCAG AAA

7:1 normal · 4.5:1 large

Non-text

3:1 UI components (1.4.11)

Cos'è il contrasto cromatico WCAG e perché è importante?

Le WCAG (Web Content Accessibility Guidelines) definiscono i rapporti minimi di contrasto tra testo e sfondo per garantire la leggibilità agli utenti con disabilità visive, incluse daltonismo e ipovisione. Il livello WCAG 2.1 AA richiede almeno 4,5:1 per testo normale e 3:1 per testo grande. Il livello AAA richiede 7:1 per testo normale e 4,5:1 per testo grande. Il rapporto si calcola tramite la luminanza relativa — misura percettiva derivata dalla linearizzazione RGB (0,2126R + 0,7152G + 0,0722B). Verificare il contrasto in fase di progettazione è fondamentale per garantire accessibilità legale (ADA, EN 301 549, AODA).

Domande frequenti

Il contrasto cromatico WCAG è uno standard che definisce il rapporto minimo di contrasto tra testo e sfondo per garantire la leggibilità agli utenti con disabilità visive. È pubblicato dal W3C e fa parte delle WCAG 2.1, linee guida usate a livello globale per l'accessibilità web.

Il rapporto si calcola usando la luminanza relativa derivata dai componenti RGB di ciascun colore. Ogni canale viene prima linearizzato, poi combinato con i coefficienti (0,2126R + 0,7152G + 0,0722B). La formula è (L1 + 0,05) / (L2 + 0,05) dove L1 è il colore più chiaro e L2 il più scuro. I valori vanno da 1:1 (nessun contrasto) a 21:1 (nero su bianco).

WCAG AA è il livello standard richiesto nella maggior parte dei contesti legali. Richiede 4,5:1 per testo normale e 3:1 per testo grande. WCAG AAA è il livello avanzato: richiede 7:1 per testo normale e 4,5:1 per testo grande. È consigliato per documenti, contenuti legali e interfacce ad alta criticità per l'accessibilità.

Le WCAG definiscono il testo grande come almeno 18 punti (circa 24px) per peso normale, o almeno 14 punti (circa 18,67px) per grassetto. A queste dimensioni viene accettato un rapporto di contrasto leggermente inferiore perché le lettere più grandi risultano intrinsecamente più leggibili.

Non necessariamente. Il contrasto riguarda la leggibilità, ma il design accessibile include anche dimensione del font, leggibilità del carattere, spaziatura e contesto. Un rapporto sufficiente con un font molto sottile o ornato può comunque risultare difficile da leggere. Abbina la verifica del contrasto a test con utenti reali, incluse persone con disabilità visive.

Incolla i codici HEX dei tuoi colori brand o UI in entrambi i campi. Punta almeno al livello AA per tutto il testo del corpo. Usa il pulsante di inversione per testare rapidamente le combinazioni invertite. Verifica anche gli stati interattivi (hover, focus). Esporta il rapporto per la documentazione di accessibilità.

Il criterio WCAG 2.1 1.4.11 (Non-text Contrast) richiede che i componenti UI e gli oggetti grafici abbiano un rapporto di contrasto di almeno 3:1 rispetto ai colori adiacenti. Questo vale per i bordi dei bottoni, gli indicatori di focus, i bordi dei campi modulo e simili. Il testo dentro il bottone segue la regola standard 4,5:1.

Cos'è il contrasto cromatico WCAG e perché è importante?

Domande frequenti

Esplora il Nostro Network