Verificatore di contrasto dei colori

Come usare il verificatore di contrasto dei colori

1. 1. Inserisci i due colori. Scrivi ciascuno come HEX (#777777), rgb(), hsl() o un nome CSS, oppure usa il selettore. Scambia li inverte, utile per controllare le versioni chiaro su scuro e scuro su chiaro.
2. 2. Leggi il rapporto e la tabella. Il rapporto va da 1:1 (colori identici) a 21:1 (nero su bianco). La tabella lo confronta con ogni requisito WCAG e indica Superato o Non superato a parole, non solo con il colore.
3. 3. Stabilisci la dimensione. Il testo grande ha requisiti più bassi. L'anteprima mostra testo normale, testo grande, testo grande in grassetto e un controllo con bordo, così puoi valutare il tuo caso.
4. 4. Correggi una coppia che non supera il test. Scegli il livello che vuoi raggiungere e usa il colore suggerito per il testo o per lo sfondo. Lo strumento mantiene la tinta e cambia solo la luminosità, con il passo minimo che supera il test.

Che cosa richiede il WCAG 2.2

Le Web Content Accessibility Guidelines (WCAG) 2.2 fissano i rapporti minimi di contrasto in tre criteri di successo. Il rapporto è (L₁ + 0,05) ÷ (L₂ + 0,05), dove L₁ è la luminanza relativa del colore più chiaro e L₂ quella del più scuro.

Il testo grande è di almeno 18 pt, o 14 pt in grassetto — 24 px e circa 18,7 px su uno schermo a 96 dpi. Loghi, testo puramente decorativo e controlli inattivi sono esclusi dal criterio 1.4.3. La regola 3:1 del criterio 1.4.11 riguarda le parti di un controllo necessarie a individuarlo (il bordo di un pulsante, il contorno di una casella), i suoi stati come il focus, e la grafica che il lettore deve capire per comprendere il contenuto, come le linee di un grafico.

Come si calcola il rapporto

Ogni canale sRGB viene portato a 0–1 e linearizzato: c ÷ 12,92 se c ≤ 0,04045, altrimenti ((c + 0,055) ÷ 1,055)^2,4. La luminanza relativa è poi 0,2126 R + 0,7152 G + 0,0722 B. Il verde pesa di più perché l'occhio è più sensibile a questo colore.

Il WCAG non arrotonda: un rapporto di 4,4999 non supera 4,5. Il verificatore mostra quindi il rapporto arrotondato per difetto a due decimali, così un valore appena sotto soglia non compare mai come superato.

Verificare diapositive, poster e figure

• Diapositive e poster non sono pagine web, ma i rapporti WCAG sono il parametro accettato anche per loro. Il testo del corpo su una diapositiva è di solito grande (24 px equivalgono a 18 pt); didascalie, note a piè di pagina ed etichette degli assi non lo sono, quindi verificale come testo normale.
• Punta sopra il minimo per la proiezione. Un proiettore in una stanza illuminata riduce il contrasto per tutti. Scegli AAA (7:1) per il testo di una diapositiva che proietterai in una stanza luminosa.
• Il testo sopra una fotografia o un gradiente non ha un unico sfondo. Verifica le aree più chiare e più scure dietro al testo, oppure metti il testo su un pannello pieno.
• Grafici e figure ricadono nel criterio 1.4.11: linee, barre e marcatori richiedono 3:1 rispetto allo sfondo. Il colore da solo non dovrebbe trasmettere il significato — vedi il Simulatore di daltonismo.
• I colori traslucidi vengono appiattiti prima della misura: lo sfondo sopra il bianco, poi il testo sopra lo sfondo. In una pagina con qualcosa di diverso dietro, quel colore va inserito direttamente.

Una nota su APCA

L'Accessible Perceptual Contrast Algorithm (APCA) è un metodo candidato nella bozza di lavoro del WCAG 3, che tiene conto di dimensione, peso e polarità del testo. È una bozza, non un requisito, e nessuna legge o standard chiede oggi di usarlo. I rapporti WCAG 2.x — quelli di questo strumento — restano la base per dichiarare la conformità.

Domande frequenti

Qual è un buon rapporto di contrasto?

4,5:1 o più per il testo normale soddisfa il WCAG AA, e 7:1 soddisfa l'AAA. Il testo grande richiede 3:1 per l'AA e 4,5:1 per l'AAA. Nero su bianco è il massimo, 21:1. Sotto 3:1 il testo è difficile da leggere per molte persone, anche con una buona vista.

Che cosa conta come testo grande nel WCAG?

Testo di almeno 18 pt (24 px) in tondo, oppure almeno 14 pt (circa 18,7 px) in grassetto. La dimensione si misura come appare a schermo, quindi un carattere da diapositiva che sembra piccolo su un volantino può essere grande quando viene proiettato.

Il requisito di contrasto vale anche per icone e linee dei grafici?

Sì, tramite il criterio di successo 1.4.11 Contrasto dei non testi: componenti dell'interfaccia e grafica necessari a capire il contenuto devono avere almeno 3:1 rispetto ai colori adiacenti. La grafica decorativa e i componenti inattivi sono esclusi.

Perché il mio colore mostra 4,49 quando il rapporto è quasi 4,5?

Perché il WCAG confronta il rapporto esatto e non concede alcun arrotondamento. Una coppia a 4,4999:1 non raggiunge il requisito di 4,5:1, quindi lo strumento mostra il valore arrotondato per difetto a due decimali invece di 4,50.

Come funzionano i colori suggeriti?

Lo strumento mantiene tinta e saturazione del tuo colore e sposta la sua luminosità HSL in su o in giù a piccoli passi, restituendo il valore più vicino che raggiunge il rapporto desiderato come codice HEX a 8 bit. Se nessuna luminosità può raggiungerlo — per esempio 7:1 rispetto a un grigio medio — lo dice e suggerisce di cambiare l'altro colore.

APCA è migliore del rapporto WCAG?

APCA modella la percezione in modo più fedele, soprattutto per la modalità scura e il testo sottile, ma fa parte di una bozza (WCAG 3), non di un requisito accettato. Le leggi sull'accessibilità e gli standard per gli appalti che citano il WCAG 2.x usano il rapporto calcolato qui.