Contrasto cromatico WCAG per designer
La regola 4.5:1, il calcolo del rapporto di contrasto e strumenti gratuiti per verificare qualsiasi coppia di colori.
Se il tuo testo non raggiunge il contrasto WCAG AA, si stima che 285 milioni di persone con problemi di vista non possano leggerlo. Inoltre, ti trovi su un terreno legale sempre più instabile nell'UE e negli Stati Uniti. La buona notizia: la regola è semplice.
La regola 4.5:1
Il testo del corpo deve avere un rapporto di contrasto di almeno 4.5:1 rispetto allo sfondo per superare WCAG AA. Il testo grande (24px+ normale o 18px+ grassetto) ha una soglia più bassa di 3:1.
Per la conformità AAA: 7:1 per il testo del corpo, 4.5:1 per il testo grande.
Come si calcola il rapporto di contrasto
WCAG utilizza la luminanza relativa — converti ogni colore in un valore di luminanza (0 = nero, 1 = bianco) usando una formula specifica, poi calcola (L1 + 0.05) / (L2 + 0.05), dove L1 è il colore più chiaro.
Non devi fare i calcoli — usa il nostro verificatore di contrasto gratuito per inserire due colori qualsiasi e vedere il rapporto.
Casi di fallimento comuni
- Grigio chiaro su bianco — #999 su #fff = 2.85 (fallisce). #767676 su #fff = 4.54 (supera).
- Bianco su giallo — quasi sempre fallisce. Usa testo scuro su giallo.
- Link colorati nel testo del corpo — la maggior parte dei link blu superano su bianco ma falliscono su grigio chiaro. Testa lo sfondo circostante effettivo.
- Colori del marchio che sembrano fantastici — spesso falliscono. Aggiungi uno sfondo bianco sporco o scurisci il testo.
Scegliere coppie di colori accessibili
Tre pattern affidabili:
- Scuro su chiaro — #1f2937 su #fff = 14:1 (perfetto).
- Bianco su scuro — #fff su #1f2937 = 14:1 (perfetto).
- Scuro su accento — #1f2937 su #fbbf24 = 9:1 (perfetto per i pulsanti).
Oltre il testo
WCAG 2.1 richiede anche 3:1 per elementi non testuali (pulsanti, anelli di focus, bordi dei moduli). Il verificatore gestisce entrambi.
Sfondi che non confliggono con i tuoi widget
Se sei un designer che imposta sfondi dietro widget di orologi e notifiche, scegli sfondi con contrasto inferiore a 5:1 nelle zone dei widget. Il nostro strumento Sfocatura gaussiana può ammorbidire le aree affollate di qualsiasi sfondo per una migliore leggibilità dei widget.
Prova i nostri strumenti gratuiti
La maggior parte di queste guide è abbinata a uno strumento pratico che puoi usare subito — nessuna registrazione necessaria per il primo utilizzo:
- Ridimensionatore di immagini — downscale e upscale pixel-perfect.
- Converti in WebP — file più piccoli del 30-50% rispetto a JPG.
- Rimuovi sfondo — ritaglio in un clic, PNG trasparente.
- Generatore di favicon — tutte le dimensioni del browser da una singola fonte.
- Ridimensionatore per social media — dimensioni esatte per ogni piattaforma.
- Elaborazione in batch — applica qualsiasi strumento fino a 200 immagini alla volta.
Sfoglia il catalogo completo degli strumenti.
