Ověřte kontrast každé textové a funkční kombinace v reálném stavu a význam barvy vždy doplňte textem, ikonou, tvarem nebo vzorem.
Barva pomáhá vytvářet hierarchii a podporuje identitu značky, nesmí však být jediným nositelem významu. Červené pole bez textu, zelený bod bez popisku nebo šedý odkaz bez podtržení mohou být nejasné při poruše barevného vidění, na slabém displeji i na přímém slunci. Kontrast je třeba posuzovat mezi konkrétními sousedními barvami a ve skutečném stavu prvku.
Přístupný návrh neznamená omezit web na černou a bílou. Potřebuje definované textové a netextové páry, další znak pro stav a testování motivů, focusu, obrázků i grafů. Aktuální požadavky WCAG a způsob výpočtu ověřujte v oficiálních zdrojích; samotný vizuální dojem nebo název barvy není měření.
Text se měří proti skutečnému pozadí
Kontrolujte běžný text, nadpisy, odkazy, popisky, placeholdery, chybové zprávy i text v tlačítkách. Pozadím může být plná barva, gradient, fotografie nebo poloprůhledná vrstva. U obrázku otestujte nejslabší místo nebo přidejte stabilní podklad. Stín textu není spolehlivou náhradou vhodné barevné kombinace.
Velikost a tloušťka písma ovlivňují kritérium, ale nespoléhejte na hraniční design. Vlastní font se může vykreslit tenčí a uživatel může změnit měřítko. Definujte barvy jako tokeny s povoleným použitím, aby editor náhodně nezvolil světlý text pro malé popisky nebo odkazy.
Ovládací prvky a focus potřebují netextový kontrast
Ohraničení vstupního pole, ikona, zaškrtnutí, grafický přepínač a indikátor fokusu nesou funkční význam i bez textu. Ověřte je vůči okolí a mezi stavy podle aktuálních kritérií. Pokud pole splývá s pozadím, uživatel nemusí zjistit, kam psát, přestože jeho label má výborný kontrast.
Focus musí být odlišitelný od stavu bez fokusu i od sousedních barev. Hover nenahrazuje focus a selected nenahrazuje disabled. Testujte komponentu na různých površích, protože stejný modrý obrys může fungovat na bílé kartě a zmizet na modrém banneru. Designový systém má uvádět povolené kombinace.
- hranice polí a aktivní ovládací prvky
- ikony potřebné k pochopení funkce
- viditelný focus na každém povrchu
- rozlišení active, selected, error a disabled
Stav musí mít textový nebo tvarový ekvivalent
Chybu označte textem a propojte ji s polem, úspěch potvrďte zprávou a povinnost vysvětlete slovem nebo symbolem s legendou. V tabulce nepoužívejte pouze zelené a červené buňky. Přidejte text, ikonu s přístupným názvem nebo vzor, který zůstane srozumitelný i bez barvy.
Odkaz v souvislém textu odlište způsobem, který není založen pouze na odstínu, například podtržením. Při hoveru a focusu změnu posilte, neodstraňujte ji. Samotná ikona potřebuje textový název, pokud provádí akci. Dekorativní ikona naopak nemá být zbytečně oznamována asistivním technologiím.
Grafy, mapy a obrázky vyžadují samostatný datový návrh
V grafu kombinujte barvu s tvarem bodu, typem čáry, vzorem nebo přímým popiskem. Legenda vzdálená od dat zvyšuje námahu. Poskytněte textové shrnutí a podle potřeby přístupnou tabulku. Nezvyšujte počet barevných sérií nad míru, kterou lze spolehlivě rozlišit, jen proto, že nástroj nabízí paletu.
Text vložený do obrázku se obtížně zvětšuje a překládá. Pokud je nezbytný, potřebuje alternativu a ověřený kontrast ve finálním výstupu. Mapa nemá předávat stav pouze barvou špendlíků; seznam míst nebo filtry s textem umožní stejný úkol i uživateli, který vizuální kód nevidí.
- přímé popisy sérií a hodnot
- tvar nebo vzor vedle barvy
- textové shrnutí hlavního zjištění
- alternativní tabulka u detailních dat
- kontrast ověřený ve všech motivech
- význam stavu dostupný i bez barvy
- hover, focus a selected jako odlišné stavy
- kontrola výsledné barvy po průhlednosti
- povolené barevné páry v designovém systému
Testování pokrývá tokeny, obsah i uživatelská nastavení
Běžné kombinace zkontrolujte automaticky, ale ručně projděte hover, focus, error, disabled, modální okno a dynamický obsah. Testujte světlý i tmavý motiv, systémový vysoký kontrast a vypnuté obrázky na pozadí. Kapátko musí změřit výslednou barvu po aplikaci průhlednosti, nikoli jen hodnotu tokenu ve zdrojovém souboru.
Do procesu publikování přidejte povolené styly a kontrolu nových komponent. Změna značkové palety vyžaduje regresní audit, protože může ovlivnit desítky stavů. Uživatelské testování odhalí záměnu významů, kterou samotný kontrastní poměr neukáže. Splnění technického minima není zárukou pohodlného čtení.
Časté dotazy
Stačí zkontrolovat kontrast základního textu?
Ne. Ověřte odkazy, popisky, placeholdery, tlačítka, hranice polí, ikony, focus a všechny interaktivní stavy na jejich skutečném pozadí.
Můžeme chybu označit červenou barvou?
Ano jako doplněk, nikoli jako jediný signál. Přidejte srozumitelný text, programové přiřazení a podle potřeby ikonu nebo další vizuální znak.
Je automatický test kontrastu úplný?
Ne. Nemusí vidět všechny stavy, gradienty, obrázky ani význam přenášený barvou. Doplňte ho manuální a uživatelskou kontrolou.
Zdroje a další čtení
Adam Antoni vyvíja weby, aplikácie a softvér na mieru. Prepája firemné systémy, automatizuje procesy a vytvára AI agentov. Pôsobí v Spišskej Novej Vsi a spolupracuje s firmami na celom Slovensku.
