Controllo del contrasto del colore

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.

 Si può:

• 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 design 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.