Přejít na obsah
Pandus
cs Změnit jazyk
Menu

Požadavek WCAG A/AA Priorita: Závažné

Text se špatně čte kvůli nízkému kontrastu

Některý text je vůči pozadí příliš světlý, například šedý text na bílé nebo bílý text na bledém tlačítku.

Tento text byl přeložen automaticky a rodilý mluvčí ho zatím nezkontroloval.

Proč na tom záleží vašim zákazníkům

Zákazníci s horším zrakem, starší lidé a kdokoli s mobilem venku na slunci mohou přehlédnout ceny, dodací podmínky nebo popisky tlačítek. Špatně čitelný text vede k váhání a opuštěným košíkům.

Koho se to týká

  • lidé se slabozrakostí
  • starší zákazníci
  • lidé s poruchou barvocitu
  • lidé na mobilu za jasného světla

Jak to opravit

Zajistěte kontrastní poměr alespoň 4.5:1 u běžného textu a 3:1 u velkého textu (24px, nebo 18.66px tučně). Zkontrolujte placeholdery, prvky, které vypadají jako neaktivní, text na obrázcích a štítky slev. Barvy opravujte v design tokenech nebo v CSS, ne u každého prvku zvlášť.

V Shopify

Obvykle vychází z barevného schématu šablony. Nejprve upravte barvy textu a pozadí v nastavení barev v editoru šablony; pokud má šablona barvy napevno, změňte je v CSS nebo v sekcích Liquid šablony.

V Shoptet (CZ)

Obvykle vychází ze zvolené šablony a jejího nastavení barev. Upravte barvy v nastavení šablony, nebo přidejte vlastní CSS přes možnosti vlastního kódu, které Shoptet nabízí.

V PrestaShop

Obvykle jsou definované v CSS motivu. Přepište barvy ve vlastním souboru CSS motivu nebo v podřízeném motivu; některé motivy nabízejí volby barev v konfiguračním modulu motivu.

V WooCommerce

Obvykle je nastavuje aktivní šablona nebo page builder. Změňte barvy v customizeru šablony nebo v globálních stylech, případně je přepište v CSS podřízené šablony (child theme), aby oprava nezmizela při aktualizaci.

Normy

Normy
NormaBod
WCAG 2.2 1.4.3 (AA) Contrast (Minimum)
WCAG 2.1 1.4.3 (AA) Contrast (Minimum)
WCAG 2.0 1.4.3 (AA) Contrast (Minimum)
EN 301 549 4.1.1 9.1.4.3
EN 301 549 3.2.1 9.1.4.3
Section 508 2017 E205.4
ДСТУ EN 301 549 2022 9.1.4.3

Automatická kontrola: pravidlo axe-core color-contrast. dequeuniversity.com, github.com, www.w3.org

Podobné kontroly

Všechna pravidla, která kontrolujeme