Pri webdizajne sa nespoliehajte len na farby. Až 4,5 % populácie má poruchy farebného videnia

Byť „farboslepým“ neznamená automaticky vidieť svet čiernobiely. Väčšina ľudí, ktorí trpia poruchami farebného videnia, totiž nerozoznáva červenú, zelenú alebo modrú farbu. O tom, že ich nie je málo, svedčí fakt, že až 4,5 % populácie nevidí farby také, aké v skutočnosti sú. Spoliehať sa preto pri dizajne najmä na farby by nebol úplne správny krok. Ako teda vytvoriť dobré UX webstránky aj pre farboslepých používateľov?

Odpovede na vyššie položenú otázku sme pre vás zhrnuli v 8 bodoch tohto článku. V nich popisujeme najčastejšie nedostatky v dizajnovaní webstránok pre potreby farboslepých používateľov, ako aj riešenia, ktoré vám pomôžu zlepšiť prístupnosť vašej webstránky.

Množstvo vašich návštevníkov totiž nemá to šťastie vnímať svet bezchybným zrakom. Napríklad, ak váš web navštevujú primárne muži, podľa štatistík má poruchy farebného videnia až 8 % z nich.

Ešte predtým, ako prejdeme ku konkrétnym bodom, si však poďme stručne popísať, aké druhy farbosleposti existujú a ako vlastne ľudia, ktorí niektorou z porúch farebného videnia trpia, vnímajú svet.

Najčastejšie poruchy farebného videnia

Aj keď sa vo všeobecnosti o ľuďoch s poruchami farebného videnia hovorí ako o „farboslepých“, nie je to celkom tak. V rámci porúch farebného videnia totiž rozlišujeme slabozrakosť a farbosleposť na rôzne farby. Tieto poruchy bývajú väčšinou vrodené a zdedené a oveľa častejšie sa vyskytujú u mužov.

Úplná farbosleposť, známa ako achromatopsia, je zriedkavá.

Častejšie sa vyskytujú nasledujúce poruchy farebného videnia:

• Deuteranopia (nerozoznávanie zelenej farby) – spolu s deuteranomáliou (slabozrakosťou na zelenú farbu) sa vyskytuje najčastejšie

• Protanopia (nerozoznávanie červenej farby) – približne 15 % prípadov ľudí s poruchami farebného vnímania

• Tritanopia (nerozoznávanie modrej farby) – vyskytuje sa vo veľmi malej miere

Pre lepšie pochopenie jednotlivých porúch farebného vnímania si môžete pozrieť aj graf, ktorý znázorňuje, ako vyzerá normálne farebné spektrum v porovnaní s farebným spektrom, ktoré vnímajú ľudia s s deuteranopiou, protanopiou a tritanopiou.

zdroj: blog.usabilla.com

Ako teda zlepšiť UX vášho webu pre ľudí, ktorí nedokážu vnímať farebné spektrum na 100 %?

Dajte si pozor na nasledujúce nedostatky. Napokon, ocenia ich aj ľudia, ktorí nemajú problémy so zrakom.

1. Čitateľnosť textu

Overte si, či je písmo na vašej webstránke skutočne ľahko čitateľné pre všetkých. Niektoré kombinácie určitých veľkostí a farieb písma a podkladu môžu byť totiž pre ľudí s poruchami farebného videnia čitateľné len s veľkými ťažkosťami.

Uistiť sa môžete pomocou nástroja WebAim color contrast checker, do ktorého si zadáte farbu písma i podkladu. Nástroj vám následne povie, či je vami zvolená kombinácia v poriadku (pass), alebo nie (fail).

Napríklad, biele písmo na ružovom podklade „skúškou správnosti“ ani zďaleka neprešlo.

Zato tmavomodré písmo na šedom podklade nástroj vyhodnotil ako úplne bezproblémovú kombináciu.

2. Kombinácie farieb

Pri kombináciách farieb zotrvávame i v tomto bode. V oblasti webdizajnu by ste sa totiž mali vyhýbať nasledujúcim farebným kombináciám, a to čo najviac, ako sa len dá:

• zelená/červená
• zelená/hnedá
• modrá/fialová
• zelená/modrá
• slabozelená/žltá
• modrá/sivá
• zelená/sivá
• zelená/čierna

Prečo sú dvojice týchto farieb nevhodné? Odpoveďou je názorná ukážka vnímania daných farebných kombinácií používateľmi s protanopiou (nerozoznávanie červenej farby).

zdroj: smashingmagazine.com

3. Dostatočný kontrast

Na výrazný kontrast treba myslieť nielen pri textoch na webstránke, ale aj vtedy, ak budete chcieť vložiť text do fotografie. Najlepšie spravíte, ak fotografiu, ktorú chcete použiť ako podklad pre text, stmavíte alebo zosvetlíte (urobíte ju priehľadnou) v závislosti od farby textu.

Jednoducho povedané, vždy dbajte na to, aby bolo písmo v dostatočnom kontraste s pozadím.

4. Viditeľné hypertextové odkazy

Častým problémom pre farboslepých používateľov býva aj neviditeľné prelinkovanie odkazov v texte. Ak je totiž link zvýraznený iba tým, že je od ostatného textu farebne odlíšený (napríklad tradičnou modrou farbou), pre slabozrakého používateľa zostáva v texte záhadou. Teda až dovtedy, kým sa mu náhodou pri prechode textom prelinkované slová nepodčiarknu alebo sa pri nich nezobrazí ukazovateľ.

Tento nedostatok sme si napríklad všimli aj na našom blogu. Keď sme si pozreli text nášho blogového článku z pohľadu farboslepého používateľa, odkazy neboli viditeľné takmer vôbec.

Aj preto je vhodné odkazy v texte rovno podčiarkovať, aby boli viditeľné aj bez toho, aby sme na ne museli prejsť priamo kurzorom.

Podčiarkovanie hypertextových odkazov v texte je pritom dôležité nielen pre tých, ktorí trpia úplnou farbosleposťou, ale aj pre nevidiacich používateľov.

5. Slovný popis farieb pri produktoch

Vojdime teraz na chvíľku do e-shopu a poďme nakupovať oblečenie.

Je samozrejmé, že pri výbere akéhokoľvek trička určite nie je dôležité len to, o aký typ trička ide, ale aj to, akú má farbu. Ak si používateľ môže vybrať z viacerých farebných prevedení, nespoliehajte sa len na to, že si zvolí farbu len podľa farebnej palety, aká je na obrázku nižšie. Používateľovi s poruchou farebného videnia to jednoducho stačiť nebude.

zdroj: smashingmagazine.com

K ukážkam farieb je preto dôležité pridať tiež ich slovný opis. Výborným príkladom je napríklad takto detaile opísaná paleta farieb:

zdroj: shirtinator.sk

6. CTA tlačidlá

V nakupovaní budeme ešte chvíľku pokračovať. Tentoraz prejdeme priamo do nákupného košíka.

Väčšina e-shopov zvýrazňuje CTA tlačidlá „pridať do košíka“ či „kúpiť“ farbami. A to je úplne v poriadku a postačujúce, až kým sa nezamyslíme nad farboslepými používateľmi.

zdroj: asos.com

Ak by ste totiž chceli, aby CTA prvok pôsobil rovnako efektívne aj na farboslepých používateľov, vhodné je zvýrazniť ho nielen výraznou kontrastnou farbou (čo je aj prípad obrázku vyššie), ale napríklad aj odlišným prevedením či veľkosťou.

V tomto smere to má dobre vyriešené napríklad e-shop datart.sk, ktorý tlačidlo „Do košíka“ úplne odlíšil od možnosti vrátiť sa späť na výber produktov.

7. Upozornenia vo formulároch

Určite poznáte situáciu, keď zabudnete vyplniť povinné údaje vo formulári a zrazu sa vám zobrazia červené textové upozornenia. Respektíve tým z vás, ktorí nemáte poruchu farebného videnia. V takomto prípade vám je hneď jasné, že ste na niečo zabudli a údaje vyplníte.

zdroj: uxmag.com

Ako však vyzerá takáto situácia z pohľadu človeka, ktorý farby nevidí dokonale? Napríklad aj takto:

zdroj: uxmag.com

Červené upozornenie sa človeku trpiacemu protanopiou úplne stráca medzi ostatným textom.

Práve preto sa ani v takýchto prípadoch netreba spoliehať len na farbu. Farbu kombinujte aj s inými dizajnovými prvkami, ako sú napríklad rôzne ikonky, tvary či znaky. Skvelým príkladom je nasledujúci registračný formulár:

zdroj: uxmag.com

8. Farebné grafy

Farby zohrávajú dôležitú rolu aj pri grafoch. Len málokto sa však zamýšľa nad tým, že pre ľudí s poruchami farebného videnia môžu byť jednotlivé časti grafu ťažko rozlíšiteľné. Čo tým chceme povedať? Najlepšie to ilustrujú nasledujúce obrázky.

Farboslepý používateľ totiž vníma graf napríklad takto:

zdroj: smashingmagazine

Farby stĺpcov 1 a 3 sú takmer na nerozoznanie. Nehovoriac o tom, ako by sa farby zlievali v grafe koláčového typu.

Preto je dôležité využívať pri tvorbe grafov aj rôzne vzory. Do každého segmentu grafu by sa zároveň mali vkladať aj krátke popisky, aby bol graf jednoducho pochopiteľný aj pre ľudí s poruchami farebného videnia.

Používateľsky prístupný graf pre farboslepých používateľov by následne vyzeral takto:

zdroj: smashingmagazine

Pochopte potreby farboslepých používateľov

Faktom zostáva, že väčšina dizajnérov netrpí poruchami farebného videnia a ani slabozrakosťou. Ako teda dokážu pochopiť potreby farboslepých či slabozrakých používateľov, ak sa na svet nikdy nepozerali ich očami?

Užitočnou pomôckou je Google Chrome rozšírenie I want to see like the colour blind (Chcem vidieť ako farboslepý), vďaka ktorému si dokážete pozrieť všetky webstránky z pohľadu ľudí, ktorí majú určitý druh poruchy farebného vnímania.

Stačí, ak v rozšírení kliknete na možnosť Experience Colour Blindness, vyberiete si typ “farbosleposti” a všetko zrazu nadobudne iné farby.

Na záver

Ak ste sa pri čítaní tohto článku dostali až sem, chceme sa vám poďakovať. Nielen preto, že ste nám venovali svoj čas, ale aj preto, že vám záleží na iných ľuďoch.

Niekedy sú to totiž skutočne len maličkosti, ktoré dokážu ostatných potešiť, uľahčiť im život či azda len prezeranie si webstránok.

Podčiarknutie odkazov v texte, správna kombinácia farieb či malé ikonky pri upozorneniach, aj to sú drobnosti, vďaka ktorým sa znevýhodnení používatelia na vašom webe nestratia a bez problémov pochopia, čo ste im chceli povedať. A aj o tom je UX.