Strumento di verifica del contrasto dei colori

Cosa viene considerato testo grande

WCAG definisce grande il testo di almeno 18 punti, circa 24 pixel CSS, oppure di 14 punti in grassetto, circa 18,7 pixel. Solo il testo di queste dimensioni può usare la soglia inferiore di 3:1; il testo del corpo, le didascalie e le etichette dei moduli richiedono 4,5:1 per il livello AA. I rapporti vanno da 1:1 per colori identici a 21:1 per il nero su bianco. I contorni dei pulsanti, i bordi dei campi dei moduli, gli indicatori di stato attivo e le icone significative sono soggetti a una regola separata, il contrasto non testuale, che richiede 3:1 rispetto ai colori adiacenti.

Colori trasparenti ed esenzioni

Lo strumento di verifica richiede colori pieni. Per testo o sovrapposizioni semitrasparenti, calcola il colore effettivamente visualizzato miscelandolo con lo sfondo nel miscelatore di colori, usando l'opacità come peso, e verifica quello.

I controlli disabilitati, le decorazioni pure e i loghi sono esenti dalle regole sul contrasto. Il testo segnaposto in un campo del modulo non lo è: per questo i segnaposto grigio chiaro sono tra gli errori più comuni.

Come usarlo

1. Inserisci valori validi #RGB o #RRGGBB e qualsiasi percentuale richiesta.
2. Esegui l'operazione sui colori fissa e locale al browser.
3. Controlla i campioni di colore e copia il risultato o i valori della palette.

Privacy e limitazioni

I valori dei colori restano su questo dispositivo. Il risultato del contrasto è uno strumento di verifica matematico, non una garanzia generale di conformità WCAG; è comunque necessario verificare il contesto, il rendering dei caratteri, il contrasto degli elementi non testuali e gli stati dell'interfaccia utente.