Verifica contrasto colori (WCAG)

Perché il contrasto dei colori conta

Un grigio chiaro su bianco sembra raffinato sullo schermo del grafico, ma diventa faticoso da leggere sullo smartphone sotto il sole, su un vecchio portatile o per chi ha una vista debole. Inoltre la sensibilità al contrasto cala con l'età. Colori leggibili aiutano molte più persone di quanto si pensi.

Questo strumento per la verifica del contrasto dei colori calcola il rapporto di contrasto WCAG 2.x tra colore del testo e colore dello sfondo, indica criterio per criterio se la coppia raggiunge il livello AA o AAA e propone il colore corretto più vicino quando non basta.

Come si usa

1. In «Colore del testo» e «Colore dello sfondo» usa il selettore o scrivi un codice: HEX (#767676), RGB, HSL o un nome CSS come rebeccapurple. Il cursore «Opacità» gestisce la trasparenza.
2. Leggi il rapporto e la tabella dei risultati: ogni casella mostra un simbolo e la parola «Superato» o «Non superato», non solo un colore.
3. Guarda l'«Anteprima dal vivo»: testo normale, testo grande, grassetto, pulsante, link, campo di testo e icona.
4. Se la coppia non passa, «Colori corretti» propone un colore del testo o dello sfondo che raggiunge AA o AAA; «Applica» lo inserisce. «Inverti» scambia i due colori.
5. Per controllare un'intera guida di stile, incolla le coppie in «Verifica un elenco di coppie», una per riga, e premi «Verifica l'elenco».

«Copia il link di questi colori» crea un indirizzo che riapre la stessa coppia. Tutto viene calcolato nel browser.

Il rapporto di contrasto spiegato semplice

Ogni colore riceve una luminanza relativa, da 0 per il nero a 1 per il bianco, calcolata da rosso, verde e blu (il verde pesa di più). Il rapporto è (luminanza più chiara + 0,05) diviso (luminanza più scura + 0,05). Va da 1:1, due colori uguali, a 21:1, nero su bianco. La soglia si giudica sul valore esatto, senza arrotondare: 4,499 non raggiunge 4,5.

Con un colore semitrasparente lo strumento calcola prima il colore davvero visualizzato: nero al 50 % su bianco dà #808080, quindi 3,95:1. Uno sfondo trasparente viene posato sul bianco.

Soglie AA e AAA

• Testo normale: 4,5:1 per AA, 7:1 per AAA.
• Testo grande: 3:1 per AA, 4,5:1 per AAA. È grande il testo da 18 punti in su, circa 24 px, o da 14 punti in grassetto, circa 18,66 px.
• Componenti dell'interfaccia e grafica: 3:1 per il bordo di un campo, un'icona isolata, l'indicatore di focus o le linee di un grafico. Qui non esiste il livello AAA.

AA è il livello a cui puntano quasi tutti i siti. Nell'Unione europea alcune direttive impongono l'accessibilità ai siti pubblici e a molti servizi privati, e in Italia le norme e le linee guida nazionali rimandano a questi criteri WCAG. Gli obblighi precisi dipendono dalla tua attività: nel dubbio, chiedi a uno specialista.

La casella «Mostra il punteggio APCA» aggiunge il risultato di un metodo ancora sperimentale, pensato per future linee guida e oggi privo di valore ufficiale.

Consigli per colori leggibili

• Tieni la tinta del tuo marchio e cambia solo la luminosità, come fa «Colori corretti». Esempio: #999999 su bianco dà solo 2,85:1; lo strumento propone #767676, il grigio più chiaro che arriva a 4,5:1.
• Non affidare un'informazione al solo colore: aggiungi una parola, un'icona o una sottolineatura. La «Simulazione del daltonismo» mostra come vede la coppia chi confonde rosso e verde.
• Per un testo sopra una foto, verifica la zona più chiara dell'immagine.
• Se offri un tema scuro, controlla anche le coppie invertite.

Domande frequenti

Quale rapporto di contrasto devo raggiungere?

Almeno 4,5:1 per il testo corrente e 3:1 per il testo grande e gli elementi dell'interfaccia: è il livello AA. Punta a 7:1 per il corpo del testo se il tuo pubblico è più anziano.

Perché #777777 non passa se sembra uguale a #767676?

La soglia è rigida: #777777 dà 4,48:1 e #767676 dà 4,54:1. A occhio sono identici, ma il limite cade proprio in mezzo.

Il testo segnaposto di un campo deve essere contrastato?

Sì, è testo e deve arrivare a 4,5:1. Solo i controlli disattivati sono esclusi dalle linee guida WCAG.

I miei colori vengono inviati da qualche parte?

No. La coppia attuale e il tuo elenco restano solo su questo dispositivo per la prossima visita.