Színvakság és webdesign: amit tudni érdemes

Gyakoribb, mint a legtöbb tervező gondolná

A színlátászavar — közismert nevén színvakság — a férfiak nagyjából 8%-át és a nők 0,5%-át érinti. Ez körülbelül 12 férfiból 1 és 200 nőből 1, ami gyakoribbá teszi, mint a legtöbb más fogyatékosságot, amellyel a webakadálymentességi szabványok foglalkoznak.

Mégis rendszeresen figyelmen kívül hagyják a tervezésben. A csapatok tesztelnek képernyőolvasókkal és billentyűzetes navigációval, lefuttatnak egy automatizált WCAG-vizsgálatot, és késznek tekintik az akadálymentesítési munkát — anélkül, hogy valaha is ellenőriznék, olvasható-e a színpalettájuk a színvak felhasználók számára.

A színvakság megértése, és annak, hogy valójában mit tesz a webes felületekkel, amelyeket tervez, az első lépés a javításához.

A típusok és amit tesznek

A színlátászavar többféle formában jelentkezik, és nem mindegyik ugyanazt az élményt produkálja.

Vörös-zöld zavarok (leggyakoribb)

Protanopia — a vörös csap-fotoreceptorok teljes hiánya. A vörös sötétnek vagy feketének tűnik. A vörös-zöld megkülönböztetés elvész.

Protanomália — csökkent vörösérzékenység. A vörös, a narancs és a sárga a zöld felé tolódik el, és az összélmény tompább, mintha a vörös csatornát lehalkították volna.

Deuteranopia — a zöld csapreceptorok teljes hiánya. A színvakság leggyakoribb formája. A zöld és a vörös összekeveredik; a világ úgy néz ki, mintha egy sárgásbarna lencsén keresztül lenne szűrve.

Deuteranomália — csökkent zöldérzékenység. Hasonló a deuteranopiához, de enyhébb. Összességében a legelterjedtebb típus, a férfiak körülbelül 5%-át érinti.

Kék-sárga zavarok (ritkábbak)

Tritanopia — a kék csapreceptorok hiánya. A kék zöldnek tűnik, a sárga pedig halványnak vagy láthatatlannak. Ritka.

Tritanomália — csökkent kékérzékenység. A kék-zöld és a vörös-lila összekeveredik.

Monokromácia (nagyon ritka)

Achromatopsia — az összes szín-csapreceptor hiánya. Csak a fényerő érzékelhető; a világ a szürke árnyalataiban jelenik meg. Gyakran fényérzékenység és csökkent látásélesség kíséri.

Hogyan töri meg a színvakság a gyakori webes mintákat

A típusok elvont ismerete kevésbé hasznos, mint annak ismerete, hogy mely konkrét tervezési döntések okoznak problémákat. Ezek a leggyakoribbak.

Csak vörössel jelzett hibaállapotok

Egy űrlapmező szegélyének pirosra váltása egy érvényesítési hiba jelzésére a webdesign egyik legelterjedtebb mintája. A vörös-zöld zavarral élő felhasználók számára a vörös a fehéren vagy a vörös a szürkén szinte láthatatlan lehet, vagy megkülönböztethetetlen egy normál, nem fókuszált állapottól.

Ezt közvetlenül lefedi a WCAG 2.2 1.4.1 A szín használata (A szint): a szín nem lehet az egyetlen eszköz az információ közvetítésére, egy művelet jelzésére, egy válasz kérésére vagy egy vizuális elem megkülönböztetésére.

A javítás egyszerű: párosítsa a színt egy második vizuális jelzővel — egy ikonnal, egy szövegcímkével, a szegély vastagságának megváltoztatásával vagy bármely más, nem szín alapú jelzéssel.

<!-- Csak a színre hagyatkozik: megbukik az 1.4.1-en -->
<input type="email" class="field--error">

<!-- Szín plusz ikon plusz szöveg: megfelel -->
<div class="field-wrapper">
  <input type="email" class="field--error" aria-describedby="email-err">
  <p id="email-err">
    <span aria-hidden="true">⚠</span> Adjon meg egy érvényes e-mail-címet.
  </p>
</div>

Elégtelen kontraszt

Az alacsony kontraszt a színvakságtól különálló probléma, de átfedik egymást. Sok színpaletta, amely a tipikus színlátás számára olvashatónak tűnik, még nehezebben olvashatóvá válik színlátászavar esetén, mert az előtér és a háttér közötti észlelt különbség tovább csökken.

A WCAG 1.4.3 minimum 4,5:1 kontrasztarányt ír elő a normál szöveghez és 3:1-et a nagyméretű szöveghez. A kontraszt tesztelése olyan eszközzel, mint a böngésző DevTools színválasztója vagy egy dedikált ellenőrző, nem alku tárgya — ne hagyatkozzon a vizuális szemrevételezésre.

Adatvizualizáció, amely csak színben kódol

Egy kördiagram hat, csak színnel megkülönböztetett szeletmel. Egy térkép vörös-zöld színátmenettel. Egy vonaldiagram, ahol négy adathalmazt kizárólag árnyalat különböztet meg.

A deuteranopiával élő felhasználók számára a vörös és a zöld megkülönböztethetetlenné válik. A diagram jelentése teljesen összeomlik. Erről bővebben olvasson akadálymentes adatvizualizációról szóló útmutatónkban.

Linkek, amelyek csak színre hagyatkoznak, hogy kitűnjenek a törzsszövegből

Alapértelmezés szerint a böngészők aláhúzzák a linkeket. Sok tervező eltávolítja ezt az aláhúzást, és kizárólag a színre hagyatkozik, hogy megkülönböztesse a linkeket a környező szövegtől. A színlátászavarral élő felhasználók — és különösen az alacsony kontrasztú témákat használók — egyáltalán nem tudják azonosítani a linkeket.

A WCAG 1.4.1 itt is érvényes. Ha a link színe az egyetlen vizuális jelző (nincs aláhúzás, nincs félkövér, nincs más megkülönböztető jegy), a link nem akadálymentes a színvak felhasználók számára.

A legegyszerűbb javítás: állítsa vissza az aláhúzást. Alternatívaként győződjön meg arról, hogy a link színének elegendő kontrasztja van mind a törzsszöveg színéhez, mind a háttérhez képest.

Tervezés a színvakság szem előtt tartásával

Használjon redundáns kódolást

Adjon hozzá egy második vizuális csatornát a szín mellé. Diagramokban: adjon hozzá mintázatokat, textúrákat vagy adatcímkéket. Állapotjelzőkben: adjon hozzá ikonokat. Űrlapállapotokban: adjon hozzá szöveget. A cél az, hogy aki teljesen eltávolítja a színt a tervből, az még mindig mindent megértsen.

Teszteljen szimulációs eszközökkel

A Chrome DevTools beépített színvakság-szimulációval rendelkezik. Nyissa meg a DevTools > Rendering panelt > „Emulate vision deficiencies”. Szimulálhatja a protanopiát, deuteranopiát, tritanopiát és achromatopsiát.

A Figma és más tervezőeszközök hasonló bővítményekkel rendelkeznek. Egy szimuláció lefuttatása másodpercekbe telik, és gyakran feltár olyan problémákat, amelyek a standard előnézetben nem voltak láthatók.

Ellenőrizze a paletta egészét

Ne csak az egyes elempárokat tesztelje. Nézze meg a teljes palettát együtt: elsődleges, másodlagos, hiba-, siker-, figyelmeztető- és információs színek. Deuteranopia-szimuláció alatt hasonlónak tűnik a hibavörös és a sikerzöld? Ha igen, akkor problémája van, függetlenül attól, hogy a kontrasztarányai technikailag megfelelnek-e.

Kerülje a problémás kombinációkat

Különösen megbízhatatlanok a színlátászavar esetén:

• Vörös és zöld
• Zöld és barna
• Kék és lila
• Zöld és szürke
• Zöld és fekete

Amikor ezeknek a pároknak ugyanabban a kontextusban kell megjelenniük, világosság vagy mintázat, ne árnyalat révén különböztesse meg őket.

Mit fed le a WCAG, és mit nem

A WCAG lefedi a színkontrasztot (1.4.3, 1.4.11) és a szín kizárólagos információközvetítő eszközként való használatának tilalmát (1.4.1). Nem határozza meg, hogy mely színeket használhatja vagy nem használhatja, és nem követeli meg, hogy a teljes palettája minden színlátászavar-típus alatt érzékelhető legyen.

Amit megkövetel, az az, hogy semmilyen jelentés ne vesszen el, amikor a színt eltávolítják. Ez a gyakorlati teszt. Távolítsa el a színt a tervéből. Minden információ hozzáférhető marad más eszközök révén?

Ha a válasz igen, akkor teljesítette a követelményt. Ha eltűnnek a hibaállapotok, ha a diagram adatai kétértelművé válnak, ha a linkek láthatatlanná válnak — akkor van tennivalója.

Akadálymentességi auditjaink a színakadálymentességet a felülvizsgálat standard részeként tartalmazzák. Ha tudni szeretné, hol áll jelenlegi terve, indítson ingyenes automatizált vizsgálatot, hogy kiindulási pontként elkapja az automatizálható problémákat.