Verifica il rapporto di contrasto di accessibilità WCAG tra i colori
Un controllore di contrasto misura il rapporto di contrasto tra un colore di primo piano e uno di sfondo, e ti dice se soddisfa gli standard di accessibilità WCAG per un testo leggibile. Il rapporto di contrasto è un numero da 1:1 (colori identici, invisibile) a 21:1 (nero su bianco), e più è alto, più il testo è facile da leggere — soprattutto per persone con ipovisione, deficit di colore, o chiunque usi uno schermo sotto il sole intenso. Inserisci due colori e ottieni il rapporto esatto più un chiaro superato o non superato rispetto alle soglie riconosciute.
Questo conta perché il grigio chiaro su bianco e altre combinazioni a basso contrasto appaiono eleganti in un design ma sono davvero difficili da leggere per una larga fetta di utenti, e il contrasto è uno dei fallimenti di accessibilità più comuni e più verificabili. Le linee guida WCAG fissano minimi specifici — 4,5:1 per il testo normale e 3:1 per il testo grande al livello AA — quindi un controllore trasforma "è leggibile?" da congettura in risposta verificabile. Questo strumento calcola il rapporto nel browser mentre regoli i colori.
Sotto WCAG AA, il testo normale necessita almeno 4,5:1 e il testo grande (circa 18pt, o 14pt grassetto) necessita 3:1. Il livello più rigoroso AAA chiede 7:1 e 4,5:1 rispettivamente. Il controllore mostra il tuo rapporto rispetto a queste soglie così sai esattamente quale supera.
Il testo a basso contrasto è difficile o impossibile da leggere per persone con vista ridotta, deficit della visione dei colori, o chiunque in scarsa illuminazione. Un contrasto sufficiente è uno dei requisiti di accessibilità più impattanti e facilmente misurabili, ecco perché WCAG fissa minimi espliciti.
Sì. Un testo più grande e più in grassetto è più leggibile a contrasto inferiore, quindi lo standard allenta il requisito per esso — 3:1 in AA invece di 4,5:1. Il controllore tiene conto di questa distinzione così i titoli grandi sono giudicati alla soglia corretta.
Il massimo è 21:1, nero puro su bianco puro. Il minimo è 1:1, due colori identici senza alcun contrasto. Ogni coppia di colori reale ricade da qualche parte in mezzo, e l'obiettivo è superare la soglia per la tua dimensione di testo.
Generatore palette colori · Generatore sfumatura CSS · Miscelatore colori · Cercatore nome colore