Controllo del contrasto WCAG
Test any foreground and background color pair for WCAG 2.1 contrast ratio (1 to 21). See pass/fail for Level AA and AAA, for normal text, large text (18pt+ or 14pt bold), and UI components. Essential before shipping buttons, links, and form labels — many brand palettes fail until you darken text or lighten surfaces.
Colore del testo
Colore di sfondo
Aa Bb Cc — 123
Risultato
16.12 : 1
AA — Superato
AA (testo grande) — Superato
AAA — Superato
AAA (testo grande) — Superato
How to check color contrast
1. Enter or pick foreground (text) and background colors.
2. Read the contrast ratio (e.g. 4.52:1).
3. Check AA and AAA rows for normal and large text sizes.
4. Adjust HSL lightness until required level passes, then copy hex values.
Esempi di controllo del contrasto
Corpo del testo #374151 su #FFFFFF
Rapporto ≈ 8,9:1: passa AAA per il testo normale (è necessario 7:1). Lettura comoda e lunga.
Grigio chiaro #9CA3AF su bianco
Rapporto ≈ 2,6:1: fallisce AA per il testo normale (richiede 4,5:1). Errore comune del segnaposto.
Pulsante principale bianco su #2563EB
Rapporto ≈ 4,6:1: supera il testo normale AA; passare al blu più scuro per AAA o per uso solo di grandi dimensioni.
Quando usare questo strumento
• Quando controlli i token del sistema di progettazione prima del rilascio.
• Quando risolvi i risultati di accessibilità da Lighthouse o axe.
• Quando scegli i colori dei link che devono differire dal corpo del testo, non solo per la tonalità.
Quando scegliere altro
• Quando hai bisogno di un controllo della pagina intera, utilizza gli scanner automatizzati sul DOM renderizzato.
• Quando si testano sfondi non solidi (immagini, gradienti), campiona i pixel nel caso peggiore.
• Quando si simula il daltonismo, usa simulatori visivi specializzati.
WCAG Spiegazione dei livelli 2.1
Il livello A è minimo; AA è l'obiettivo legale in molte giurisdizioni (ADA, settore pubblico EAA). AAA è un obiettivo per il body copy: i titoli di grandi dimensioni possono passare AAA più facilmente delle didascalie da 14px. Gli indicatori visibili della messa a fuoco (2.4.7) completano il contrasto: gli utenti della tastiera necessitano di anelli di messa a fuoco visibili, spesso 3:1 rispetto ai colori adiacenti. Documenta il superamento/fallimento nel sistema di progettazione accanto a ciascuna coppia di token.
Risolvere i guasti senza rebranding
Se il viola del marchio fallisce sul bianco, non scambiare la tonalità: scurisci il primo piano con incrementi di luminosità del 5-10% o usa il viola solo per i titoli di grandi dimensioni. Il testo segnaposto deve soddisfare il contrasto (4,5:1), non solo i valori di input. Gli stati disabili possono essere esentati dal rigoroso contrasto del testo ma non dovrebbero trasmettere informazioni critiche solo attraverso il colore. Abbina questo correttore al convertitore di colori per una rapida iterazione HSL.
Domande frequenti
Quale rapporto di contrasto per il testo normale WCAG AA?
Almeno 4,5:1 per il testo normale e 3:1 per il testo grande (18pt+ o 14pt grassetto).
E per l'AAA?
Testo normale 7:1, testo grande 4,5:1: più rigido, spesso utilizzato per i siti governativi.
I componenti dell'interfaccia utente necessitano di contrasto?
WCAG 2.1 richiede 3:1 per gli oggetti grafici e i limiti dei componenti dell'interfaccia utente (1.4.11).
Come viene calcolato il rapporto?
In base alla luminanza relativa dei colori sRGB: (L1 + 0,05) / (L2 + 0,05) dove L1 è più chiaro.
La sottolineatura corregge i collegamenti a basso contrasto?
No, il contrasto è ancora necessario. Le sottolineature aiutano i segnali non cromatici ma non sostituiscono le regole del rapporto.
I miei dati vengono inviati a un server?
NO.
Questo strumento è gratuito?
Sì.