Contrast Checker
WCAG contrast check
WCAG contrast check Funziona localmente nel tuo browser
The quick brown fox
Small body text at 14px
| Normal text (AA) | needs 4.5:1 | Pass |
| Normal text (AAA) | needs 7:1 | Pass |
| Large text 18pt+ (AA) | needs 3:1 | Pass |
| Large text 18pt+ (AAA) | needs 4.5:1 | Pass |
| UI components and graphics (AA) | needs 3:1 | Pass |
Text: #1a1a1a Background: #ffffff Contrast ratio: 17.40:1 Normal text (AA) (needs 4.5:1): Pass Normal text (AAA) (needs 7:1): Pass Large text 18pt+ (AA) (needs 3:1): Pass Large text 18pt+ (AAA) (needs 4.5:1): Pass UI components and graphics (AA) (needs 3:1): Pass
About the
Il controllo del contrasto misura il rapporto di contrasto tra il colore del testo e il colore dello sfondo utilizzando la formula della luminanza WCAG e indica quali livelli di accessibilità supera quella coppia. Questo è il controllo che decide se il corpo del testo è effettivamente leggibile: un rapporto di 4,5 a 1 è il minimo per il testo normale, 3 a 1 per il testo di grandi dimensioni e per i limiti dell'interfaccia e 7 a 1 per la conformità migliorata. Giudicare il contrasto a occhio è inaffidabile, perché l’occhio è molto più sensibile al verde che al blu, motivo per cui un giallo che sembra luminoso e un blu che sembra scuro possono ottenere punteggi quasi identici.
Where people use the
- Verifica se il corpo del testo su uno sfondo colorato soddisfa AA.
- Scegliere tra testo in bianco e nero per il colore di un pulsante.
- Controllo di una tavolozza esistente prima di una riprogettazione.
- Documentare una decisione sull'accessibilità in un ticket.
How to use the
- 1
Imposta il colore del testo
Digita un valore esadecimale come 1a1a1a oppure utilizza il selettore colori. È accettata una abbreviazione a tre cifre come f0a.
- 2
Imposta il colore dello sfondo
Lo stesso per lo sfondo. L'anteprima si aggiorna man mano che si modifica uno dei due.
- 3
Leggi il rapporto
Il numero va da 1:1, colori identici, a 21:1, nero su bianco. Più alto significa più leggibile.
- 4
Controlla il livello di cui hai bisogno
Il corpo del testo normale richiede 4,5 a 1 per AA e 7 a 1 per AAA. I titoli da 18pt o 14pt in grassetto e i bordi dell'interfaccia utente richiedono un rapporto di 3 a 1.
- 5
Guarda l'anteprima e il numero
Una coppia può passare sulla carta e apparire comunque scadente anche su dimensioni ridotte o su uno schermo di bassa qualità. Se sembra difficile da leggere, è difficile da leggere.
Suggerimenti e migliori pratiche
- Scurisci un colore per il testo, mantieni la versione più luminosa per i riempimenti.
- Controlla la dimensione più piccola in cui verrà effettivamente utilizzato il testo.
- Anche i bordi e le icone necessitano di 3 a 1, non solo il testo.
Domande frequenti
Qual è la formula del rapporto di contrasto?
Ciascun colore viene convertito in luminanza relativa utilizzando i pesi standard, 0,2126 per il rosso, 0,7152 per il verde e 0,0722 per il blu, dopo la correzione gamma. Il rapporto è quindi la luminanza più chiara più 0,05 divisa per quella più scura più 0,05. Il risultato varia da 1:1 a 21:1.
Perché il colore del mio marchio fallisce?
Perché la maggior parte dei colori mezzi toni saturi non può raggiungere un rapporto di 4,5 a 1 rispetto al bianco. La soluzione abituale è scurire il colore per l'uso del testo mantenendo la versione più chiara per i riempimenti grandi, che è esattamente ciò che fa la maggior parte dei sistemi di progettazione con il colore primario.
Superare il rapporto è sufficiente per essere accessibile?
È necessario ma non sufficiente. Testo molto grande o molto piccolo, caratteri sottili, testo sopra immagini e alcune forme di deficit della visione dei colori influiscono tutti sulla leggibilità oltre il rapporto. Prova con utenti reali dove puoi.
Ha importanza la direzione, luce su buio o buio su luce?
No. Il rapporto è simmetrico, quindi nero su bianco e bianco su nero ottengono entrambi un punteggio di 21:1. Ciò che differisce nella pratica è l'abbagliamento e il peso percepito, che è un giudizio di progettazione piuttosto che di conformità.
Cosa conta come testo di grandi dimensioni?
In termini WCAG, 18pt o superiore oppure 14pt o superiore se in grassetto. Nei pixel CSS è di circa 24 px o circa 18,66 px in grassetto.
Dove avviene il calcolo?
Interamente nel tuo browser. Non è stato caricato nulla, quindi puoi controllare i colori da una linea guida del marchio che non è ancora pubblica.