Barvoslepost a webový design: co je třeba vědět

Častější, než si většina designérů uvědomuje

Porucha barevného vidění — běžně nazývaná barvoslepost — postihuje zhruba 8 % mužů a 0,5 % žen. To je asi 1 z 12 mužů a 1 z 200 žen, což ji činí rozšířenější než většinu ostatních postižení, kterými se standardy webové přístupnosti zabývají.

Přesto se v designu běžně přehlíží. Týmy testují se čtečkami obrazovky a klávesovou navigací, spustí automatizovanou kontrolu WCAG a považují práci na přístupnosti za hotovou — aniž by kdy zkontrolovaly, zda je jejich barevná paleta čitelná pro barvoslepé uživatele.

Pochopení barvosleposti a toho, co skutečně dělá s webovými rozhraními, která navrhujete, je prvním krokem k její nápravě.

Typy a co způsobují

Porucha barevného vidění má několik podob a ne všechny vytvářejí stejný prožitek.

Červeno-zelené poruchy (nejčastější)

Protanopia — úplná absence červených čípkových fotoreceptorů. Červená se jeví tmavá nebo černá. Červeno-zelené rozdíly se ztrácejí.

Protanomálie — snížená citlivost na červenou. Červená, oranžová a žlutá se posouvají směrem k zelené a celkový prožitek je matnější, jako by byl červený kanál ztlumen.

Deuteranopia — úplná absence zelených čípkových receptorů. Nejčastější forma barvosleposti. Zelená a červená se zaměňují; svět vypadá, jako by byl filtrován skrze žlutohnědou čočku.

Deuteranomálie — snížená citlivost na zelenou. Podobná deuteranopii, ale mírnější. Celkově nejrozšířenější typ, který postihuje asi 5 % mužů.

Modro-žluté poruchy (vzácnější)

Tritanopia — absence modrých čípkových receptorů. Modrá se jeví jako zelená a žlutá se jeví bledá nebo neviditelná. Vzácné.

Tritanomálie — snížená citlivost na modrou. Modrozelená a červenofialová se zaměňují.

Monochromacie (velmi vzácné)

Achromatopsia — absence všech barevných čípkových receptorů. Vnímán je pouze jas; svět se jeví v odstínech šedi. Často doprovázená citlivostí na světlo a sníženou zrakovou ostrostí.

Jak barvoslepost narušuje běžné webové vzory

Znát typy abstraktně je méně užitečné než vědět, která konkrétní designová rozhodnutí způsobují problémy. Toto jsou ta nejčastější.

Chybové stavy indikované pouze červenou

Zbarvení okraje formulářového pole červeně pro zobrazení chyby validace je jedním z nejrozšířenějších vzorů ve webovém designu. Pro uživatele s červeno-zelenou poruchou může být červená na bílém nebo červená na šedém pozadí téměř neviditelná nebo nerozlišitelná od normálního nezaostřeného stavu.

Toto přímo pokrývá WCAG 2.2 1.4.1 Použití barvy (úroveň A): barva nesmí být jediným prostředkem k předání informace, indikaci akce, vyvolání reakce nebo rozlišení vizuálního prvku.

Náprava je jednoduchá: spojte barvu s druhým vizuálním indikátorem — ikonou, textovým popiskem, změnou tloušťky okraje nebo jakýmkoli jiným nebarevným signálem.

<!-- Spoléhání pouze na barvu: neprojde 1.4.1 -->
<input type="email" class="field--error">

<!-- Barva plus ikona plus text: projde -->
<div class="field-wrapper">
  <input type="email" class="field--error" aria-describedby="email-err">
  <p id="email-err">
    <span aria-hidden="true">⚠</span> Zadejte platnou e-mailovou adresu.
  </p>
</div>

Nedostatečný kontrast

Nízký kontrast je samostatný problém oddělený od barvosleposti, ale prolínají se. Mnoho barevných palet, které se zdají čitelné při typickém barevném vidění, se stává ještě hůře čitelnými při poruše barevného vidění, protože vnímaný rozdíl mezi popředím a pozadím se dále zmenšuje.

WCAG 1.4.3 vyžaduje minimální kontrastní poměr 4,5:1 pro normální text a 3:1 pro velký text. Testování kontrastu nástrojem, jako je výběr barvy v prohlížeči DevTools nebo specializovaný nástroj pro kontrolu, je nezbytností — nespoléhejte na vizuální kontrolu.

Vizualizace dat kódovaná pouze barvou

Koláčový graf se šesti segmenty rozlišenými pouze barvou. Mapa s přechodem z červené do zelené. Čárový graf, kde jsou čtyři datové sady rozlišeny pouze odstínem.

Pro uživatele s deuteranopií se červená a zelená stávají nerozlišitelnými. Význam grafu se zcela hroutí. Více o tom najdete v našem průvodci přístupnou vizualizací dat.

Odkazy, které se od hlavního textu odlišují pouze barvou

Ve výchozím nastavení prohlížeče odkazy podtrhávají. Mnoho designérů toto podtržení odstraňuje a spoléhá pouze na barvu k rozlišení odkazů od okolního textu. Uživatelé s poruchou barevného vidění — a zejména ti, kteří používají motivy s nízkým kontrastem — mohou odkazy vůbec neidentifikovat.

Zde platí také WCAG 1.4.1. Pokud je barva odkazu jediným vizuálním indikátorem (žádné podtržení, žádné tučné písmo, žádný jiný rozlišovací prvek), odkaz není pro barvoslepé uživatele přístupný.

Nejjednodušší náprava: obnovte podtržení. Případně zajistěte, aby barva odkazu měla dostatečný kontrast jak vůči barvě hlavního textu, tak vůči pozadí.

Navrhování s ohledem na barvoslepost

Používejte redundantní kódování

Přidejte druhý vizuální kanál vedle barvy. V grafech: přidejte vzory, textury nebo datové popisky. Ve stavových indikátorech: přidejte ikony. Ve stavech formulářů: přidejte text. Cílem je, aby někdo, kdo z designu zcela odstraní barvu, stále všemu rozuměl.

Testujte se simulačními nástroji

Chrome DevTools má vestavěnou simulaci barvosleposti. Otevřete DevTools > panel Rendering > „Emulate vision deficiencies”. Můžete simulovat protanopii, deuteranopii, tritanopii a achromatopsii.

Figma a další designové nástroje mají podobné pluginy. Spuštění simulace zabere pár sekund a často odhalí problémy, které nebyly ve standardním náhledu viditelné.

Kontrolujte svou paletu jako celek

Netestujte jen jednotlivé dvojice prvků. Podívejte se na celou paletu společně: primární, sekundární, chybové, úspěšné, varovné a informační barvy. Vypadají při simulaci deuteranopie chybová červená a úspěšná zelená podobně? Pokud ano, máte problém bez ohledu na to, zda vaše kontrastní poměry technicky projdou.

Vyhýbejte se problematickým kombinacím

Obzvláště nespolehlivé pro poruchu barevného vidění:

Červená a zelená
Zelená a hnědá
Modrá a fialová
Zelená a šedá
Zelená a černá

Když se tyto dvojice musí objevit ve stejném kontextu, rozlišujte je pomocí světlosti nebo vzoru, spíše než odstínem.

Co WCAG pokrývá a co ne

WCAG pokrývá barevný kontrast (1.4.3, 1.4.11) a zákaz používání barvy jako jediného prostředku k předání informace (1.4.1). Nespecifikuje, které barvy můžete nebo nemůžete použít, ani nevyžaduje, aby vaše celá paleta byla vnímatelná při každém typu poruchy barevného vidění.

Co vyžaduje, je, aby se neztratil žádný význam, když je barva odstraněna. To je praktický test. Odstraňte z designu barvu. Zůstává každá informace přístupná jinými prostředky?

Pokud je odpověď ano, splnili jste požadavek. Pokud chybové stavy zmizí, pokud se data v grafu stanou nejednoznačnými, pokud se odkazy stanou neviditelnými — máte co dělat.

Naše audity přístupnosti zahrnují barevnou přístupnost jako standardní součást přezkumu. Pokud chcete vědět, jak na tom váš současný design stojí, spusťte bezplatnou automatizovanou kontrolu, abyste na začátek zachytili automatizovatelné problémy.