Design Sul dispositivo · Nessun caricamento

Verificatore di Contrasto Colore Gratuito

Testa i rapporti di contrasto colore rispetto agli standard di accessibilità WCAG 2.1. Verifica la conformità AA e AAA per la leggibilità del testo. Gratuito, istantaneo e privato.

Verificatore di Contrasto Colori testa qualsiasi coppia primo-piano/sfondo rispetto agli standard WCAG 2.1 AA e AAA con la formula della luminanza relativa. Mostra rapporto di contrasto, esito per dimensione testo e componenti UI, anteprima dal vivo e simulazione daltonismo per protanopia, deuteranopia e tritanopia. Suggerisce alternative conformi quando una coppia fallisce. Tutto nel tuo browser. Realizzato da FreeToolHub.

HEX
HEX
Rapporto di Contrasto
21 : 1
Testo Normale Testo Grande
WCAG AA Superato Richiede rapporto 4,5:1 Superato Richiede rapporto 3:1
WCAG AAA Superato Richiede rapporto 7:1 Superato Richiede rapporto 4,5:1
Componenti UI Superato Richiede rapporto 3:1 (WCAG 2.1)
Anteprima dal Vivo
Anteprima testo grande (24px grassetto)
Anteprima testo normale. Ecco come apparirà il testo del corpo con questi colori. Verifica la leggibilità prima di usare questa combinazione.
Testo piccolo a 12px come riferimento
Suggerimenti
Simulazione Daltonismo
Aa
Protanopia
Aa
Deuteranopia
Aa
Tritanopia

Domande Frequenti

Cos'è un rapporto di contrasto colore?

Un rapporto di contrasto misura la differenza di luminosità percepita tra due colori, espresso come rapporto da 1:1 (nessun contrasto) a 21:1 (contrasto massimo, nero su bianco). Viene calcolato utilizzando la formula di luminanza relativa WCAG.

Quale rapporto di contrasto serve per la conformità WCAG?

WCAG AA richiede un rapporto di contrasto minimo di 4,5:1 per il testo normale e 3:1 per il testo grande (18pt o 14pt grassetto). WCAG AAA richiede 7:1 per il testo normale e 4,5:1 per il testo grande. I componenti UI richiedono almeno 3:1 secondo WCAG 2.1.

Cosa conta come "testo grande" nel WCAG?

Il testo grande è definito come 18 punti (24px) o più a peso normale, o 14 punti (circa 18,66px) o più in grassetto. Il testo grande ha requisiti di contrasto inferiori perché è intrinsecamente più facile da leggere.

Perché il contrasto colore è importante per l'accessibilità?

Circa 1 uomo su 12 e 1 donna su 200 hanno una qualche forma di deficit nella visione dei colori. Il testo con basso contrasto è difficile o impossibile da leggere per persone con ipovisione o daltonismo. Un contrasto adeguato garantisce che i contenuti siano leggibili da tutti.

Questo strumento memorizza le mie selezioni di colore?

No. Tutto viene eseguito localmente nel browser. Nessun colore, risultato o dato viene inviato a un server o memorizzato. La tua privacy è completamente protetta.

Come funziona la funzione di suggerimento colori?

Quando una coppia di colori non supera un livello WCAG, lo strumento calcola automaticamente il colore più vicino che supererebbe il test, regolando la luminosità nello spazio colore HSL mantenendo tonalità e saturazione originali. Suggerisce sia un primo piano più scuro che uno sfondo più chiaro.