Verifica del rapporto di contrasto (criteri WCAG)

Indicate due colori per calcolare il rapporto di contrasto secondo le WCAG (Web Content Accessibility Guidelines) e verificare la conformità ai livelli AA e AAA.

I requisiti WCAG sul rapporto di contrasto

Livello Elemento Rapporto richiesto
AA (minimo) Testo normale almeno 4,5:1
AA (minimo) Testo grande (da 18 pt, oppure da 14 pt in grassetto) almeno 3:1
AA (minimo) Componenti di interfaccia e oggetti grafici almeno 3:1
AAA (elevato) Testo normale almeno 7:1
AAA (elevato) Testo grande almeno 4,5:1

Consigli per l'uso

  • I colori del testo e dello sfondo si possono scegliere con il selettore oppure digitando direttamente il codice esadecimale (sono accettate sia la forma `#RRGGBB` sia `#RGB`).
  • Il pulsante «Scambia i colori» inverte rapidamente testo e sfondo per confrontarli: comodo quando valutate più varianti cromatiche per un logo o un'icona.
  • Il livello AAA è più severo del livello AA. Per un sito comune si considera minimo raccomandato il livello AA, mentre per i contenuti in cui la leggibilità è cruciale è preferibile puntare al livello AAA.
  • Il requisito per «componenti di interfaccia e oggetti grafici» (almeno 3:1), che riguarda per esempio i bordi dei pulsanti e le icone, è un criterio di successo introdotto con le WCAG 2.1 (1.4.11).

Domande frequenti

Le WCAG (Web Content Accessibility Guidelines) sono le linee guida internazionali per rendere i contenuti web accessibili al maggior numero possibile di persone. Il rapporto di contrasto esprime con un valore compreso fra 1:1 (nessuna differenza) e 21:1 (il massimo, fra bianco e nero) la differenza di luminosità fra testo e sfondo, e serve a valutare oggettivamente la leggibilità per chi ha disabilità visive, per le persone anziane o per chi guarda lo schermo del telefono in pieno sole.

Perché più i caratteri sono grandi, più le forme si distinguono, e restano leggibili anche con un contrasto minore. Le WCAG definiscono «testo grande» quello da 18 punti (circa 24 px) o da 14 punti (circa 18,66 px) in grassetto, applicandovi un requisito più permissivo: almeno 3:1 per il livello AA.

Il livello AA delle WCAG 2.1 è il requisito minimo richiamato dalle normative e dalle linee guida di molti Paesi, per esempio l'ADA statunitense o la direttiva europea sull'accessibilità del web. Il livello AAA è uno standard più elevato: non è obbligatorio, ma viene raccomandato per i contenuti in cui la leggibilità conta particolarmente, come i siti degli enti pubblici.

Nelle WCAG 2.x si calcola anzitutto la «luminanza relativa» di ciascun colore, rimuovendo la correzione gamma dai valori sRGB. Detta poi L1 la luminanza del colore più chiaro e L2 quella del più scuro, il rapporto è (L1+0,05)/(L2+0,05). Il procedimento è pubblicato nelle specifiche tecniche del W3C.
Tool-kun

A proposito — come sono nati i criteri di accessibilità

Le WCAG (Web Content Accessibility Guidelines) sono linee guida internazionali elaborate soprattutto dal W3C (World Wide Web Consortium); la prima versione, WCAG 1.0, uscì nel 1999. Già allora era chiaro che ridurre le barriere incontrate da chi naviga con tecnologie assistive, come i lettori di schermo, fosse una questione centrale.

L'attenzione al rapporto di contrasto nasce dalla varietà delle condizioni visive: una quota non trascurabile della popolazione ha un'alterazione della percezione dei colori (nei maschi circa uno su venti), con l'età l'ingiallimento del cristallino riduce la sensibilità al contrasto e in pieno sole lo schermo del telefono diventa difficile da leggere. Fissare una soglia numerica ha permesso ai progettisti di verificare l'accessibilità in modo oggettivo, senza affidarsi al solo giudizio soggettivo sulla «leggibilità».

Oggi in molti Paesi l'accessibilità del web è un requisito di legge — nell'Unione europea la direttiva 2016/2102 vincola i siti del settore pubblico e l'European Accessibility Act estende gli obblighi dal 2025 a numerosi servizi privati — e la verifica del contrasto è ormai un controllo di qualità di base, imprescindibile nella realizzazione di un sito aziendale.

Leggi le curiosità collegate

Vedi tutte le curiosità

Chi consulta questo strumento guarda anche

Convertitore di Codice Colore RGB ⇄ Hex — Gratuito, Senza Registrazione

Converti all'istante i valori RGB in decimale in codici colore esadecimali e viceversa. Pratico per CSS, strumenti di design e verifica rapida dei codici colore — gratuito, senza registrazione.

Convertitore fra modelli di colore (RGB, HSL, HSV, CMYK)

Indicate un colore con il codice esadecimale o con il selettore e ottenete contemporaneamente i valori nei quattro sistemi RGB, HSL, HSV (HSB) e CMYK.

Simulatore di daltonismo (deficit della visione dei colori)

Strumento gratuito che simula in modo approssimato come viene percepito un colore da chi ha una protanopia, una deuteranopia o una tritanopia.

Raccolta di palette di colori — colori web standard e Material Design pronti da copiare

Elenco delle palette di uso più comune nel design — colori web standard, sistema cromatico Material Design, scale di grigi — con il relativo codice HEX. Basta un clic per copiarlo.

Estrai i colori da un'immagine (estrattore di colori dominanti)

Caricate un'immagine per estrarre automaticamente i colori dominanti presenti in una fotografia o in un'illustrazione. Tutta l'elaborazione avviene nel browser e l'immagine non viene inviata a un server.

Da RGBA a RGB (fusione con il colore di sfondo)

Indicate un colore di primo piano semitrasparente (RGBA) e un colore di sfondo per calcolare, tramite fusione alfa, il colore RGB opaco che ne risulta. Utile per creare colori di ripiego negli ambienti che non supportano...