Verifica contrasto colori — Rapporto WCAG AA/AAA e APCA
Controlla i colori di testo e sfondo secondo WCAG 2.x AA e AAA, leggi il valore APCA Lc e ottieni il colore più vicino che supera il test.
Testo grande, 24px (18pt) normale
Testo grande in grassetto, 18,67px (14pt) grassetto
Testo normale a 16px. Ma la volpe col suo balzo ha raggiunto il quieto Fido. I paragrafi lunghi richiedono più contrasto dei titoli, perché i tratti sottili a dimensioni ridotte si confondono tra loro.
Testo piccolo a 13px, la dimensione di didascalie e piè di pagina.
Colori conformi più vicini
Cambia solo la luminosità (in OKLCH), quindi la tonalità resta la stessa. Applicane uno o copialo.
#7676764.54:1#0606064.52:1#5959597.00:1Calcolato nel tuo browser. Nulla di ciò che inserisci viene inviato a noi o conservato. Sfoglia tutti gli strumenti gratuiti.
Hai trovato un problema o qualcosa che potrebbe andare meglio? Leggiamo ogni messaggio e sistemiamo le cose in fretta.
Questa verifica del contrasto colori gratuita ti dice se un testo è leggibile sul suo sfondo secondo le WCAG 2.x, lo standard alla base dell'ADA, dell'European Accessibility Act e della maggior parte degli audit di accessibilità. Inserisci un colore del testo e un colore di sfondo, con il selettore, un codice HEX o il contagocce sullo schermo, e vedrai il rapporto di contrasto con l'esito superato o non superato per AA e AAA con testo normale e grande e per i componenti dell'interfaccia come bordi dei pulsanti e icone.
Quando una coppia non supera il test, lo strumento suggerisce il colore di testo o di sfondo conforme più vicino, regolando solo la luminosità in OKLCH così la tinta del tuo brand resta la stessa. Mostra anche il valore APCA Lc, il metodo più recente della bozza di lavoro WCAG 3, che modella il modo in cui il contrasto viene effettivamente percepito ed è più affidabile nel giudicare la modalità scura e i font sottili. WCAG 3 non è ancora uno standard, quindi ai fini della conformità conta il rapporto WCAG 2.x, e la pagina spiega dove i due metodi non concordano.
Come si usa
- Inserisci il colore del testo e il colore di sfondo: usa i selettori, digita i codici HEX (#777 o #777777) oppure fai clic sull'icona dell'occhio per campionare qualsiasi pixel sullo schermo (Chrome ed Edge).
- Leggi il rapporto di contrasto e i cinque esiti. Il testo normale richiede AA normale (4,5:1); i titoli di 24px, o 18,66px in grassetto, richiedono AA grande (3:1).
- Guarda nell'anteprima come appare davvero la coppia nelle dimensioni del testo normale, grande e delle didascalie.
- Se un controllo non viene superato, applica un colore suggerito da Colori conformi più vicini, che modifica solo la luminosità.
- Usa Inverti per provare il contrario (per esempio una versione in modalità scura), poi copia il risultato o il CSS.
Domande frequenti
Quale rapporto di contrasto richiedono le WCAG?
Le WCAG 2.1 e 2.2 di livello AA richiedono almeno 4,5:1 per il testo normale e 3:1 per il testo grande (criterio di successo 1.4.3), e 3:1 per i componenti dell'interfaccia utente e la grafica significativa come bordi dei campi, indicatori di focus e icone (1.4.11). Il livello AAA alza il testo a 7:1 per quello normale e 4,5:1 per quello grande (1.4.6). Loghi ed elementi puramente decorativi o disattivati sono esenti.
Cosa si intende per testo grande nelle WCAG?
Almeno 18 punti normale o 14 punti in grassetto. In pixel CSS sono 24px normale o circa 18,66px in grassetto, perché un punto equivale a 1,333 pixel. Un titolo di 16px in grassetto non è testo grande, e nemmeno uno di 20px normale. In pratica i font sottili o decorativi possono risultare insufficienti anche a quelle dimensioni, ed è uno dei problemi che APCA vuole risolvere.
#777777 su bianco è accessibile?
Non per il testo normale. #777777 su #ffffff ha un rapporto di contrasto di 4,48:1, appena sotto la soglia AA di 4,5:1, quindi non supera AA per il testo normale e lo supera solo per il testo grande e i componenti dell'interfaccia. Le WCAG non ammettono arrotondamenti per eccesso, quindi 4,48 è un esito negativo. Il grigio più chiaro che supera AA su bianco è #767676 (4,54:1); per AAA, #595959 (7,00:1).
Cos'è APCA e conviene usarlo al posto delle WCAG 2?
APCA (Accessible Perceptual Contrast Algorithm) è il metodo di calcolo del contrasto proposto per le WCAG 3. Invece di un rapporto fornisce un valore di contrasto di luminosità, Lc, da circa -108 a 106, in cui il segno indica la polarità (negativo significa testo chiaro su sfondo scuro). Tiene conto del fatto che lo stesso rapporto si legge in modo diverso a seconda della polarità e di quanto sono scuri i colori, ed è per questo che le WCAG 2 sopravvalutano le coppie scuro su scuro e sottovalutano alcune coppie bianco su colore. Usalo per prendere decisioni di design migliori, ma per la conformità riporta le WCAG 2.x: le WCAG 3 sono una bozza di lavoro e il loro metodo di calcolo del contrasto potrebbe ancora cambiare.
Come si calcola il rapporto di contrasto?
La luminanza relativa di ogni colore si calcola convertendo i canali sRGB in luce lineare e ponderandoli con 0,2126 per il rosso, 0,7152 per il verde e 0,0722 per il blu, cioè la sensibilità dell'occhio a ciascuno. Il rapporto è (L1 + 0.05) / (L2 + 0.05), dove L1 è il colore più chiaro. Va da 1:1 (colori identici) a 21:1 (nero su bianco). Il termine 0,05 modella la luce ambientale riflessa dallo schermo.
Come si corregge un colore che non supera il test di contrasto?
Modifica la luminosità, non la tinta. Scurisci il testo o schiarisci lo sfondo (o il contrario in modalità scura) finché il rapporto non viene superato. I suggerimenti di questa pagina fanno esattamente questo nello spazio colore OKLCH, quindi un blu aziendale non conforme diventa un blu più scuro e non un altro colore. Se nessuna delle due direzioni raggiunge l'obiettivo, cosa che succede quando l'altro colore è un tono intermedio, modifica invece l'altro colore: con uno sfondo grigio medio non si arriva a 7:1 con nessun colore del testo.
I requisiti di contrasto WCAG 2.x in breve
• Testo normale, AA (1.4.3): 4,5:1. Vale per il corpo del testo, le etichette, i link, il testo segnaposto che trasmette informazioni e il testo nelle immagini.
• Testo grande, AA (1.4.3): 3:1. Testo di almeno 24px normale o 18,66px in grassetto.
• Componenti dell'interfaccia e grafica, AA (1.4.11): 3:1 rispetto ai colori adiacenti. Bordi dei campi, contorni delle caselle di controllo, indicatori di focus, icone con un significato, linee dei grafici.
• Testo normale, AAA (1.4.6): 7:1. Testo grande, AAA: 4,5:1. Pochi siti rispettano AAA ovunque; vale la pena puntarci per i testi lunghi da leggere e per un pubblico più anziano.
• Esenti: loghi e nomi di marchi, controlli disattivati, elementi puramente decorativi e testo incidentale (che fa parte di una foto, per esempio).
Due errori compaiono in quasi ogni audit. Il testo segnaposto nei campi dei moduli di solito è grigio chiaro e non raggiunge 4,5:1, e poiché spesso è l'unica etichetta, conta. E i pulsanti nel colore del brand con testo bianco finiscono spesso tra 3 e 4,5, superando il test solo per il testo grande, mentre l'etichetta del pulsante è di 14 o 16px.
Dove WCAG 2 e APCA non concordano
La formula delle WCAG 2 tratta il contrasto come simmetrico e lineare rispetto alla luminanza, ma la vista non funziona così. Nella pratica questo ha due conseguenze che si incontrano di continuo.
Modalità scura: un testo grigio chiaro su uno sfondo quasi nero spesso supera ampiamente le WCAG 2 ma appare duro o sfocato, mentre alcune coppie medio-scure superano il test e sono difficili da leggere. APCA tratta separatamente il chiaro su scuro (un Lc negativo) ed è più severo all'estremo scuro.
Colori saturi: un testo bianco su arancione (#ff7a00) ha circa 2,6:1 secondo le WCAG 2 e non supera il test, mentre il testo nero sullo stesso arancione lo supera; eppure molti lettori trovano la versione bianca altrettanto leggibile. APCA assegna punteggi più vicini alla percezione.
Livelli APCA come regola pratica: Lc 90 è il valore preferito per il corpo del testo, Lc 75 il minimo per il corpo del testo, Lc 60 per gli altri testi di contenuto, Lc 45 per i titoli grandi, Lc 30 per il testo segnaposto e disattivato e Lc 15 per gli elementi non testuali come i divisori. Le indicazioni complete dipendono anche dal peso e dalla dimensione del font. Consideralo un aiuto al design da affiancare alle WCAG 2, non un sostituto della verifica di conformità.
Strumenti gratuiti correlati
- Generatore di palette di colori — Premi la barra spaziatrice per una nuova palette, blocca i colori che ti piacciono, scegli un'armonia o ricava la palette da una foto. Esporta in CSS, Tailwind, SCSS, JSON o PNG.
- Selettore e convertitore di colori — Preleva qualsiasi colore da qualsiasi punto dello schermo o converti all'istante tra HEX, RGB e HSL.
- Generatore di gradienti CSS — Crea gradienti lineari, radiali e conici con punti di colore trascinabili, una manopola per l'angolo e preset. Copia il CSS o una classe Tailwind.
- Generatore di box-shadow — Crea effetti box-shadow e text-shadow a più livelli con anteprima dal vivo e preset per elevazione, neumorfismo e bagliore, poi copia il CSS.