Verifica del contrasto dei colori

Verifica il contrasto colori WCAG nel tuo browser

Questo controllo contrasto colori misura il rapporto di contrasto WCAG tra un colore del testo e uno di sfondo, indicandoti immediatamente se la coppia supera i livelli AA e AAA per testo normale, testo grande e componenti dell'interfaccia. Digita un valore esadecimale, modifica i campi RGB o HSL, trascina il cursore della luminosità o usa il contagocce per catturare qualsiasi colore dello schermo — il rapporto, la matrice dei risultati e l'anteprima in tempo reale si aggiornano durante la digitazione.

Funziona come gli strumenti di cui i designer già si fidano — la stessa formula WCAG di WebAIM e Adobe Color — ma aggiunge un'anteprima leggibile in tempo reale, un punteggio APCA (WCAG 3) e una correzione automatica per le coppie che non superano i criteri. Tutto funziona localmente in JavaScript: i tuoi colori non lasciano mai il dispositivo e non è richiesto alcun account.

Soglie WCAG AA e AAA spiegate

Il rapporto di contrasto WCAG va da 1:1 (due colori identici) a 21:1 (nero su bianco). Il livello AA — lo standard richiesto dalla maggior parte delle leggi come l'ADA e la Sezione 508 — richiede 4,5:1 per il testo normale e 3:1 per il testo grande. Il livello AAA eleva questi valori a 7:1 e 4,5:1. Per testo grande si intende 18pt (24px) e oltre, oppure 14pt (circa 18,66px) e oltre in grassetto.

La matrice dei risultati suddivide ogni soglia separatamente, in modo da vedere a colpo d'occhio che un grigio come #767676 su bianco supera AA per il testo del corpo con 4,54:1 ma non raggiunge i 7:1 necessari per AAA. Se il tuo team deve soddisfare la conformità legale (ADA, EN 301 549, Sezione 508), AA è il livello da raggiungere. AAA vale la pena perseguirlo in interfacce a forte lettura dove gli utenti ipovedenti hanno priorità.

Anteprima, correzione e pubblicazione di coppie di colori accessibili

I numeri raccontano solo metà della storia, quindi l'anteprima in tempo reale visualizza titoli reali, corpo del testo, testo piccolo e un pulsante e chip di esempio nei tuoi colori esatti — vedi la leggibilità, non limitarti a leggere il rapporto. Quando una coppia non supera i criteri, il suggeritore 'Falla passare' mantiene la tua tonalità e saturazione e regola la luminosità al colore più vicino che supera il livello scelto (AA, AA testo grande o AAA), applicandolo con un solo clic. Puoi regolare il testo o lo sfondo, in base alla tua preferenza.

La griglia a coppie accetta una palette completa e mostra a colpo d'occhio quali combinazioni di colori superano i criteri — utile quando si costruisce un sistema di design in cui ogni abbinamento primo piano/sfondo deve essere sicuro. Invece di testare decine di coppie una per una, incolli la tua palette una volta e vedi l'intera matrice istantaneamente.

APCA: un'anteprima del contrasto WCAG 3

Oltre al rapporto classico, questo strumento mostra un punteggio APCA Lc — la metrica di contrasto percettivo proposta per WCAG 3. APCA modella il modo in cui l'occhio legge effettivamente il testo chiaro su sfondo scuro rispetto al testo scuro su sfondo chiaro e tiene conto del peso del carattere, rilevando problemi di leggibilità che il rapporto WCAG 2 talvolta non coglie. Valori di riferimento: Lc 75+ per il testo del corpo, Lc 60+ per il testo grande, Lc 45+ per i titoli grandi.

WCAG 3 è ancora in bozza e non ha sostituito WCAG 2.2, quindi la conformità oggi significa soddisfare le soglie di 4,5:1 e 3:1. Mostrare APCA accanto ai rapporti attuali ti permette di preparare la tua palette per il futuro senza aspettare la finalizzazione della specifica.

Contrasto non testuale per icone e componenti dell'interfaccia

Il contrasto non riguarda solo il testo. WCAG 2.1 SC 1.4.11 richiede 3:1 di contrasto per i bordi dei componenti interattivi — bordi dei campi, indicatori di focus, stati dei toggle — e per icone e grafiche significative. La matrice include una verifica dedicata per UI e grafica a 3:1 in modo da poter confermare che il contorno di un pulsante o un'icona sia visibile.

È un'area in cui molti team non superano le verifiche senza rendersene conto. Un bordo di campo di input grigio chiaro (#D1D1D1 su bianco è 1,4:1) è una violazione comune di WCAG 2.1 anche quando tutto il testo della pagina supera i criteri. Verificare qui i componenti dell'interfaccia richiede secondi e previene sorprese in una verifica formale.

Confronto con WebAIM, Adobe Color e Chrome DevTools

Il controllo contrasto di WebAIM su webaim.org è lo strumento di accessibilità gratuito più citato e utilizza la stessa formula WCAG 2 di questo strumento. Non mostra APCA, non ha un'anteprima del testo in tempo reale, non può correggere automaticamente le coppie che non superano i criteri e non ha una griglia a palette a coppie.

Gli strumenti di accessibilità di Adobe Color mostrano i risultati AA/AAA e includono un simulatore di daltonismo, ma richiedono un account Adobe gratuito per salvare il lavoro e non possono suggerire automaticamente un colore che superi i criteri.

Chrome DevTools ha un badge del rapporto di contrasto nel selettore di colori del pannello Elementi che funziona per le verifiche nel browser — ma solo all'interno di DevTools.

Questo strumento funziona senza login, mostra sia i rapporti WCAG 2 che il punteggio APCA Lc, visualizza un'anteprima in tempo reale nei tuoi colori e permette di testare una griglia di palette completa in un'unica vista. Tutti i calcoli vengono eseguiti localmente in JavaScript.