Co toto pravidlo kontroluje
Ověřuje, že kontrast mezi barvou popředí a pozadí splňuje prahové hodnoty minimálního kontrastního poměru WCAG 2 AA.
Proč na tom záleží
WCAG 1.4.3 vyžaduje kontrastní poměr nejméně 4.5:1 pro běžný text a 3:1 pro velký text. Bledé ceny, štítky a bannery se špatně čtou lidem se slabým zrakem a na ostrém světle všem.
Jak to opravit
Na jakémkoli webu
- Najděte text s nízkým kontrastem a poznamenejte si barvu textu a pozadí: obojí ukáže nástroj pro kontrolu kontrastu nebo vývojářské nástroje prohlížeče.
- Upravte barvu textu nebo pozadí v CSS svého motivu, dokud poměr nebude alespoň 4.5:1 (3:1 pro text od 24px výše nebo 18,66px tučně).
- Zvláštní pozornost věnujte štítkům slev, zástupnému textu (placeholder), odkazům v patičce a tlačítkům na obrázcích.
V Shopify
- Najděte text s nízkým kontrastem a poznamenejte si barvu textu a pozadí: obojí ukáže nástroj pro kontrolu kontrastu nebo vývojářské nástroje prohlížeče.
- V nabídce Online obchod > Motivy > Přizpůsobit > Nastavení motivu > Barvy ztmavte barvu textu nebo zesvětlete pozadí u dotčeného barevného schématu, dokud poměr nebude alespoň 4.5:1.
- Zvláštní pozornost věnujte štítkům slev, zástupnému textu (placeholder), odkazům v patičce a tlačítkům na obrázcích.
Jak opravu ověřit
- Spusťte sken znovu a ověřte, že se color-contrast už mezi chybami neobjevuje.
- Namátkově ověřte přesné barvy nástrojem pro kontrolu kontrastu.
Jak to FixReports zjišťuje
Náš sken spouští pravidlo axe-core color-contrast ve skutečném prohlížeči Chrome na každé testované stránce a hlásí každý chybný prvek spolu se stránkou, jeho kódem a tam, kde to dává smysl, i snímkem obrazovky.
Automatický test potvrzuje, že tento konkrétní problém existuje. Nedokáže posoudit, zda je zbytek stránky přístupný: některé bariéry se ukážou, až když stránku zkontroluje člověk.