Rendi ogni parola più leggibile

Funzioni e utilizzi

Il controllo del contrasto confronta i colori di testo e sfondo con le soglie WCAG AA e AAA per testo normale e grande. I selettori e i campi HEX, RGB o HSL consentono regolazioni rapide.

Prova il tuo testo, scegli font, dimensione e peso e considera i colori trasparenti sopra il colore della pagina. Scambia i colori, trova un colore del testo conforme ad AA, copia il CSS o scarica un report PNG con anteprima e risultati.

Formati, opzioni e limiti

I campi colore accettano HEX a 3, 4, 6 o 8 cifre, con o senza #, e le notazioni RGB/RGBA e HSL/HSLA. I valori alfa controllano la trasparenza. Usa il selettore visivo per modifiche rapide o digita un valore per un controllo preciso.

• Visualizza fino a 300 caratteri di input con un font della libreria del sito, da 12 a 96 px, normale o grassetto. Testo e sfondi trasparenti vengono valutati sul colore opaco scelto per la pagina. Il suggerimento AA punta ad almeno 4,5:1 per il testo normale.
• Copia il CSS con il colore del testo, dello sfondo e il rapporto di contrasto. Il report PNG scaricabile è largo 1200 px, con altezza adattata al testo, e include anteprima, risultati AA/AAA, impostazioni del font e valori colore. Usalo per documentare la coppia di colori scelta.

Lavora senza account: testo e foto vengono elaborati nel browser. Salva un progetto su questo dispositivo o scarica un backup per riaprirlo in seguito.

Da sapere

WCAG AA richiede 4,5:1 per testo normale e 3:1 per testo grande. AAA richiede rispettivamente 7:1 e 4,5:1. Il testo grande parte da 24 px, o circa 18,67 px in grassetto. Si usa il rapporto non arrotondato.

I colori trasparenti vengono composti sul colore della pagina. Un rapporto conforme verifica i colori scelti, non l’accessibilità dell’intero progetto. Leggi la guida WCAG sul contrasto