Calcolo del rapporto di contrasto secondo le linee guida WCAG 2.1 / 2.2
Il rapporto di contrasto tra il testo e lo sfondo determina in modo diretto la leggibilità dei contenuti digitali. Lo strumento Verifica Contrasto applica la formula ufficiale definita dagli standard WCAG 2.1 / 2.2 per calcolare la differenza di luminanza relativa tra due colori. Questo calcolo produce un valore numerico espresso come rapporto, che spazia da un minimo di 1:1 (quando il testo e lo sfondo sono identici e non vi è alcun contrasto) fino a un massimo di 21:1 (che rappresenta il contrasto massimo, come nel caso del testo nero su sfondo bianco).
La conformità ai requisiti di accessibilità web si basa sul superamento di specifiche soglie numeriche all'interno di questa scala. L'analisi del contrasto consente a designer, sviluppatori e team di gestione dei contenuti di verificare scientificamente se le combinazioni cromatiche scelte garantiscono una corretta fruizione delle informazioni da parte di tutti gli utenti, inclusi coloro che presentano disabilità visive.
Formati colore supportati e configurazione iniziale
Lo strumento accetta l'inserimento dei colori attraverso diversi formati standard comunemente utilizzati nello sviluppo web e nel design digitale:
- Valori esadecimali: ad esempio
#1a1a1a. - Valori RGB: espressi nella sintassi
rgb(26, 26, 26). - Valori HSL: basati su tonalità, saturazione e luminosità.
All'avvio, lo strumento si presenta configurato con i seguenti valori predefiniti:
- Colore del testo:
#4f46e5 - Colore di sfondo:
#ffffff
Questa combinazione iniziale genera un rapporto di contrasto pari a 6.29. L'interfaccia include un pulsante di inversione che permette di scambiare rapidamente il colore del testo con quello dello sfondo.
Nel caso in cui venga inserito un valore non riconosciuto, il sistema mostra messaggi di errore specifici per guidare l'utente nella correzione:
- Se il colore del testo non è valido, compare l'avviso: "Inserisca un colore del testo valido, come #1a1a1a o rgb(26, 26, 26)."
- Se il colore dello sfondo non è valido, compare l'avviso: "Inserisca un colore di sfondo valido, come #ffffff o rgb(255, 255, 255)."
Differenze tra i livelli di accessibilità AA e AAA
Le linee guida WCAG suddividono i requisiti di conformità in livelli di severità crescente, denominati AA e AAA. Il superamento di questi livelli dipende dalla dimensione del testo e dalla destinazione d'uso degli elementi grafici:
| Elemento analizzato | Livello AA (Soglia minima) | Livello AAA (Soglia minima) |
|---|---|---|
| Testo normale | Rapporto minimo di 4.5:1 | Rapporto minimo di 7:1 |
| Testo grande | Rapporto minimo di 3:1 | Rapporto minimo di 4.5:1 |
| Interfaccia e grafica | Rapporto minimo di 3:1 (soglia singola) | Non applicabile (soglia singola) |
Il livello AA rappresenta lo standard di conformità generalmente richiesto per la maggior parte dei siti web e delle applicazioni pubbliche. Il livello AAA impone invece i vincoli più severi, necessari per garantire la massima leggibilità possibile anche in condizioni visive o ambientali sfavorevoli.
Definizione di testo normale e testo grande
La distinzione tra testo normale e testo grande è fondamentale per l'applicazione corretta delle soglie di contrasto, poiché l'occhio umano percepisce più facilmente il contrasto su tratti di spessore maggiore. Le specifiche WCAG definiscono i limiti dimensionali in questo modo:
- Testo grande: si intende un testo con una dimensione a partire da 18pt (che corrispondono a circa 24px), oppure a partire da 14pt (circa 18.5px) qualora sia applicato lo stile grassetto.
- Testo normale: include qualsiasi testo con dimensioni inferiori ai limiti sopra indicati.
Poiché il testo grande mantiene una buona leggibilità anche con differenze di luminanza inferiori, le soglie richieste per il superamento dei test sono ridotte (3:1 per il livello AA e 4.5:1 per il livello AAA) rispetto a quelle applicate al testo normale.
Contrasto per componenti dell'interfaccia e grafica
La conformità visiva non riguarda esclusivamente i blocchi di testo, ma si estende anche agli elementi interattivi e ai componenti grafici essenziali per la comprensione dell'interfaccia, come bordi di campi di input, icone attive e pulsanti.
La riga denominata "Interfaccia e grafica" valuta la combinazione di colori rispetto a una singola soglia minima di 3:1. A differenza del testo, questa categoria non prevede una distinzione tra i livelli AA e AAA; lo strumento restituisce un unico verdetto basato sul superamento o meno di questo limite di 3:1.
Interpretazione dei verdetti di conformità
In base ai valori inseriti e al rapporto calcolato, lo strumento elabora una sintesi dello stato di conformità visualizzando uno dei seguenti verdetti:
- "Supera i livelli AA e AAA per il testo normale." – Indica che la combinazione soddisfa i requisiti più restrittivi per qualsiasi dimensione di testo.
- "Supera il livello AA per il testo normale." – Il contrasto è sufficiente per l'uso comune del testo normale, ma non soddisfa i criteri del livello AAA per i testi piccoli.
- "Supera il livello AA solo per il testo grande." – La combinazione può essere utilizzata esclusivamente per titoli o testi di grandi dimensioni, poiché il rapporto è inferiore a 4.5:1.
- "Sotto il minimo AA — aumenti il contrasto." – La combinazione non soddisfa i requisiti minimi di accessibilità e deve essere modificata aumentando la differenza di luminosità tra i due colori.
Elaborazione locale dei dati e riservatezza
Ogni verifica viene eseguita nel Suo browser. Nessun dato inserito viene caricato su BroBroGo. I calcoli matematici per la determinazione della luminanza relativa e del rapporto di contrasto avvengono interamente all'interno del client dell'utente, garantendo che le scelte cromatiche e i codici colore inseriti non vengano trasmessi a server esterni.
Domande frequenti
Cosa significano i risultati AA e AAA?
Il livello AA è l'obiettivo standard per la maggior parte dei siti: richiede un rapporto di almeno 4.5:1 per il testo normale e 3:1 per il testo grande. Il livello AAA è più rigoroso: richiede 7:1 per il testo normale e 4.5:1 per il testo grande. Il rapporto spazia da 1:1 (nessun contrasto) a 21:1 (nero su bianco).
Cosa si intende per testo grande?
Testo a partire da 18pt (circa 24px), o 14pt (circa 18.5px) se in grassetto. Il testo più grande rimane leggibile anche con un contrasto inferiore, per cui supera il livello AA a 3:1 e il livello AAA a 4.5:1, anziché i limiti più severi previsti per il testo normale.
Quali formati di colore posso inserire?
Può inserire un valore esadecimale come #1a1a1a, un valore rgb() come rgb(26, 26, 26) o un valore hsl(), oppure fare clic sui campioni per scegliere un colore. Usi il pulsante di inversione per scambiare rapidamente il colore del testo con quello dello sfondo.
Questo strumento usa le WCAG 2 o il nuovo metodo APCA?
Utilizza la formula WCAG 2.1 / 2.2, che rappresenta lo standard attuale per le verifiche di accessibilità. APCA è un metodo più recente basato sulla percezione visiva, ancora in fase di definizione per le WCAG 3; pur essendo promettente, non è ancora uno standard di conformità ufficiale, pertanto i risultati di superamento qui mostrati non lo utilizzano.