Calcolatore del contrasto

Verifica il rapporto di contrasto WCAG tra il colore del testo e quello dello sfondo, scopri quali livelli di accessibilità sono superati e ottieni colori consigliati che rispettano la soglia.

Aggiornato 2026-10-24

Risultato del rapporto di contrasto

Rapporto di contrasto

Inserisci due colori.

Esempio di testo grande

Esempio di testo normale, il tipo interessato dalla maggior parte dei problemi di contrasto.

AA, testo normale (4.5:1): -
AA, testo grande (3:1): -
AAA, testo normale (7:1): -
AAA, testo grande (4.5:1): -

Colori del testo consigliati che superano il livello AA

I colori seguenti raggiungono almeno 4.5:1 sullo sfondo scelto. Selezionane uno per provarlo come colore del testo.

Come funziona

Il rapporto di contrasto è la differenza di luminanza tra il colore in primo piano e quello di sfondo. Secondo le linee guida WCAG, si calcola dividendo (L1 + 0.05) per (L2 + 0.05), dove L1 è la luminanza relativa del colore più chiaro e L2 quella del colore più scuro. WCAG AA richiede 4.5:1 per il testo normale e 3:1 per quello grande.

Inserisci o scegli due colori
Digita un valore esadecimale o usa i selettori dei colori.
Leggi il rapporto e i livelli
Ogni livello WCAG indica se il rapporto è superato o meno.
Prova un colore consigliato
Seleziona un campione qui sotto per raggiungere subito il livello AA con lo sfondo attuale.

La formula del contrasto WCAG

rapporto = (L1 + 0.05) ÷ (L2 + 0.05)

La luminanza relativa L si ricava dai valori sRGB linearizzati: ogni canale viene convertito da un valore gamma corretto da 0 a 255 in luce lineare usando la funzione di trasferimento sRGB, quindi ponderato come 0.2126R + 0.7152G + 0.0722B per riflettere la sensibilità luminosa dell'occhio umano. Il rapporto massimo possibile è 21:1, con il nero puro sul bianco puro.

A chi si applica la regola 4.5:1

Il rapporto 4.5:1 delle WCAG si applica specificamente al testo e alle immagini di testo. Sono esenti le immagini decorative, i logotipi e le icone puramente visive senza alternativa testuale. I componenti UI non testuali, come pulsanti, bordi dei campi e indicatori di messa a fuoco, devono raggiungere solo 3:1 secondo WCAG 1.4.11. La soglia è più bassa perché i tratti sottili dei caratteri richiedono più contrasto per restare leggibili rispetto a una forma semplice.

I temi scuri possono non rispettare i requisiti anche se sembrano leggibili

L'algoritmo WCAG usa la luminanza sRGB linearizzata, che non varia linearmente con la luminosità percepita. Nei temi scuri si abbina spesso testo grigio medio a uno sfondo quasi nero: il rapporto può scendere sotto 4.5:1 anche se il testo sembra leggibile. Ad esempio, #999999 su #1A1A24 raggiunge circa 3.6:1 e non supera il livello AA; schiarendo il testo fino a circa #ABABAB o più si raggiunge la soglia.

Domande frequenti

Quale rapporto di contrasto richiede WCAG AA per il testo del corpo?

WCAG 2.1 livello AA richiede un rapporto di contrasto minimo di 4.5:1 per il testo normale sotto i 18px o in grassetto sotto i 14px, e di 3:1 per il testo grande (almeno 18px normale o 14px in grassetto). Il livello AAA richiede 7:1 per il testo normale e 4.5:1 per quello grande. Il rapporto massimo possibile è 21:1, con il nero puro (#000000) sul bianco puro (#FFFFFF).

Come si calcola il rapporto di contrasto WCAG?

La formula consiste nel dividere (L1 + 0.05) per (L2 + 0.05), dove L1 è la luminanza relativa del colore più chiaro e L2 quella del colore più scuro. La luminanza relativa si ricava dai valori sRGB linearizzati: ogni canale viene convertito da un valore gamma corretto da 0 a 255 in luce lineare tramite la funzione di trasferimento sRGB, quindi ponderato come 0.2126R + 0.7152G + 0.0722B per riflettere la sensibilità luminosa dell'occhio umano.

È necessario un rapporto di contrasto 4.5:1 per tutti gli elementi dell'interfaccia?

No. Il rapporto 4.5:1 delle WCAG si applica specificamente al testo e alle immagini di testo. Sono esenti le immagini decorative, i logotipi e le icone puramente visive senza alternativa testuale. I componenti UI non testuali (pulsanti, campi del modulo e indicatori di messa a fuoco) richiedono solo un contrasto di 3:1 secondo WCAG 1.4.11. La soglia più rigorosa di 4.5:1 serve perché la leggibilità del testo dipende dai tratti sottili dei caratteri.

Perché il mio design in modalità scura non supera i requisiti WCAG anche se sembra leggibile?

L'algoritmo WCAG usa la luminanza sRGB linearizzata, che non varia linearmente con la luminosità percepita. Nei temi scuri si abbina spesso testo grigio medio a uno sfondo quasi nero: il contrasto percepito sembra sufficiente, ma il rapporto di luminanza scende sotto 4.5:1. Ad esempio, #999999 su #1A1A24 produce circa 3.6:1 e non supera il livello AA. Schiarendo il testo sullo stesso sfondo fino a circa #ABABAB o più si raggiunge la soglia.

I requisiti di contrasto dei colori si applicano al testo segnaposto nei campi del modulo?

Sì. Secondo WCAG 1.4.3, il testo segnaposto che comunica contenuti significativi deve raggiungere un rapporto di 4.5:1. Molti design usano testo segnaposto con opacità ridotta, ad esempio grigio al 40%, che non supera questa soglia. Il criterio di successo 1.4.3 non esenta in modo categorico il testo segnaposto: l'eccezione si applica solo ai componenti UI inattivi o agli elementi puramente decorativi, non al testo di suggerimento.