Verifica del contrasto dei colori
Assicurati che il tuo testo sia facile da leggere per tutti, e ottieni una correzione quando non lo è.
Sigillato su questo dispositivo
Funziona nel tuo browser. Non viene caricato nulla.
Sigillato
Colori
- Rapporto di contrasto
- Testo normale
- AA · 4,5:1
- AAA · 7:1
- Testo grande
- AA · 3:1
- AAA · 4,5:1
- Elementi dell’interfaccia e icone
- AA · 3:1
- Contrasto APCA (a titolo informativo)
APCA è un metodo più recente, allo studio per le future linee guida sull’accessibilità. Oggi il riferimento resta WCAG 2.2.
Anteprima
Il testo grande si legge così
Il testo normale deve restare facile da leggere per tutti, anche per chi ha una vista ridotta, su un telefono in pieno sole o su un vecchio schermo.
Le note in piccolo e le didascalie richiedono il contrasto maggiore.
Correzioni suggerite
Come funziona
-
Inserisci i due colori
Scrivi o scegli il colore del testo e quello dello sfondo. Va bene qualsiasi formato: HEX, RGB, HSL o un nome CSS.
-
Leggi il risultato
Vedi il rapporto di contrasto e se supera i livelli WCAG 2.2 AA e AAA per testo normale, testo grande ed elementi dell’interfaccia.
-
Applica una correzione se serve
Se un livello non è superato, usa uno dei colori suggeriti: è il più vicino, con la stessa tonalità, che lo supera.
Domande frequenti
Di quale rapporto di contrasto ho bisogno?
Il livello AA delle WCAG 2.2 richiede almeno 4,5:1 per il testo normale e 3:1 per il testo grande. Il livello AAA richiede 7:1 e 4,5:1. Icone, bordi dei campi e altri elementi dell’interfaccia richiedono almeno 3:1 rispetto a ciò che hanno accanto.
Cosa si intende per testo grande?
Un testo di almeno 18 punti (24 pixel CSS), oppure di almeno 14 punti (circa 18,7 pixel CSS) se in grassetto. Tutto ciò che è più piccolo è testo normale.
Perché 4,49:1 non è sufficiente, se è così vicino a 4,5:1?
Le soglie WCAG sono minimi rigorosi e il rapporto non deve essere arrotondato per eccesso. Per questo lo strumento mostra il rapporto arrotondato per difetto: un valore che sembra conforme lo è davvero.
Cos’è l’APCA?
L’APCA (Accessible Perceptual Contrast Algorithm) è un metodo più recente per misurare il contrasto, che tiene conto del fatto che il testo sia scuro su chiaro o chiaro su scuro. È allo studio per una futura versione delle linee guida. Qui è mostrato solo a titolo informativo: oggi i requisiti legali e gli audit fanno riferimento al rapporto WCAG 2.
Come vengono scelti i colori suggeriti?
Lo strumento mantiene la tonalità e l’intensità del tuo colore e ne cambia solo la luminosità, nello spazio colore percettivo OKLCH, finché non trova il valore più vicino che raggiunge il livello. Il tuo colore resta riconoscibile, solo un po’ più chiaro o più scuro.
Funziona con i colori trasparenti?
Sì per il colore del testo: un colore del testo semitrasparente viene prima fuso con lo sfondo, perché è il colore che le persone vedono davvero. Lo sfondo è considerato pieno.