színes játszik szerves szerepet UI design. Ha jól csinálod, javítja a felhasználói élményt, befolyásolja a vásárlási döntéseket, tükrözi a márkák hangját.

Szóval, hogyan tervezel hatékony, hozzáférhető, esztétikailag kellemes felületeket a színvak felhasználók számára?

míg a színvakság mögött álló tudomány meglehetősen összetett, ennek lényege, hogy a színvak embereknek nehézségeik vannak a szín egyértelmű megjelenítésében vagy egyes színek megkülönböztetésében., Ezt szem előtt tartva, Ebben a cikkben megosztunk néhány tippet arról, hogyan javíthatja webhelyének hozzáférhetőségét, valamint azt a tapasztalatot, amelyet a színes vak emberek számára nyújt.

színvakság egy digitális világban

tanulmányok szerint minden 12 férfi (és minden 200 nő) közül körülbelül 1 színvak. Bár a színvak emberek ugyanolyan tisztán látják a dolgokat, mint mindenki más, nem képesek teljesen felismerni a piros, zöld vagy kék fényt. Vannak különböző típusú színvakság; deuteranopia és protanopia színvakság a leggyakoribb.,

a vörös-zöld színvaksággal (deuteranopia) rendelkező emberek nehezen tudnak különbséget tenni a piros és a zöld között. Hasonlóképpen, a vörös színvaksággal (protanopia) rendelkező emberek számára minden piros szín unalmasnak tűnik.

Ez tervezési szempontból azt jelenti, hogy a színre való támaszkodás az olvashatóság és a megfizethetőség szempontjából megnehezíti a webhely használatát olyan személy számára, aki színvak.

használhatja a Coblis színvakság szimulátort, hogy megnézze, hogyan néz ki webhelye a vak felhasználók színezésére.,

7 Ways javíthatja Szín Akadálymentesség színvak felhasználók

tervezési elemek és technikák, amelyek javítják a szín Akadálymentesség színvak felhasználók általában tekinthető jó tervezési gyakorlat. Bár azt gondolhatja, hogy webhelye esztétikai vonzereje szenvedhet, ha akadálymentességet tervez, ez természetesen nem így van.

itt megnézzük néhány olyan módszert, amellyel hozzáférhetőbb felhasználói felületet tervezhet, szem előtt tartva a színvak felhasználókat.

#1: A minták és textúrák használata

a színkülönbségek hihetetlenül fontosak az adatvizualizációval pl.,, grafikonok és kördiagramok. Az alacsony kontrasztaránnyal rendelkező színek kiválasztása megnehezítheti a diagram értelmezését a színvak felhasználók számára.

itt van, amit meg kell tennie helyette:

  • használjon mintákat és textúrákat, hogy megkönnyítse a felhasználók számára a különböző szegmensek megkülönböztetését.
  • szövegcímkék hozzáadása a szegmensekhez, hogy még könnyebben megértsék őket.

vessünk egy pillantást arra, hogy egy tritanopiás színvak ember hogyan láthat egy kék-zöld sáv grafikont, szemben azzal, hogy ugyanazt a grafikont hogyan látná mintákkal és textúrákkal.,

így nézne ki, ha a minták használata helyett minden szegmenst címkézne:

#2: Használja a színeket és szimbólumokat

nem szabad kizárólag a színre támaszkodnia a hibák kommunikálásához vagy információk továbbításához az felhasználói felületen keresztül.

vessünk egy pillantást például a Facebook regisztrációs űrlapjára., Ha az űrlap támaszkodott színes egyedül hagyni, a felhasználók tudják, hogy hibát követett el egy adott területen, ez olyan lesz, mint ez a piros-vak (protanopia) felhasználó:

Itt van egy pillantást Facebook jele űrlapot, a szimbólumok pedig hibaüzenetek csatolni:

az ikonok Segítségével pedig szimbólumok formában, hogy a felhasználó tudja, hogy már a hibát javítja elérhetőség segít korrigálni a hibát, hogy gyorsabb.

# 3: szövegcímkék használata

szövegcímkék hozzáadása a színszűrőkhöz és színtárakhoz javítja a színvak felhasználók hozzáférhetőségét., A színvakság típusától függően a felhasználók nehezen tudják megkülönböztetni a különböző színeket (vagy árnyalatokat) valamilyen leíró szöveg nélkül.

például az Amazon leíró szövegcímkéje nélkül a színvak felhasználók nem tudják megmondani a piros inget a narancssárga vagy a zöld mellett.

szövegcímkék hozzáadása a színszűrőkhöz javítja a normál látású emberek hozzáférhetőségét is. Például, fehér, törtfehér, világosszürke gyakran nehéz megkülönböztetni a monitorok.,

# 4: aláhúzás linkek

sok időt használunk betűtípus színe vagy betűsúly jelölésére linkek. Bár lehet, hogy valaki deuteranomaly, protanopia, vagy tritanopia megkülönböztetni horgony szöveg rendszeres szöveg, ez biztosan nem ideális az alacsony kontrasztarány.

a monochromacy-val rendelkező személy egyáltalán nem lenne képes különbséget tenni a szöveg és a horgonyszöveg között, és a szöveg fölé kell húznia, hogy megnézze, a kurzor mutatóra vált-e.

ezért jó ötlet aláhúzást hozzáadni a szöveges linkekhez., Ez megkönnyíti, hogy azonnal elmondja a rendszeres szöveget, horgony szöveg egymástól. Íme egy példa az Engadget webhelyéről:

#5: színkombinációk a

elkerülése érdekében bizonyos színkombinációk nem ideálisak a színvak felhasználók számára, akár azért, mert alacsony kontrasztarányuk van, akár azért, mert nehéz megkülönböztetni őket.,

Itt egy lista a színkombinációk, hogy lehetőleg ne használja a felületet, minták, ahol csak lehetséges:

  • zöld-piros
  • zöld-kék
  • zöld-barna
  • zöld-fekete
  • zöld-szürke
  • kék-szürke
  • világos zöld-sárga
  • kék-lila

Itt van, amit a zöld-piros-kék-lila szín-kombinációk nézne ki, hogy egy felhasználó protanopia:

#6: Hogy Elsődleges Gombok Kiemelkedő

sokszor, tervezők támaszkodni színű, hogy elsődleges gombok kiemelkedik., Ezzel az a probléma, hogy az Ön által használt szín nehéz lehet a színvak felhasználók számára.

itt van, mit kell tennie helyette:

  • növelje az elsődleges gomb méretét.
  • próbáljon ki különböző elhelyezési kombinációkat.
  • növelje a kontrasztot az elsődleges és a másodlagos gombok között.
  • az elsődleges és a másodlagos gombok megkülönböztetéséhez használjon szegélyeket, ikonokat vagy betűsúlyt.

például a reformáció a méretet és a színt használja az elsődleges gomb hangsúlyozására.,

és a Firebox bemutatja elsődleges gombját a jobb alsó sarokban, a másodlagos gombot a bal felső sarokban.

#7: Mark Szükséges Űrlap Mezők

színvak felhasználók nehezen differenciáló között szükséges választható mezők, ha használja a színes egyedül jelölésére szükséges mezőket formák.

ehelyett lehet, hogy:

  • jelölje meg a szükséges mezőket csillaggal (*).
  • címke mezők a kívánt vagy opcionális szóval.
  • távolítsa el az opcionális mezőket Az űrlapokból.,

következtetés

a színes vak felhasználók felhasználói felületének tervezése segít javítani webhelyének hozzáférhetőségét a normál látású felhasználók számára is. Bár nem egy univerzális megoldás, amikor a web akadálymentesítési, itt van néhány tipp, amit érdemes szem előtt tartani:

  • a minták, textúrák, hogy megmutassa, a kontrasztot, grafikonok, illetve diagramok.
  • a hibaüzenetek továbbításához használjon színeket és szimbólumokat.
  • szövegcímkék hozzáadása színszűrőkhöz és színtárakhoz.
  • Aláhúzhatja a hivatkozásokat, hogy különbséget tegyen a szokásos szöveg és a horgonyszöveg között.,
  • kerülje a rossz színkombinációk, mint a zöld-piros, kék-lila.
  • használjon méretet, elhelyezést vagy betűsúlyokat, hogy az elsődleges gombok kiemelkedjenek.
  • jelölje meg a szükséges űrlapmezőket szimbólummal (például csillaggal) vagy címkével.