Come faccio a verificare se i colori del mio testo e dello sfondo superano i criteri WCAG?

Inserisci i codici esadecimali in Colore testo e Colore sfondo, oppure usa i selettori. Il Rapporto di contrasto appare con Superato o Non idoneo per i livelli AA e AAA per testo normale e grande, oltre che per i componenti UI.

Quale rapporto di contrasto richiede il livello WCAG AA?

Il livello AA richiede 4,5:1 per il testo normale e 3:1 per il testo grande. Il livello AAA richiede 7:1 per il testo normale e 4,5:1 per il testo grande. I componenti UI e gli oggetti grafici richiedono 3:1.

Cosa si intende per testo grande?

Lo strumento considera grande un testo regolare di 18pt (24px) o un testo in grassetto di 14pt (18,66px). Il testo più piccolo deve soddisfare le soglie più alte previste per il testo normale.

I miei colori non superano il livello AA. Come posso correggerli?

Usa i suggerimenti rapidi Correggi colore testo o Correggi sfondo. Regolano la luminosità mantenendo la stessa tonalità finché la coppia non raggiunge 4,5:1.

Quali formati di colore accetta ed è possibile selezionare un colore dallo schermo?

Accetta valori esadecimali a 3 e 6 cifre, come #abc o #1e293b. Il pulsante Seleziona colore dallo schermo appare nei browser che supportano l'API EyeDropper, come Chromium.

Sì. Ogni strumento è gratuito, senza account e senza carta di credito. L'elaborazione avviene sul tuo dispositivo e non sui nostri server, ed è proprio questo che ci permette di offrirlo gratis.

Sì. Funziona nei browser mobili recenti su iOS e Android, senza installare nulla.

🌓

Verificatore Contrasto Colori WCAG gratis

Verifica se due colori soddisfano gli standard di contrasto WCAG AA e AAA per l'accessibilità. Anteprima live a più dimensioni di testo con suggerimenti automatici quando il contrasto è insufficiente.

Funziona nel tuo browserNessuna registrazione, nessun pop-upNessun accesso richiestoGratis per sempre

Funziona offline una volta caricato

Colore testo

Colore sfondo

Titolo grande

Testo corpo medio (18px) per lettura e contenuti.

Testo corpo normale (16px) per paragrafi.

Testo corpo piccolo (14px) per didascalie e metadati.

14,63:1

Rapporto di contrasto

✓WCAG AA — Testo normale

Richiede 4.5:1 · Hai 14,63:1

✓WCAG AA — Testo grande

Richiede 3.0:1 · Hai 14,63:1

✓WCAG AAA — Testo normale

Richiede 7.0:1 · Hai 14,63:1

✓WCAG AAA — Testo grande

Richiede 4.5:1 · Hai 14,63:1

✓Componenti UI / oggetti grafici

Richiede 3.0:1 · Hai 14,63:1

Preset rapidi

Basato sulle linee guida WCAG 2.1 sul contrasto. Testo grande = 18pt (24px) normale o 14pt (18,66px) grassetto. I codici hex si aggiornano in entrambe le direzioni: digita un hex o scegli un colore, i due input rimangono sincronizzati.

Usi comuni

Audit Pagine Web per Conformità WCAGVerifica che i colori di testo del tuo sito soddisfino gli standard di contrasto WCAG AA o AAA per accessibilità.
Verifica Combinazioni Colori BrandTesta gli abbinamenti della palette colori del brand per assicurarti che funzionino per il design UI accessibile.
Testa Palette Colori Modalità ScuraTesto leggero su sfondi scuri può comunque fallire il contrasto - controlla gli abbinamenti della tua palette di modalità scura qui.
Abbinamenti Colori per Materiali StampatiPoster, cartelli e materiali stampati necessitano anche di contrasto leggibile - specialmente per i lettori più anziani.
Progetta Colori di Pulsanti AccessibiliAssicurati che CTA, pulsanti di azione e link superino WCAG rispetto ai loro sfondi.

Come funziona

Il controllo del contrasto funziona interamente nel tuo browser usando l'algoritmo di luminanza relativa WCAG 2.1 — nessuna libreria, nessun server, solo matematica scritta a mano che segue esattamente la specifica. Ogni risultato si aggiorna in tempo reale mentre digiti o scegli un colore.

1
Input hex e normalizzazione
Sia i valori hex a 3 cifre (#abc) che a 6 cifre (#aabbcc) sono accettati e normalizzati in triplette RGB complete. L'input non valido viene rifiutato immediatamente invece di predefinire silenziosamente al nero, così appare un bordo rosso invece di un risultato di superamento fuorviante.
2
Calcolo della luminanza WCAG
Ogni colore viene convertito in luminanza relativa usando la formula WCAG 2.1: i valori dei canali sRGB sono linearizzati con una correzione gamma a tratti (dividendo per 12,92 sotto 0,03928, elevando alla potenza di 2,4 sopra), poi pesati come 0,2126R + 0,7152G + 0,0722B.
3
Rapporto di contrasto e controlli di conformità
Il rapporto di contrasto viene calcolato come (più chiaro + 0,05) / (più scuro + 0,05) e verificato rispetto a tutte e cinque le soglie WCAG: AA testo normale (4,5:1), AA testo grande (3:1), AAA testo normale (7:1), AAA testo grande (4,5:1), e componenti UI (3:1). I risultati si aggiornano a ogni pressione di tasto.
4
Suggerimenti di correzione che preservano la tonalità
Quando la coppia fallisce WCAG AA, lo strumento cerca nello spazio di luminosità HSL — muovendosi verso l'esterno dalla luminosità originale in entrambe le direzioni — per trovare la variante più vicina di ogni colore che supera 4,5:1 mantenendo la stessa tonalità e saturazione. Anche l'EyeDropper API (Chromium) è disponibile per campionare qualsiasi colore direttamente dal tuo schermo.

Strumenti correlati

👁️

Simulatore Daltonismo

Guarda come appare il tuo design alle persone con deficienze della visione dei colori. Simula protanopia, deuteranopia, tritanopia, acromatopsia e anomalie più lievi.

ProvaI file rimangono locali

📐

Qual è la mia risoluzione schermo

Vedi la risoluzione del tuo schermo in pixel CSS e reali, dimensione della finestra, rapporto pixel, profondità colore, HDR, supporto tocco e frequenza di aggiornamento, e copia tutto.

Prova

🖥️

Test Pixel Bruciati

Controlla se il tuo schermo ha pixel morti o bloccati con schermo intero nero, bianco, rosso, verde, blu e grigio, più un opzionale riparatore di pixel bloccati.