Nekonzistentní barvy tlačítek a odkazů napříč webem

Napříč všemi stránkami vzorku se posbírají barvy prvků, které modul rozpoznal jako akcentní nebo odkazové (tedy tlačítka a odkazy), a spočítá se, kolik je jich různých. Nález vznikne, když jich je víc než 6 (config/colors.json#consistency.distinct_accent_or_link_colors_threshold).

Je to jediný nález modulu barev, který se dívá na web jako celek, ne na jednotlivou stránku. Proto se v reportu objeví nanejvýš jednou a nemá přiřazenou konkrétní stránku.

Co kontrola nedělá: nerozlišuje záměrné odstupňování (hlavní a vedlejší tlačítko mají různé barvy právem) od nahodilosti, nepozná stavy (najetí, stisknutí, zakázané tlačítko) a nevidí barvy prvků mimo vzorek. Nález je na úrovni celého webu a je informativní.

Na viditelnost v odpovědích AI to vliv nemá žádný a opory v normě nemá také žádnou. Práh 6 je naše konvence z praxe, označená jako návrh k revizi.

O čem to tedy je: o tom, jestli se návštěvník na vašem webu naučí, co je klikací. Když má tlačítko na jedné stránce jednu barvu a na druhé jinou, musí to rozhodnutí dělat pokaždé znovu. Není to bariéra, je to daň z pozornosti.

Nepřímá souvislost s přístupností tu je, i když ji náš nález neměří: nekonzistentní barva odkazů zvyšuje šanci, že se někde spolehnete jen na barvu a jinde jen na podtržení, a to už je COLOR-03 a kritérium WCAG 1.4.1.

Kdy to ignorovat: máte-li navržený systém, ve kterém má hlavní akce jednu barvu, vedlejší druhou, destruktivní třetí, odkaz čtvrtou a v tmavém motivu to má varianty, snadno se dostanete nad šest a je to v pořádku.

Kdy se podívat: když jste žádný takový systém nenavrhli. Pak sedm barev tlačítek znamená sedm rozhodnutí, která udělal někdo jiný a nikdo je nesladil.

Tohle se neopravuje po stránkách, ale rozhodnutím. Postup, který funguje i na velkém webu:

1. Určete role, ne barvy. Hlavní akce, vedlejší akce, destruktivní akce, odkaz v textu. Většinou stačí čtyři.
2. Každé roli přiřaďte jednu barvu a zapište ji jako proměnnou v CSS.
3. Projděte web a přemapujte existující tlačítka na role. Tady se obvykle zjistí, že tři různé modré znamenaly totéž.
4. U barev, které zbydou, se ptejte, čí jsou. Bývají to komponenty třetích stran: vložený formulář, chat, platební tlačítko. Ty se často dají nastylovat, jen na ně nikdo nesáhl.

:root {
  --btn-primary: #225473;
  --btn-secondary: #5b6470;
  --btn-danger: #b3261e;
  --link: #225473;
}

• Stavy odvozujte z barvy role, ne novou barvou: ztmavením nebo zesvětlením téže hodnoty.
• Ověřte kontrast každé nové dvojice (COLOR-01). Sjednocení palety je nejlevnější chvíle, kdy se to dá udělat najednou.
• Nezapomeňte na tmavý motiv, pokud ho máte: role zůstávají, hodnoty se mění.