Cosa controlla questa regola
Assicurati che il contrasto tra i colori in primo piano e di sfondo soddisfi le soglie minime del rapporto di contrasto WCAG 2 AA.
Perché è importante
Il criterio WCAG 1.4.3 richiede un rapporto di contrasto di almeno 4.5:1 per il testo normale e 3:1 per il testo grande. Prezzi, badge e banner sbiaditi sono difficili da leggere per le persone ipovedenti, e per tutti in piena luce.
Come correggerlo
Su qualsiasi sito web
- Trova il testo a basso contrasto e annota il colore del testo e quello dello sfondo: uno strumento di verifica del contrasto o gli strumenti per sviluppatori del browser li mostrano entrambi.
- Modifica il colore del testo o dello sfondo nel CSS del tuo tema finché il rapporto non è almeno 4.5:1 (3:1 per il testo da 24px in su, o da 18,66px in grassetto).
- Presta particolare attenzione ai badge dei saldi, al testo segnaposto, ai link del footer e ai pulsanti sopra le immagini.
Su Shopify
- Trova il testo a basso contrasto e annota il colore del testo e quello dello sfondo: uno strumento di verifica del contrasto o gli strumenti per sviluppatori del browser li mostrano entrambi.
- In Negozio online > Temi > Personalizza > Impostazioni del tema > Colori, scurisci il colore del testo o schiarisci lo sfondo della combinazione di colori interessata finché il rapporto non è almeno 4.5:1.
- Presta particolare attenzione ai badge dei saldi, al testo segnaposto, ai link del footer e ai pulsanti sopra le immagini.
Come verificare la correzione
- Esegui di nuovo la scansione e verifica che color-contrast non compaia più.
- Fai una verifica a campione con uno strumento di controllo del contrasto sui colori esatti.
Come lo rileva FixReports
La nostra scansione esegue la regola axe-core color-contrast in un vero browser Chrome su ogni pagina che testa, e segnala ogni elemento non conforme con la sua pagina, il suo markup e, dove applicabile, uno screenshot.
Un test automatico conferma che questo specifico problema è presente. Non può dire se il resto della pagina è accessibile: alcune barriere emergono solo quando una persona controlla la pagina.