Operativo
Accedi / Registrati
common.you_need_to_be_loggedin_to_add_tool_in_favorites
Controllo del contrasto del colore
Annuncio
Preview
Normal Text (16px)
Large Text (24px)
Contrast Ratio
21.00:1
WCAG Compliance
Normal Text
✓
AA Pass
✓
AAA Pass
Large Text (18pt+ or 14pt+ bold)
✓
AA Pass
✓
AAA Pass
UI Components & Graphics
✓
AA Pass
WCAG Standards
Normal Text
- AA: 4.5:1 minimum
- AAA: 7:1 minimum
Large Text
- AA: 3:1 minimum
- AAA: 4.5:1 minimum
UI Components
- AA: 3:1 minimum
Common Combinations
Black on White
White on Blue
White on Dark Gray
Inserisci le tue combinazioni di colori qui sotto per testarle con il nostro strumento di controllo del contrasto cromatico e vedere immediatamente se soddisfano gli standard di accessibilità.
Come funziona il nostro controllo del contrasto colore
Inserisci i colori di primo piano e di sfondo utilizzando i valori esadecimali RGB oppure selezionali direttamente con il selettore colore.
- Regola Alfa per modificare la trasparenza del colore di primo piano.
- Utilizza il cursore Luminosità per rendere il colore più chiaro o più scuro.
Il nostro strumento calcola quindi il rapporto di contrasto e lo confronta con le linee guida WCAG:
- WCAG 2.0 Livello AA
- Almeno 4.5:1 per il corpo del testo normale
- Almeno 3:1 per testo di grandi dimensioni
- WCAG 2.1 (interfaccia utente e grafica)
- Almeno 3:1 per icone, bordi e altri componenti dell'interfaccia
- Livello WCAG AAA
- Almeno 7:1 per il testo normale
- Almeno 4.5:1 per testo di grandi dimensioni
Testo grande significa:
- 14 pt (circa 18,66 px) e grassetto, oppure
- 18 pt (circa px) o più grande
Puoi utilizzare il contagocce nel selettore colori per acquisire i colori esatti da qualsiasi cosa sullo schermo.
Per i collegamenti che si basano solo sul colore per risaltare, utilizza il nostro controllo del contrasto colore per assicurarti che soddisfino gli standard di accessibilità e siano facili da leggere per tutti.