Verifica contrasto colori (Contrast Checker)

Controlla il contrasto del testo prima di pubblicare

Un buon contrasto cromatico è uno dei modi più semplici per rendere un sito più leggibile. Questo verificatore di contrasto confronta il colore del testo e quello dello sfondo con la formula WCAG della luminanza relativa, poi mostra il rapporto di contrasto e i risultati superato/non superato per i livelli AA e AAA. È utile per pulsanti, navigazione, badge, schede, messaggi di avviso e ovunque il testo compaia su una superficie colorata.

Il calcolo viene eseguito nel tuo browser e non richiede alcun caricamento. Scegli due colori, scambiali se serve e usa il blocco di anteprima per vedere come si presenta un testo reale. Il rapporto è oggettivo, ma l'anteprima conta comunque perché spessore del carattere, dimensione delle lettere e layout circostante influiscono sulla leggibilità. Una coppia che supera tecnicamente i test può risultare faticosa se il testo è minuscolo o la superficie è visivamente confusa.

Capire i risultati AA e AAA

WCAG AA è l'obiettivo comune per la maggior parte di siti e prodotti. Il testo normale deve raggiungere almeno 4,5:1, mentre il testo grande almeno 3:1. AAA è più severo: 7:1 per il testo normale e 4,5:1 per quello grande. Per testo grande si intende 18pt normale o 14pt in grassetto e oltre. La soglia più bassa esiste perché lettere più grandi e più spesse restano più facili da distinguere con un contrasto minore rispetto al testo piccolo del corpo. Se non sei sicuro della categoria, considera il testo normale e punta al requisito più alto.

Progettare sistemi di colore accessibili

Il contrasto va verificato fin dall'inizio, non solo a design visivo concluso. Quando scegli i colori del brand, provali sulle superfici in cui compariranno davvero: schede bianche, barre di navigazione scure, sfondi tenui e stati disabilitati. Documenta le combinazioni accessibili come token, così i team non devono riscoprirle. Ricorda che il contrasto è solo una parte dell'accessibilità. Usa contorni di focus visibili, etichette chiare, HTML semantico e non affidarti solo al colore per comunicare stati importanti come errori, successi e avvisi.