Contrasto Colori (WCAG)
Card del report: Contrasto Colori
Misura il rapporto di contrasto tra testo e sfondo effettivamente renderizzati dal browser, secondo lo standard W3C WCAG 2.1 (livello AA). Disponibile solo in Modalità Completa (richiede il rendering JavaScript).
Come leggerla
Badge con il numero di elementi sotto soglia AA (4.5:1 testo normale, 3:1 testo grande) e un elenco con tag, testo, rapporto misurato e soglia richiesta. Gli elementi con sfondo a immagine o con testo a effetto sfumato/trasparente sono segnalati separatamente come "da verificare manualmente", non come fallimento certo.
Come interpretarla
Nessun elemento sotto soglia = contrasto adeguato secondo lo standard. Elementi sotto soglia = testo difficile da leggere per una parte significativa di utenti, non necessariamente un errore grave isolato. Non è un fattore di ranking Google ufficiale: è una best practice di accessibilità riconosciuta secondo lo standard W3C WCAG 2.1.
Cosa fare
- Scurisci il testo o schiarisci lo sfondo (o viceversa) fino a superare la soglia richiesta per quel tipo di testo.
- Su testo sovrapposto a immagini, aggiungi un overlay scuro/chiaro semi-trasparente dietro al testo.
- Verifica manualmente gli elementi segnalati come "da verificare" (sfondo con immagine o testo a effetto sfumato).
Domande frequenti
Per vedere questa card sul tuo sito, avvia un'analisi dalla home inserendo l'URL della pagina.
Le due soglie AA da conoscere
Testo normale — 4.5:1
Paragrafi, link, etichette e la maggior parte del testo del sito. Sotto questa soglia la lettura diventa faticosa per una parte significativa di utenti.
Testo grande — 3:1
Titoli e testo da almeno 24px (o 18.66px in grassetto), oltre a icone e componenti UI. La soglia è più permissiva perché i caratteri grandi restano leggibili con meno contrasto.
Da dove viene la formula
Il rapporto di contrasto è calcolato secondo la formula ufficiale W3C WCAG 2.1 - Contrast (Minimum), basata sulla luminanza relativa sRGB dei due colori effettivamente renderizzati dal browser (non su una stima dell'HTML statico).
Non è un fattore di ranking Google ufficiale. È una best practice di accessibilità riconosciuta a livello internazionale: un contrasto insufficiente rende il testo difficile da leggere per utenti con ipovisione, in ambienti molto luminosi o su schermi economici, indipendentemente da eventuali disabilità certificate.
Cosa non viene rilevato
L'analisi legge i colori effettivamente renderizzati dal browser, indipendentemente dal CMS o dal builder usato per creare il sito. Non copre invece: contenuti dentro iframe o Shadow DOM (alcuni widget esterni), testo con effetti CSS avanzati come filter o backdrop-filter, e banner cookie/consenso di terze parti (esclusi volutamente, perché non sono responsabilità del sito analizzato). In questi casi verifica il contrasto a occhio.