Hva denne regelen sjekker
Sørg for at kontrasten mellom forgrunns- og bakgrunnsfarger oppfyller minimumsgrensene for kontrastforhold i WCAG 2 AA.
Hvorfor det er viktig
WCAG 1.4.3 krever et kontrastforhold på minst 4.5:1 for normal tekst og 3:1 for stor tekst. Svake priser, merker og bannere er vanskelige å lese for svaksynte, og for alle i sterkt lys.
Slik fikser du det
På alle nettsteder
- Finn teksten med lav kontrast, og noter tekstfargen og bakgrunnsfargen: en kontrastsjekker eller utviklerverktøyene i nettleseren viser begge.
- Endre tekst- eller bakgrunnsfargen i CSS-en til temaet ditt til forholdet er minst 4.5:1 (3:1 for tekst på 24px og større, eller 18,66px med fet skrift).
- Vær spesielt oppmerksom på salgsmerker, plassholdertekst, lenker i bunnteksten og knapper oppå bilder.
I Shopify
- Finn teksten med lav kontrast, og noter tekstfargen og bakgrunnsfargen: en kontrastsjekker eller utviklerverktøyene i nettleseren viser begge.
- I Nettbutikk > Temaer > Tilpass > Temainnstillinger > Farger gjør du tekstfargen mørkere eller bakgrunnen lysere for det berørte fargeskjemaet, til forholdet er minst 4.5:1.
- Vær spesielt oppmerksom på salgsmerker, plassholdertekst, lenker i bunnteksten og knapper oppå bilder.
Slik kontrollerer du utbedringen
- Kjør skanningen på nytt, og bekreft at color-contrast ikke lenger vises.
- Ta en stikkprøve med en kontrastsjekker på de nøyaktige fargene.
Slik finner FixReports det
Skanningen vår kjører axe-core-regelen color-contrast i en ekte Chrome-nettleser på hver side den tester, og rapporterer hvert element som feiler, med siden, markupen og, der det er relevant, et skjermbilde.
En automatisk test bekrefter at akkurat dette problemet finnes. Den kan ikke si om resten av siden er universelt utformet: noen barrierer viser seg først når et menneske sjekker siden.