Cosa misura un contrast checker?
Un contrast checker confronta la luminanza relativa di un colore in primo piano e di un colore di sfondo. Il risultato è mostrato come rapporto da 1:1, quando i colori sono visivamente identici, fino a 21:1, quando nero e bianco hanno il massimo contrasto.
Questo strumento riporta indicatori di superamento e fallimento in stile WCAG per testo normale e testo di grandi dimensioni. È utile per decisioni di design iniziali, stati dei componenti, token di tema e controlli rapidi prima di una revisione dell'accessibilità più completa.
Come leggere i risultati
| Check | Rapporto minimo | Meaning |
|---|---|---|
| AA testo normale | 4.5:1 | Obiettivo comune per il testo del corpo regolare. |
| AA testo grande | 3:1 | Si applica a testo più grande o più marcato dove le forme delle lettere sono più facili da leggere. |
| AAA testo normale | 7:1 | Obiettivo più rigoroso per il testo normale in contesti ad alta accessibilità. |
| AAA testo grande | 4.5:1 | Obiettivo più rigoroso per il testo di grandi dimensioni. |
Cosa questo strumento non dimostra
Un rapporto è un segnale forte, ma non è un audit completo di accessibilità. La leggibilità reale dipende anche dalla tipografia, dal peso del font, dagli stati hover/focus, dagli stati disabilitati, dai colori circostanti, dalla qualità dello schermo e dal fatto che il testo appaia su immagini o gradienti.
- Trasparenze e gradienti richiedono una revisione separata.
- Icone piccole e tratti sottili potrebbero richiedere un contrasto più elevato rispetto al testo vicino.
- I colori del brand possono superare il test in un'accoppiata e fallire in un'altra.
- Il contrasto per la scansione QR e il contrasto per la leggibilità del testo sono correlati ma non sono lo stesso controllo.
Modi per migliorare un contrasto debole
Scurisci il primo piano
Per sfondi chiari, avvicina il colore del testo a un neutro più scuro o a una tonalità del brand più intensa.
Schiarire lo sfondo
Piccole modifiche allo sfondo possono far passare un colore del brand senza cambiare il token del primo piano.
Aumentare la dimensione o il peso del testo
Testo di dimensioni maggiori o più marcato ha una soglia AA più bassa, ma necessita comunque di sufficiente separazione visiva.
Verificare ogni stato
Stati come hover, focus, disabilitato, selezionato e errore spesso usano coppie di colori diverse.
Domande frequenti
Si tratta di un audit completo di conformità WCAG?
No. Calcola soglie di contrasto in stile WCAG per coppie di colori. Una revisione completa verifica anche layout, comportamento da tastiera, semantica, stati di focus, alternative testuali e la tipografia realmente renderizzata.
Cosa conta come testo di grandi dimensioni?
Le linee guida WCAG considerano il testo grande come circa 18 pt in testo normale o 14 pt in grassetto e oltre. Nel lavoro web, verifica la dimensione e il peso effettivamente renderizzati, non solo l'etichetta di design.
Posso usare questo per colori con trasparenza?
Questo checker compatto usa colori sRGB opachi. Se la tua UI utilizza trasparenze, fonde prima il primo piano e lo sfondo effettivamente renderizzati, poi verifica la coppia risultante.
Passare l'AA significa che il design è sempre leggibile?
Non sempre. Font molto sottili, etichette UI piccole, sfondi affollati e display di bassa qualità possono comunque rendere il testo difficile da leggere. Considera il rapporto come uno dei segnali importanti.
È lo stesso contrasto dei codici QR?
No. Il contrasto nei codici QR influisce sull'affidabilità dello scanner, mentre questo strumento si concentra sulle soglie di leggibilità del testo. La matematica è correlata, ma la decisione pratica è diversa.