Controllo contrasto WCAG
Verifica se testo e sfondo rispettano i rapporti di contrasto WCAG AA e AAA.
Cosa copre questa pagina
Questa pagina spiega il flusso di lavoro e collega direttamente alla sezione corretta dello strumento principale Chromaforge.
- Genera palette da un colore base.
- Controlla il contrasto prima di pubblicare testo UI.
- Esporta CSS, Tailwind, SCSS, JSON, SVG e PNG.
- Funziona localmente nel browser.
Come funziona il controllo contrasto WCAG
Il rapporto di contrasto si calcola confrontando la luminanza relativa di due colori secondo la formula WCAG 2.1. Il risultato è un numero da 1:1 (nessun contrasto) a 21:1 (nero su bianco).
Lo standard WCAG definisce due livelli: AA richiede almeno 4.5:1 per testo normale e 3:1 per testo grande (18pt o 14pt grassetto). Il livello AAA alza l'asticella a 7:1 per testo normale e 4.5:1 per testo grande.
In Chromaforge, ogni coppia di colori nella palette viene controllata automaticamente. Quando generi una scala da un colore brand, lo strumento mostra immediatamente quali step superano AA e quali AAA, così puoi scegliere le combinazioni sicure senza aprire un foglio di calcolo.
Una cosa che spesso sorprende: il testo su sfondo colorato è più crítico del testo bianco su nero. Un blu medio (#0070c0) su bianco supera AA con 4.6:1, ma su grigio chiaro (#e0e0e0) scende a 3.1:1 e fallisce per testo normale. Verifica sempre la coppia esatta che userai in produzione.
Esempi pratici
- Bottoni CTA: il colore brand come sfondo del pulsante non sempre supera AA con testo bianco. Usa lo strumento per trovare la variante più scura che funziona.
- Badge e tag: i badge colorati con testo piccolo (sotto 14pt) richiedono 4.5:1, non 3:1. Molte palette falliscono qui.
- Dark mode: verifica la stessa palette su sfondo scuro — spesso i toni medi diventano insufficienti.
- Placeholder di form: il placeholder grigio chiaro su input bianco è una delle violazioni più comuni; deve superare 4.5:1 come il testo normale.
FAQ — Contrasto WCAG
Qual è la differenza tra WCAG AA e AAA?
AA è il livello minimo richiesto dalla maggior parte delle normative sull'accessibilità (inclusa la EU Web Accessibility Directive). AAA è lo standard più alto, raccomandato per testi lunghi o utenti con ipovisione severa. Nella pratica, molte interfacce puntano ad AA e raggiungono AAA solo per il corpo testo principale.
Il contrasto 3:1 vale solo per i titoli?
Vale per testo grande, definito come almeno 18pt (24px) in peso normale, oppure 14pt (18.67px) in grassetto. Un titolo h1 a 32px supera sicuramente la soglia "testo grande". Un label di form a 13px no: richiede 4.5:1.
Il contrasto si applica anche alle icone?
Sì. Gli elementi grafici informativi (icone che trasmettono significato senza testo alternativo visibile) devono rispettare il rapporto 3:1 contro lo sfondo adiacente, secondo il criterio WCAG 1.4.11 Non-text Contrast.
Devo controllare anche i link nel testo?
Se distingui i link dal testo normale solo con il colore (senza sottolineatura), il colore del link deve avere un contrasto di 3:1 sia contro lo sfondo che contro il testo circostante. È più semplice usare la sottolineatura e preoccuparsi solo del contrasto link/sfondo.
WCAG 3.0 cambierà qualcosa?
WCAG 3.0 (ancora in draft) introdurrà APCA (Advanced Perceptual Contrast Algorithm), che valuta il contrasto in modo più sofisticato considerando dimensione font, peso e polarità (testo chiaro su scuro vs scuro su chiaro). Per ora WCAG 2.1 AA rimane lo standard applicabile.