Vai al contenuto

Verifica del contrasto

Web e sviluppo

Quanto è leggibile questo testo su questo sfondo?

Verifica il contrasto WCAG del testo sullo sfondo, scopri i livelli superati e trova un colore simile che li rispetti.

Rapporto di contrasto

4,54:1

4 verifiche superate su 5.

Esempio di testo grande

La volpe marrone veloce salta sopra il cane pigro.

Verifiche WCAG 2.2

  • Testo normale, livello AA OK

    Criterio di successo 1.4.3: richiede almeno 4,5:1.

  • Testo grande, livello AA OK

    Criterio di successo 1.4.3: richiede almeno 3:1.

  • Testo normale, livello AAA Problema

    Criterio di successo 1.4.6: richiede almeno 7:1.

  • Testo grande, livello AAA OK

    Criterio di successo 1.4.6: richiede almeno 4,5:1.

  • Icone e comandi, livello AA OK

    Criterio di successo 1.4.11: richiede almeno 3:1.

Colore di testo conforme più vicino

Livello AAA, testo normale (7:1)
#595959

Link sponsorizzati

Verifica il contrasto WCAG del testo sullo sfondo, scopri i livelli superati e trova un colore simile che li rispetti.

Come si usa

  1. Inserisci colore del testo e dello sfondo in un formato CSS o tocca un campione per sceglierlo. Il pulsante di scambio li inverte.
  2. Leggi il rapporto e le verifiche: testo normale, testo grande, icone o comandi, ai livelli AA e AAA.
  3. Se una verifica non è superata, copia il colore di testo conforme più vicino. Mantiene la tonalità e cambia solo la luminosità.

Testo grigio su sfondo bianco

Colore del testo (HEX)Rapporto di contrasto
#00000021:1
#5959597:1
#7676764,54:1
#7777774,47:1
#9999992,84:1

Link sponsorizzati

Come funziona

Le Web Content Accessibility Guidelines (WCAG 2.2) valutano quanto il testo si distingue dallo sfondo con un rapporto da 1:1 (nessuna differenza) a 21:1 (nero su bianco). Il livello AA richiede almeno 4,5:1 per testo normale e 3:1 per testo grande, cioè almeno 18 punti o 14 punti in grassetto (criterio 1.4.3). Il livello AAA richiede 7:1 e 4,5:1 (1.4.6). Icone, bordi dei campi e altre parti necessarie alla comprensione devono raggiungere 3:1 (1.4.11).

Il rapporto è (L1 + 0,05) ÷ (L2 + 0,05), dove L1 è la luminanza relativa del colore più chiaro e L2 di quello più scuro. La luminanza relativa è 0,2126 R + 0,7152 G + 0,0722 B dei valori linearizzati di rosso, verde e blu. Ad esempio, #767676 su bianco ha L = 0,181 contro 1: (1 + 0,05) ÷ (0,181 + 0,05) dà 4,54:1. Il rapporto viene troncato, mai arrotondato per eccesso: 4,499 non soddisfa 4,5.

Il testo trasparente viene prima composto sullo sfondo e lo sfondo trasparente sul bianco. Il colore suggerito mantiene tonalità e croma del testo e sposta solo la luminosità in OKLCH al valore conforme più vicino, conservando un aspetto simile. Il contrasto è solo una parte della leggibilità: contano anche carattere, dimensione e spessore; il rapporto non valuta la percezione delle persone daltoniche oltre alla luminosità.

Domande frequenti

Cos’è il testo grande nelle WCAG?

Testo di almeno 18 punti (24 px), oppure almeno 14 punti (circa 18,7 px) in grassetto. Richiede meno contrasto perché le lettere grandi si leggono più facilmente.

A quale livello dovrei puntare?

Il livello AA è il consueto obiettivo normativo e progettuale. AAA è più rigoroso e non sempre possibile per l’intero sito, ma è utile per testi lunghi da leggere.

Il rapporto dipende da quale colore è il testo?

No. Scambiando i colori il rapporto resta uguale. Cambiano solo l’esempio e la sostituzione suggerita, perché il suggerimento modifica il colore del testo.

Superare il test di contrasto rende accessibile la pagina?

No. Verifica solo il contrasto dei colori. Accesso da tastiera, alternative testuali e altri requisiti restano importanti.

Perché un rapporto appena sotto 4,5 non supera AA per il testo normale?

La soglia è 4,5:1, senza arrotondare per eccesso. Il valore visualizzato viene troncato a due decimali per non far sembrare conforme un valore insufficiente.

Potrebbe servirti anche

Altri strumenti in Web e sviluppo

Tutti i 18 strumenti in Web e sviluppo

Popolari adesso

Link sponsorizzati

Link sponsorizzati