Verificatore Gratuito del Contrasto dei Colori ✅
Assicurati che i tuoi colori siano facili da leggere e accessibili! Controlla il rapporto di contrasto tra i tuoi colori primari e secondari per rispettare gli standard WCAG.
Esempio di testo primario
Rapporto di Contrasto:
3.28Testo normale:
Non riuscitoTesto grande:
AAComponenti UI:
AA
Il controllo del contrasto di ColorMagic segue le linee guida per l'accessibilità dei contenuti web (WCAG) per garantire la leggibilità:
Che cosa richiedono davvero AA e AAA
Il rapporto di contrasto confronta la luminosità di due colori. Va da 1:1, dove il testo è invisibile sullo sfondo, fino a 21:1 per il nero su bianco. Le WCAG fissano le soglie in base alla dimensione del testo, perché le lettere più grandi restano leggibili anche con meno contrasto.
AA è il livello atteso dalla maggior parte dei team ed è quello scritto nelle leggi sull'accessibilità di un numero crescente di paesi. AAA è un obiettivo più severo, che vale la pena raggiungere per il testo che si legge a lungo.
| Usato per | AA | AAA |
|---|---|---|
| Testo normale (sotto i 18.66px in grassetto o i 24px normali) | 4.5:1 | 7:1 |
| Testo grande (da 18.66px in grassetto o 24px in su) | 3:1 | 4.5:1 |
| Icone, bordi, campi dei moduli e altre parti dell'interfaccia | 3:1 | nessun livello dedicato |
I rapporti sono simmetrici: scambiare il colore del testo con quello dello sfondo dà lo stesso numero. È solo la dimensione del testo a cambiare la soglia da rispettare.
Abbinamenti che passano e abbinamenti che no
Ogni rapporto qui sotto è misurato con la stessa funzione usata dallo strumento qui sopra. Guarda quanto poco deve cambiare un colore per passare da bocciato a promosso.
- Esempio di testo primario#1f2937 / #ffffff14.68:1AAA
- Esempio di testo primario#ffffff / #5576ff3.87:1Solo testo grande
- Esempio di testo primario#6b7280 / #f3f4f64.39:1Solo testo grande
- Esempio di testo primario#ffffff / #b91c1c6.47:1AA
- Esempio di testo primario#111827 / #fde68a14.24:1AAA
- Esempio di testo primario#ffffff / #facc151.53:1Non riuscito
Il secondo abbinamento è il colore dei pulsanti di ColorMagic: il bianco sopra passa per il testo grande ma non per il testo di lettura. È un mancato passaggio per un soffio, tipico dei colori di marca scelti prima di verificare il contrasto.
Come sistemare un abbinamento bocciato
- Scurisci il testo invece di schiarire lo sfondo: di solito cambia meno il progetto e sposta di più il rapporto.
- Il testo grigio su uno sfondo grigio chiaro è il mancato passaggio più comune. Scendi di uno o due gradini nella scala dei grigi e passa.
- Giallo, lime e ciano sono così luminosi che il testo bianco non ci sta quasi mai. Usa un testo quasi nero.
- Tieni i colori di marca per i titoli grandi, i pulsanti e gli accenti, e usa una versione più scura della stessa tinta per il testo di lettura.
Domande frequenti
Quale rapporto di contrasto mi serve?
4.5:1 per il testo normale e 3:1 per il testo grande o gli elementi di interfaccia, per rispettare WCAG AA. Per AAA servono 7:1 e 4.5:1. Se devi ricordare un solo numero, ricorda 4.5:1.
Il contrasto vale anche per pulsanti e icone?
Sì. Ogni parte dell'interfaccia che va vista per essere usata — il bordo di un pulsante, il contorno di un campo, un'icona che porta un significato — ha bisogno di almeno 3:1 rispetto a ciò che ha dietro. Grafica decorativa e controlli disattivati sono esclusi.
Un rapporto alto è sempre meglio?
Non sempre. Il nero puro su bianco puro arriva a 21:1 e può risultare duro nelle letture lunghe; per alcune persone con dislessia o sensibilità alla luce è fastidioso. Un grigio molto scuro su un bianco sporco rispetta comunque AAA e si legge meglio.
E il testo sopra una foto o una sfumatura?
Misuralo sul punto più chiaro e su quello più scuro che il testo attraversa, e verifica che passino entrambi. In pratica di solito significa mettere uno strato pieno o semitrasparente dietro al testo.