Come verificare il contrasto dei colori di un sito

Identifica il testo e lo sfondo effettivo

Parti da un elemento preciso: un paragrafo, un’etichetta del modulo o il testo di un pulsante. Annota il colore delle parole e lo sfondo direttamente sottostante. Il colore definito da una classe può essere sostituito da un’altra regola: controlla gli stili calcolati dell’elemento nel browser. Anche la trasparenza cambia il colore effettivo mescolandolo allo sfondo. Lo strumento accetta colori HEX opachi di tre o sei cifre. Se il progetto usa trasparenza, determina prima il colore risultante dalla composizione. Non sostituire automaticamente il valore CSS con un colore prelevato da una schermata compressa: i bordi delle lettere possono contenere molti toni dovuti all’antialiasing. Conserva i codici originali per confrontarli.

Interpreta rapporto e quattro risultati

Inserisci entrambi i codici e premi Verifica contrasto. Il rapporto 1:1 indica colori con uguale luminanza; il nero sul bianco produce 21:1. I quattro risultati distinguono AA e AAA per testo normale e grande. AA richiede 4,5:1 per testo normale e 3:1 per grande; AAA richiede rispettivamente 7:1 e 4,5:1. Il confronto usa il valore completo prima dell’arrotondamento visualizzato. È quindi utile scegliere una coppia con un certo margine rispetto alla soglia. Un risultato conforme riguarda solo quel contrasto del testo. Non certifica tutta la pagina, che dipende anche da tastiera, etichette, ordine dei contenuti e altri criteri da verificare nell’interfaccia reale.

Esegui una prova riproducibile

Carica l’esempio bianco e nero e verifica il rapporto 21:1 con tutti e quattro i risultati conformi. Cambia poi il testo in #777777 su #FFFFFF. Il rapporto è circa 4,478:1: il testo normale non soddisfa AA, anche se un numero con pochi decimali può sembrare vicino a 4,5. Ripristina una tonalità più scura e confronta di nuovo. Modifica una sola variabile alla volta per capire la causa del miglioramento. Salva entrambi i codici con il risultato e il componente controllato. Il TXT scaricato conserva l’uscita, ma una registrazione utile indica anche dove quei colori vengono impiegati. Ripeti la verifica dopo modifiche al foglio di stile.

#000000 / #FFFFFF → 21:1
#777777 / #FFFFFF → 4.478089453577214:1

Controlla le dimensioni senza confondere px e rem

La categoria di testo grande inizia a 24 pixel CSS con peso normale, oppure circa 18,67 pixel in grassetto. Controlla dimensione e peso calcolati, non soltanto l’aspetto dell’anteprima. Se il progetto usa rem, imposta nel convertitore la base effettiva dell’elemento html. Con una radice di 16 px, 1,5 rem corrispondono a 24 px; con una radice di 20 px, corrispondono a 30 px. La base iniziale è una comodità, non una misurazione della pagina. Cambiare unità non rende automaticamente leggibile un testo troppo piccolo o sottile. Verifica anche il carattere scelto e un campione rappresentativo del contenuto finale.

Rivedi stati e sfondi variabili

Controlla separatamente collegamenti visitati, indicatori di focus, pulsanti al passaggio del puntatore e messaggi di errore. Non usare la sola differenza di colore per comunicare uno stato: aggiungi testo, un’icona comprensibile o un altro segnale. Se usi il generatore di sfumature, ricorda che uno sfondo a due colori contiene toni intermedi e cambia con le dimensioni dell’elemento. Due campioni non convalidano automaticamente tutta la transizione. Esamina le zone sotto il testo reale oppure inserisci una superficie uniforme dietro le parole. Infine prova il componente nel suo contesto, con lo zoom del browser e una finestra stretta. Conserva i colori finali insieme agli stili per verificare le revisioni successive.