Farebný kontrast a prístupnosť: pomery WCAG, kontrola a opravy

Svetlosivý text na bielom pozadí vyzerá v grafickom návrhu čisto. Na telefóne na ostrom slnku alebo pre človeka so slabým zrakom sa však číta ťažko. Je to aj najčastejšia chyba prístupnosti vôbec: WebAIM Million 2026 (otvorí sa na novej karte) našiel text s nízkym kontrastom na 83,9 % z milióna najnavštevovanejších domovských stránok, v priemere 34 samostatných výskytov na stránku.

Dobrá správa je, že kontrast sa dá zmerať, hranice sú jasné a opravy väčšinou lacné. Tento návod vám dá čísla, bezplatné nástroje a postup, ako upraviť farby značky bez toho, aby ste začínali odznova.

Čo je kontrastný pomer farieb?

Kontrastný pomer je číslo, ktoré porovnáva relatívny jas, teda luminanciu, dvoch farieb, zvyčajne textu a jeho pozadia. WCAG ho počíta pevným vzorcom a výsledok sa pohybuje od 1:1 (žiadny rozdiel, biela na bielej) po 21:1 (čierna na bielej). Čím vyššie číslo, tým ľahšie sa dajú dve farby rozlíšiť.

Vzorec je (L1 + 0,05) / (L2 + 0,05), kde L1 je relatívna luminancia svetlejšej farby a L2 tmavšej. Ručne ho počítať nikdy nebudete, no jeden detail je dôležitý: počíta sa len luminancia, nie odtieň. Preto môže červený text na zelenom pozadí pôsobiť živo a aj tak dosiahnuť zlé skóre.

Ďalším detailom, ktorý ľudia prehliadajú, je zaokrúhľovanie. Vysvetľujúci dokument W3C ku kritériu 1.4.3 (otvorí sa na novej karte) uvádza, že vypočítané hodnoty „by sa nemali zaokrúhľovať (napr. 4,499:1 nesplní hranicu 4,5:1)“. Sivá #767676 na bielej (4,54:1) teda vyhovuje, kým #777777 na bielej (4,48:1) nie, hoci okom by ich nikto nerozoznal.

Aký kontrastný pomer vyžaduje WCAG?

Na úrovni AA, na ktorú odkazuje väčšina zákonov a zmlúv, potrebuje bežný text voči pozadiu aspoň 4,5:1 a veľký text 3:1 (kritérium úspešnosti 1.4.3). Komponenty rozhrania a významová grafika potrebujú 3:1 voči susedným farbám (1.4.11). Prísnejšia úroveň AAA požaduje 7:1 pre bežný text a 4,5:1 pre veľký text (1.4.6).

Prečo práve 4,5:1? W3C vysvetľuje, že táto hodnota „kompenzuje stratu citlivosti na kontrast, ktorú zvyčajne zažívajú používatelia so stratou zraku zodpovedajúcou zrakovej ostrosti približne 20/40“. Inými slovami, je nastavená pre ľudí s mierne zníženým zrakom, medzi ktorých patrí aj veľa starších zákazníkov, ktorí by o sebe nikdy nepovedali, že majú zdravotné postihnutie.

Niektorý text je výnimkou: logá a názvy značiek, čisto dekoratívny text, text, ktorý nikto nevidí, text na obrázku s výrazným iným vizuálnym obsahom a text v neaktívnych (zakázaných) ovládacích prvkoch. Vaše logo môže zostať, aké je. Odsek vysádzaný bledou farbou loga však nie.

Čo sa považuje za veľký text?

Veľký text vo WCAG znamená aspoň 18 bodov, alebo aspoň 14 bodov, ak je tučný. W3C to prepočítava približne na 24 CSS pixelov a 18,5 pixela pri tučnom písme. Všetko menšie potrebuje plných 4,5:1. Základný text, popisky obrázkov, popisy formulárov, ceny a odkazy v päte webu takmer nikdy nie sú veľkým textom, takže potrebujú vyšší pomer.

V praxi to vyzerá takto. Sivá #949494 na bielej dosahuje 3,03:1. Pre nadpis s veľkosťou 28 pixelov je to v poriadku, pre 16-pixelový odsek v tej istej farbe ide o chybu. Množstvo webov pri nadpisoch prejde a pri všetkom pod nimi zlyhá.

Tenké a ozdobné písma si vyžadujú zvláštnu pozornosť. W3C upozorňuje, že kvôli vyhladzovaniu hrán „používateľské agenty môžu obzvlášť tenké alebo nezvyčajné písma vykresliť oveľa slabšou farbou“, než akú ste zvolili. Ak má vaše firemné písmo tenký rez, nechajte si rezervu nad 4,5:1 a nemierte tesne na 4,51:1.

Vzťahuje sa kontrast aj na tlačidlá, ikony, indikátory fokusu a grafy?

Áno. Podľa kritéria úspešnosti 1.4.11 (úroveň AA) potrebuje všetko, čo ľudia musia vidieť, aby rozpoznali ovládací prvok, jeho stav alebo grafiku, pomer 3:1 voči farbám vedľa seba. Patria sem okraje formulárových polí, ikony bez textového popisu, obrysy fokusu, stavy zaškrtávacích políčok a prepínačov a čiary a výseky grafov. Text vnútri tlačidla stále potrebuje 4,5:1.

• Polia formulárov: svetlosivý okraj #CCCCCC na bielej dosahuje 1,61:1. Ak je táto slabá čiara jediné, čo ukazuje, kam písať, nevyhovuje.
• Tlačidlá: WCAG nevyžaduje viditeľný okraj okolo každého tlačidla. Vysvetľujúci dokument W3C ku kritériu 1.4.11 (otvorí sa na novej karte) uvádza, že hranica je potrebná len vtedy, keď ovládací prvok nemožno rozpoznať inak vizuálne. Ak je tlačidlo rozpoznateľné len podľa farebného tvaru, tento tvar potrebuje voči stránke 3:1.
• Ikony: lupa vyhľadávania, srdiečko zoznamu želaní alebo ikona košíka bez textu vedľa potrebujú 3:1.
• Indikátory fokusu: obrys, ktorý ukazuje fokus klávesnice, musí kontrastovať s pozadím okolo seba. Novšie kritériá fokusu opisuje náš návod k WCAG 2.2.
• Grafy: čiary v čiarovom grafe a výseky koláčového grafu potrebujú 3:1, pokiaľ tie isté hodnoty nie sú uvedené aj textom.
• Zakázané ovládacie prvky sú výnimkou, hoci ľudia aj tak potrebujú vedieť, či sa tlačidlo dá stlačiť.

Odkazy v súvislom texte sú osobitný prípad. Ak ich odlišuje len farba, bez podčiarknutia, technika W3C G183 (otvorí sa na novej karte) požaduje 3:1 medzi farbou odkazu a okolitým textom, pričom oboje stále potrebuje 4,5:1 voči pozadiu. Nájsť tri farby, ktoré toto všetko splnia, je ťažké. Podčiarknutie je oveľa jednoduchšie.

Ako skontrolovať farebný kontrast?

Na konkrétne farebné dvojice použite bezplatný nástroj na kontrolu kontrastu, na živé stránky vývojárske nástroje prehliadača a na vyhľadanie problémových miest na celom webe automatický sken. Potom okom skontrolujte, čo nástroje prehliadnu: text na fotkách a prechodoch, stavy pri prejdení myšou a pri fokuse, zástupný text a chybové hlásenia. Väčšina z toho zaberie pár minút na jednu šablónu stránky.

• WebAIM Contrast Checker (otvorí sa na novej karte): zadajte dva hexadecimálne kódy a dostanete pomer s výsledkom vyhovuje/nevyhovuje pre bežný text, veľký text a grafické objekty. Jeho posuvník svetlosti pomôže nájsť najbližší vyhovujúci odtieň.
• Colour Contrast Analyser (otvorí sa na novej karte): bezplatná desktopová aplikácia od spoločnosti Vispero pre Windows a macOS. Jej kvapkadlo odoberie vzorku z ľubovoľného pixela na obrazovke, čo sa hodí pri texte na obrázkoch, v PDF a v aplikáciách, a obsahuje aj simulátor farbosleposti.
• Chrome DevTools: preskúmajte časť textu a otvorte výber farby. Jeho sekcia kontrastného pomeru (otvorí sa na novej karte) zobrazuje čiary pre AA a AAA a vie navrhnúť vyhovujúcu farbu. Panel CSS Overview vypíše všetky problémy s kontrastom na stránke.
• Automatické nástroje: rozšírenia prehliadača a Lighthouse označia text s nízkym kontrastom na celej stránke, no text na obrázkoch alebo prechodoch často označia ako vyžadujúci ručnú kontrolu, namiesto toho, aby ho vyhodnotili ako vyhovujúci alebo nevyhovujúci.

Kde nástroje nestačia, odoberte vzorku ručne. Pri texte na úvodnej fotke skontrolujte najsvetlejšiu časť obrázka za najsvetlejšími písmenami; W3C uvádza obrázky pozadia s nedostatočným kontrastom ako známe zlyhanie (F83). Prejdite myšou nad tlačidlami, prejdite na ne klávesom Tab, vyvolajte chybu vo formulári a prepnite do tmavého režimu, ak ho ponúkate. Aj tmavá téma môže zlyhať: sivá #757575 na pozadí #121212 dosahuje 4,07:1. Náš návod, ako otestovať prístupnosť webu, zaraďuje kontrast medzi ostatné rýchle ručné kontroly.

Ako opraviť nízky kontrast bez zmeny vizuálnej identity?

Zvyčajne tak, že pre text a malé prvky pridáte tmavší odtieň farby značky a pôvodnú farbu si necháte na veľké nadpisy, pozadia a ilustrácie. Mnohé farby značiek zlyhávajú len pri malých veľkostiach. Na svetlej farbe značky často stačí vymeniť biely text za tmavý a väčšina návštevníkov si všimne len to, že sa stránka číta ľahšie.

1. Vytvorte z každej farby značky verziu bezpečnú pre text, s pomerom aspoň 4,5:1 voči hlavným pozadiam, a používajte ju na základný text, odkazy a malé ikony.
2. Pôvodnú žiarivú farbu používajte na veľké nadpisy (tam stačí 3:1), pozadia, ilustrácie a dekorácie.
3. Na svetlých farbách značky zmeňte text tlačidiel z bieleho na tmavý.
4. Za text umiestnený na fotkách dajte plný alebo polopriehľadný panel.
5. Skontrolujte každý stav: prejdenie myšou, fokus, navštívený, vybraný, chyba a zástupný text.
6. Vyhovujúce dvojice si uložte ako dizajnové tokeny alebo nastavenia témy, aby ich nové stránky zdedili a nemuseli ich vymýšľať znova.

Dizajn pre farbosleposť: prečo samotná farba nestačí

Kontrast a farba sú dva samostatné problémy. Podľa Colour Blind Awareness (otvorí sa na novej karte) má poruchu farebného videnia približne 1 z 12 mužov a 1 z 200 žien, najčastejšie červeno-zelenú. WCAG 1.4.1 (otvorí sa na novej karte) (úroveň A) hovorí, že farba nesmie byť jediným vizuálnym spôsobom odovzdania informácie, preto ju kombinujte s textom, ikonami, vzormi alebo podčiarknutím.

• Chyby vo formulároch: samotný červený okraj nevyhovuje. Pridajte vedľa poľa správu, napríklad „Zadajte PSČ“, ideálne s ikonou.
• Sklad a stav: zelená alebo červená bodka vedľa produktu mnohým zákazníkom nič nepovie. Napíšte „Na sklade“ alebo „Vypredané“.
• Grafy: legenda, ktorá stojí na priraďovaní farieb, sa číta ťažko. Popíšte čiary priamo alebo použite vzory a rôzne štýly čiar.
• Odkazy: v súvislom texte ich podčiarknite, z dôvodov uvedených vyššie.

Ak chcete problém vidieť na vlastné oči, Chrome DevTools dokážu simulovať poruchy videnia a simulátor má aj Colour Contrast Analyser. Kontrast pomáha aj tu: pomer meria svetlosť, nie odtieň, takže dve farby so silným pomerom zostanú rozlíšiteľné, aj keď sa ich odtiene zdajú podobné. Viac o tom, ako si zariadenia nastavujú ľudia so slabým zrakom a inými poruchami, nájdete v článku ako používajú web ľudia so zdravotným postihnutím.

Stačia režimy vysokého kontrastu a prepínače kontrastu?

Nie. Kontrastné motívy operačného systému a prepínače kontrastu na stránke pomáhajú ľuďom, ktorí vedia, že potrebujú vyšší kontrast, a zapnú si ho. WCAG však posudzuje stránku v jej predvolenom stave, takže farby, ktoré každý návštevník uvidí ako prvé, musia stále vyhovovať. Prepínač je možnosť navyše pre tých, ktorí chcú viac, nie oprava nevyhovujúcich farieb.

Niektorí ľudia so zdravotným postihnutím používajú kontrastné motívy Windows, ktoré vaše farby nahradia vlastnými. Oplatí sa web otestovať so zapnutým motívom: ikony postavené z obrázkov pozadia môžu zmiznúť a štýly fokusu nakreslené len tieňom (box-shadow) sa môžu stratiť. Media query prefers-contrast v CSS vám navyše umožní ponúknuť kontrastnejšiu verziu ľuďom, ktorí o ňu požiadali v nastaveniach systému.

Náš vlastný widget má úpravu kontrastu aj profil pre farbosleposť a niektorým návštevníkom sú užitočné. Aj tak by sme vám povedali to isté: ak je váš základný text #999999 na bielej, zmeňte CSS. Widget dá návštevníkovi, ktorý chce vyšší kontrast, spôsob, ako ho získať. Nevyhovujúce predvolené farby však nezmení na vyhovujúce a hovorí to aj prehľad WCAG v našej dokumentácii.