Overte kontrast každej textovej a funkčnej kombinácie v reálnom stave a význam farby vždy doplňte textom, ikonou, tvarom alebo vzorom.
Farba pomáha vytvoriť hierarchiu a značku, no nesmie byť jediným nositeľom významu. Červené pole bez textu, zelený bod bez popisu alebo sivý odkaz bez podčiarknutia môžu byť nejasné pri poruche farebného videnia, slabom displeji aj na priamom slnku. Kontrast treba posudzovať medzi konkrétnymi susednými farbami a v reálnom stave prvku.
Prístupný návrh neznamená obmedziť web na čiernu a bielu. Potrebuje definované textové a netextové páry, ďalší znak pre stav a testovanie tém, focusu, obrázkov aj grafov. Aktuálne požiadavky WCAG a spôsob výpočtu overujte v oficiálnych zdrojoch; samotný vizuálny dojem alebo názov farby nie je meranie.
Text sa meria proti skutočnému pozadiu
Kontrolujte bežný text, nadpisy, odkazy, popisy, placeholdery, chybové správy aj text v tlačidlách. Pozadie môže byť plná farba, gradient, fotografia alebo polopriehľadná vrstva. Pri obraze otestujte najslabšie miesto alebo pridajte stabilný podklad. Tieň textu nie je spoľahlivá náhrada za vhodnú kombináciu.
Veľkosť a hrúbka písma ovplyvňujú kritérium, no nespoliehajte sa na hraničný dizajn. Vlastný font sa môže vykresliť tenšie a používateľ môže zmeniť mierku. Definujte farby ako tokeny s povoleným použitím, aby editor náhodne nezvolil svetlý text pre malé popisy alebo odkazy.
Ovládacie prvky a focus potrebujú netextový kontrast
Hranica vstupu, ikona, zaškrtnutie, grafický prepínač a indikátor focusu nesú funkčný význam aj bez textu. Overte ich proti okoliu a medzi stavmi podľa aktuálnych kritérií. Ak pole splýva s pozadím, používateľ nemusí zistiť, kam písať, hoci jeho label má výborný kontrast.
Focus musí byť odlíšiteľný od nefokusovaného stavu aj od susedných farieb. Hover nenahrádza focus a selected nenahrádza disabled. Testujte komponent na rôznych povrchoch, pretože rovnaký modrý obrys môže fungovať na bielej karte a zmiznúť na modrom bannere. Dizajnový systém má uvádzať povolené kombinácie.
- hranice polí a aktívne ovládacie prvky
- ikony potrebné na pochopenie funkcie
- viditeľný focus na každom povrchu
- rozlíšenie active, selected, error a disabled
Stav musí mať textový alebo tvarový ekvivalent
Chybu označte textom a prepojte s poľom, úspech potvrďte správou a povinnosť vysvetlite slovom alebo symbolom s legendou. V tabuľke nepoužívajte iba zelené a červené bunky. Pridajte text, ikonu s prístupným názvom alebo vzor, ktorý zostane zrozumiteľný aj bez farby.
Odkaz v súvislom texte odlíšte spôsobom, ktorý nie je založený iba na odtieni, napríklad podčiarknutím. Pri hoveri a focuse zmenu posilnite, nie odstráňte. Ikona sama potrebuje textový názov, ak vykonáva akciu. Dekoratívna ikona naopak nemá byť zbytočne oznamovaná asistívnej technológii.
Grafy, mapy a obrázky vyžadujú samostatný dátový návrh
V grafe kombinujte farbu s tvarom bodu, typom čiary, vzorom alebo priamym popisom. Legenda vzdialená od dát zvyšuje námahu. Poskytnite textové zhrnutie a podľa potreby prístupnú tabuľku. Nezvyšujte počet farebných sérií nad schopnosť spoľahlivo ich rozlíšiť len preto, že nástroj ponúka paletu.
Text vložený do obrázka sa ťažko zväčšuje a prekladá. Ak je nevyhnutný, potrebuje alternatívu a overený kontrast v konečnom výstupe. Mapa nemá odovzdávať stav iba farbou pinov; zoznam miest alebo filtre s textom umožnia rovnakú úlohu aj používateľovi, ktorý vizuálny kód nevidí.
- priame popisy sérií a hodnôt
- tvar alebo vzor popri farbe
- textové zhrnutie hlavného zistenia
- alternatívna tabuľka pri detailných dátach
- kontrast overený vo všetkých témach
- význam stavu dostupný aj bez farby
- hover, focus a selected ako odlišné stavy
- kontrola výslednej farby po priehľadnosti
- povolené farebné páry v dizajnovom systéme
Testovanie pokrýva tokeny, obsah aj používateľské nastavenia
Automaticky skontrolujte bežné kombinácie, no manuálne prejdite hover, focus, error, disabled, modál a dynamický obsah. Testujte svetlú aj tmavú tému, vysoký kontrast systému a vypnuté pozadie obrázkov. Pipeta musí zmerať výslednú farbu po priehľadnosti, nie iba hodnotu tokenu v zdrojovom súbore.
Do procesu publikovania pridajte povolené štýly a kontrolu nových komponentov. Zmena značkovej palety potrebuje regresný audit, pretože môže ovplyvniť desiatky stavov. Používateľské testovanie odhalí zámenu významov, ktorú samotný pomer neukáže. Splnenie technického minima nie je garancia pohodlného čítania.
Časté otázky
Stačí skontrolovať kontrast základného textu?
Nie. Overte odkazy, popisy, placeholdery, tlačidlá, hranice polí, ikony, focus a všetky interaktívne stavy na ich skutočnom pozadí.
Môžeme chybu označiť červenou farbou?
Áno ako doplnok, nie ako jediný signál. Pridajte zrozumiteľný text, programové priradenie a podľa potreby ikonu alebo ďalší vizuálny znak.
Je automatický kontrastný test úplný?
Nie. Nemusí vidieť všetky stavy, gradienty, obrázky ani význam prenášaný farbou. Doplňte ho manuálnou a používateľskou kontrolou.
Zdroje a ďalšie čítanie
Web developer zo Spišskej Novej Vsi. Venuje sa WordPressu, WooCommerce, vlastným pluginom, API integráciám, webovým aplikáciám a praktickým AI automatizáciám.
