Vad regeln kontrollerar
Säkerställ att kontrasten mellan förgrunds- och bakgrundsfärger uppfyller tröskelvärdena för WCAG 2 AA minimikontrast.
Därför spelar det roll
WCAG 1.4.3 kräver ett kontrastförhållande på minst 4.5:1 för normal text och 3:1 för stor text. Bleka priser, märken och banners är svåra att läsa för personer med nedsatt syn, och för alla i starkt ljus.
Så åtgärdar du det
På valfri webbplats
- Hitta texten med låg kontrast och notera dess text- och bakgrundsfärg: ett kontrastverktyg eller webbläsarens utvecklarverktyg visar båda.
- Ändra text- eller bakgrundsfärgen i temats CSS tills förhållandet är minst 4.5:1 (3:1 för text som är 24px eller större, eller 18,66px i fetstil).
- Var särskilt uppmärksam på reamärken, platshållartext, länkar i sidfoten och knappar ovanpå bilder.
I Shopify
- Hitta texten med låg kontrast och notera dess text- och bakgrundsfärg: ett kontrastverktyg eller webbläsarens utvecklarverktyg visar båda.
- Under Onlinebutik > Teman > Anpassa > Temainställningar > Färger (Online Store > Themes > Customize > Theme settings > Colors) gör du textfärgen mörkare eller bakgrunden ljusare i det berörda färgschemat tills förhållandet är minst 4.5:1.
- Var särskilt uppmärksam på reamärken, platshållartext, länkar i sidfoten och knappar ovanpå bilder.
Så kontrollerar du åtgärden
- Kör skanningen igen och bekräfta att color-contrast inte längre visas.
- Stickprovskontrollera de exakta färgerna med ett kontrastverktyg.
Så hittar FixReports det
Vår skanning kör axe-core-regeln color-contrast i en riktig Chrome-webbläsare på varje sida den testar och rapporterar varje felande element med sida, kod och, där det är relevant, en skärmbild.
Ett automatiskt test bekräftar att just det här problemet finns. Det kan inte avgöra om resten av sidan är tillgänglig: vissa hinder syns först när en människa granskar sidan.