Come si usa
- Imposta il colore dello sfondo e quello del testo con i selettori di colore o scrivendo i codici HEX.
- Leggi il rapporto di contrasto mostrato come numero, per esempio 4.50:1, e guarda la scheda di anteprima.
- Controlla i badge PASS o FAIL per testo normale AA, testo grande AA e testo normale AAA.
Il controllo calcola il rapporto di contrasto come lo definiscono le Web Content Accessibility Guidelines. Ogni colore viene convertito in luminanza relativa con la formula sRGB, e il rapporto è la luminanza più chiara più 0,05, divisa per la luminanza più scura più 0,05. Il risultato è mostrato con due decimali, da 1:1 per colori identici fino a 21:1 per il nero su bianco. I colori predefiniti sono bianco e nero.
Vengono mostrati tre risultati. Il testo normale al livello AA richiede un rapporto di almeno 4.5. Il testo grande al livello AA richiede almeno 3. Il testo normale al livello AAA richiede almeno 7. Ciascuno è segnato PASS o FAIL. Anche il rapporto stesso è colorato in base al risultato. Secondo le WCAG, per testo grande si intende all'incirca 18 punti normale o 14 punti in grassetto, quindi usa il risultato del testo grande solo se il tuo testo ha quella dimensione.
Una scheda di anteprima usa i tuoi due colori, con un titolo e una riga di testo di esempio, così puoi valutare i colori oltre al numero. Un punteggio che supera la soglia non garantisce da solo una buona leggibilità, perché contano anche peso e dimensione del carattere e l'ambiente circostante.
I colori vanno inseriti come codici HEX di 6 cifre. Il calcolo viene eseguito nel tuo browser.
Domande frequenti
Che rapporto mi serve?
Per WCAG AA, il testo normale richiede 4.5:1 e il testo grande 3:1. Per AAA, il testo normale richiede 7:1. Lo strumento mostra il risultato per ciascuno.
Cosa conta come testo grande?
Nelle WCAG, il testo di circa 18 punti o più, oppure di 14 punti in grassetto o più.
Quale colore va dove?
Lo strumento considera un colore come sfondo e l'altro come testo, ma il rapporto è lo stesso in entrambi i casi.
Perché il mio codice HEX breve non funziona?
Inserisci la forma completa a 6 cifre, come #333333 invece di #333.
Controlla gli elementi che non sono testo?
Fornisce solo le soglie per il testo. Il rapporto viene mostrato, quindi puoi confrontarlo tu con l'indicazione di 3:1 per i componenti dell'interfaccia.