Assicurati che tutti possano leggere il tuo testo
Un testo grigio chiaro su sfondo bianco, un testo bianco su un pulsante pastello o dei link blu su sfondo scuro possono sembrare eleganti in un progetto grafico, ma risultare illeggibili per gli utenti reali. Questo strumento per la verifica del contrasto misura il rapporto di contrasto tra il colore del testo e quello dello sfondo, indicandoti all'istante se soddisfa le direttive sull'accessibilità (WCAG) di livello AA e AAA. In caso contrario, ti suggerisce il colore più simile che rispetta i requisiti.
Funzionalità
- Rapporto di contrasto da 1:1 a 21:1.
- Risultati WCAG 2 AA e AAA per testo normale, testo grande e componenti UI.
- Qualsiasi formato di colore: HEX, RGB, HSL o nomi dei colori CSS.
- Anteprima in tempo reale con titolo, corpo del testo e testo piccolo.
- Suggerimenti di colori accessibili che mantengono la tua tonalità.
- Pulsante inverti per verificare le versioni chiaro su scuro.
Requisiti WCAG in sintesi
| Contenuto | AA | AAA |
|---|---|---|
| Testo normale | 4.5:1 | 7:1 |
| Testo grande (≥ 24 px, o ≥ 19 px in grassetto) | 3:1 | 4.5:1 |
| Componenti UI e grafica | 3:1 | — |
| Loghi e testo decorativo | Nessun requisito | Nessun requisito |
Combinazioni comuni
| Testo | Sfondo | Rapporto | Testo normale AA |
|---|---|---|---|
| #000000 | #FFFFFF | 21:1 | Superato |
| #767676 | #FFFFFF | 4.54:1 | Superato (il grigio più chiaro ammesso) |
| #999999 | #FFFFFF | 2.85:1 | Non superato |
| #FFFFFF | #0EA5E9 | 2.77:1 | Non superato |
| #FFFFFF | #0369A1 | 5.93:1 | Superato |
Strumenti correlati
Converti i colori tra vari formati con il Convertitore colori, crea una palette completa con il Generatore di palette colori, oppure estrai i colori esatti da uno screenshot con il Selettore colori da immagine.