Come controllare il contrasto tra colore e sfondo

A cosa serve il controllo del contrasto

Questo strumento serve a controllare il rapporto di contrasto tra un colore di primo piano e uno sfondo. È utile quando vuoi verificare rapidamente se una combinazione cromatica supera le soglie previste per il testo normale o per il testo grande, senza considerare il risultato come una valutazione completa del design o dell’accessibilità.

Come controllare due colori

1. Inserisci il colore del primo piano e quello dello sfondo. I due campi sono facoltativi: se li lasci vuoti, vengono usati rispettivamente nero (#000000) e bianco (#ffffff).
2. Usa uno dei formati accettati: esadecimale a tre cifre, come #abc, esadecimale a sei cifre, come #aabbcc, oppure un testo simile a rgb(12, 34, 56) con tre componenti numeriche decimali separate da virgole.
3. Avvia il controllo. Gli spazi all’inizio e alla fine del testo vengono rimossi e le lettere vengono convertite in minuscolo prima dell’interpretazione.
4. Leggi il rapporto restituito e le quattro valutazioni associate: 4,5 e 7,0 per il testo normale, 3,0 e 4,5 per il testo grande. Il rapporto viene arrotondato a due cifre decimali prima di queste valutazioni.
5. Se un colore non può essere interpretato, correggi il formato e ripeti il controllo. In questo caso il risultato può contenere un’indicazione di errore senza le normali valutazioni del contrasto.

Come interpretare il risultato

Un rapporto più alto indica una differenza maggiore tra primo piano e sfondo, ma le valutazioni vanno lette in base alla dimensione del testo: le soglie per il testo normale sono più severe di quelle per il testo grande. Un rapporto pari a 1,0 si verifica quando i due colori sono identici. Se il risultato segnala il superamento di una soglia, considera comunque altri aspetti del progetto, come dimensione del carattere, peso, elementi grafici e contesto d’uso: questo controllo riguarda soltanto la coppia di colori inserita.

Esempio pratico

Stai verificando se i colori scelti per il testo e lo sfondo di una scheda offrono un contrasto sufficiente prima di pubblicarla.

Per una scheda con testo grigio scuro su sfondo chiaro, inserisci un valore esadecimale per il primo piano e uno per lo sfondo, poi avvia il controllo e confronta le valutazioni restituite.

Il risultato contiene un rapporto di contrasto arrotondato a due cifre decimali e quattro valutazioni basate sulle soglie per testo normale e testo grande, oppure un’indicazione di errore se uno dei colori non è interpretabile.

Limiti

• Il risultato riguarda il rapporto tra i due colori e le soglie indicate; non costituisce una valutazione completa dell’accessibilità o dell’intero design.

Errori comuni

• Un errore frequente è incollare un nome di colore, una sintassi CSS non supportata o un formato esadecimale diverso da tre o sei cifre. Inserisci invece un valore che inizi con # nei formati previsti oppure un testo RGB con tre componenti separate da virgole, quindi ripeti il controllo.

Domande frequenti

Posso inserire i colori in formato RGB?

Sì, ma solo se il testo RGB inizia con rgb e contiene tre componenti numeriche decimali separate da virgole. Per altri colori, usa l’esadecimale a tre o sei cifre preceduto da #.

Quali colori vengono usati se non inserisco valori?

Se lasci entrambi i campi vuoti, vengono usati nero (#000000) per il primo piano e bianco (#ffffff) per lo sfondo. Se ne lasci vuoto soltanto uno, il valore predefinito si applica a quel campo.

Cosa succede se inserisco colori uguali o non validi?

Quando i due colori sono identici, il rapporto restituito è 1,0. Quando invece uno dei valori non è interpretabile, il risultato contiene un’indicazione di errore e non le normali valutazioni del contrasto.