Il 72% dei Siti WordPress Fallisce il Test del Contrasto. Il Tuo?
Secondo il WebAIM Million Report 2024, il contrasto insufficiente è il problema di accessibilità più comune sul web: presente nell’83.6% dei siti analizzati. Su WordPress, la percentuale è simile.
Il problema è semplice: testo grigio chiaro (#999) su sfondo bianco (#fff). Sembra elegante. È illeggibile per milioni di persone con ipovisione. E viola WCAG 2.1 criterio 1.4.3 (contrast ratio minimo 4.5:1).
Le Soglie WCAG
| Tipo testo | AA (minimo) | AAA (raccomandato) |
|---|---|---|
| Testo normale (< 18px bold / < 24px) | 4.5:1 | 7:1 |
| Testo grande (≥ 18px bold / ≥ 24px) | 3:1 | 4.5:1 |
| Elementi UI e grafica | 3:1 | N/A |
Tool per Verificare il Contrasto
- Chrome DevTools: ispeziona un elemento, vedi il contrast ratio direttamente nel color picker
- WAVE (estensione Chrome): evidenzia tutti gli elementi con contrasto insufficiente sulla pagina
- Colour Contrast Analyser (desktop app): eyedropper per misurare qualsiasi colore sulla pagina
- Coolors Contrast Checker: inserisci colore testo e sfondo, vedi se passa
Fix Rapidi per WordPress
/* I colori problematici più comuni nei temi WordPress */
/* ❌ Grigio chiaro su bianco (2.8:1) */
color: #999; background: #fff;
/* ✅ Grigio scuro su bianco (7.4:1) */
color: #555; background: #fff;
/* ❌ Placeholder grigio chiaro (2.0:1) */
::placeholder { color: #ccc; }
/* ✅ Placeholder leggibile (4.6:1) */
::placeholder { color: #767676; }
/* ❌ Link blu chiaro (3.1:1) */
a { color: #5ba3e6; }
/* ✅ Link blu accessibile (4.5:1) */
a { color: #2563eb; }Audit Automatico del Contrasto
# Con pa11y, filtra solo i problemi di contrasto
npx pa11y https://tuosito.com --standard WCAG2AA --reporter json | \
jq '[.results[] | select(.code | contains("color-contrast"))]'FAQ
Il mio designer dice che i colori ad alto contrasto sono “brutti”. Cosa faccio?
Mostragli che design eccellente e accessibilità non sono in conflitto. Apple, Google, gov.uk usano palette ad alto contrasto e sono considerati riferimenti di design. Il grigio chiaro su bianco non è “elegante”, è pigro. Un buon designer trova colori belli E leggibili.
Devo controllare il contrasto anche sulle immagini con testo?
Sì. Testo su immagine di sfondo è un incubo di accessibilità: il contrasto varia in base alla zona dell’immagine. Soluzioni: overlay scuro semi-trasparente sotto il testo, o usa un colore di sfondo solido. Bonus: è anche meglio per il GEO (l’AI non può leggere testo nelle immagini).