Che cosa misura il rapporto di contrasto
Confronta la luminanza del testo con quella dello sfondo, su una scala da 1:1 (lo stesso colore) a 21:1 (nero su bianco). Non dipende dalla tonalità: un rosso e un verde con la stessa luminanza hanno un contrasto bassissimo anche se sembrano molto diversi, ed è proprio la coppia che chi è daltonico non distingue.
Livelli AA e AAA
- AA, testo normale: 4,5:1. Il minimo richiesto dalla maggior parte delle leggi sull’accessibilità, come la direttiva europea e la norma EN 301 549.
- AA, testo grande: 3:1. Il testo si considera grande da 24 px, o da 18,66 px in grassetto (18 e 14 punti).
- AAA: 7:1 e 4,5:1. Il livello rafforzato. Consigliato per testi lunghi, come articoli o documentazione.
- Icone e controlli: 3:1. Bordi dei campi dei moduli, icone senza testo e indicatore del focus (criterio 1.4.11).
Il rapporto non si arrotonda: 4,49:1 non rispetta AA anche se manca un centesimo. Per questo il grigio più chiaro che
passa AA sul bianco è #767676 (4,54:1), mentre #777777 non ci arriva più.
Come correggere un contrasto insufficiente
La soluzione più semplice è scurire il testo (o schiarirlo, se lo sfondo è scuro) senza cambiare la tonalità, ed è ciò che fa il suggerimento dello strumento: mantiene il colore del brand e regola solo la luminosità. Se il colore non si può toccare, usalo su elementi grandi, come titoli o sfondi dei pulsanti, e lascia il testo piccolo in un colore più contrastato.
Testo sopra le immagini
Il contrasto di un testo sopra una foto cambia da un punto all’altro, e nessuno strumento può garantirlo. La soluzione sicura è mettere uno strato di colore semitrasparente o un gradiente tra la foto e il testo, e verificare il caso peggiore. L’anteprima usa un’immagine del generatore di ximg.es con gli stessi colori, così vedi come appare il testo di un segnaposto:
https://ximg.es/600x300/{sfondo}/{testo}.png?text=Ciao