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 di contrasto dei colori
Inserisci i colori in primo piano e sfondo usando valori esadecimali RGB, oppure selezionali direttamente con il Color Picker.
Puoi:
- Regola Alpha per cambiare la trasparenza del colore in primo piano.
- Usa il cursore Lightness per far sembrare il colore più chiaro o più scuro.
Il nostro strumento poi calcola il rapporto di contrasto e lo confronta con le linee guida WCAG:
- WCAG 2.0 Livello AA
- Almeno 4,5:1 per il testo corporeo normale
- Almeno 3:1 per il testo grande
- WCAG 2.1 (interfaccia utente e grafica)
- Almeno 3:1 per icone, bordi e altri componenti dell'interfaccia
- WCAG Livello AAA
- Almeno 7:1 per il testo normale
- Almeno 4.5:1 per il testo grande
Testo grande significa o poi:
- 14 punti (circa 18,66 px) e grassetto, oppure
- 18 pt (circa px) o più
Puoi usare il contagocce nel Color Picker per catturare colori esatti da qualsiasi cosa sia sullo schermo. Rende facile testare disegni reali, pulsanti o sfondi.
Per link che si basano solo sul colore per distinguersi, usa il nostro controllo di contrasto per il colore per assicurarti che rispettino gli standard di accessibilità e siano facili da leggere per tutti.