Kada govorimo o grafičkom dizajnu, korisničkom interfejsu ili web dizajnu, gotovo uvijek pretpostavljamo da svi vide boje na isti način kao i mi. Ali stvarnost je da značajan postotak korisnika doživljava interfejs vrlo različito zbog sljepoće za boje. Ignorisanje načina na koji ovi ljudi percipiraju boje može učiniti naše dizajne zbunjujućim, neupotrebljivim ili jednostavno nepristupačnim., iako na prvi pogled mogu izgledati besprijekorno.
Nadalje, problem nije samo tehničke prirode ili se tiče pristupačnosti, već je i duboko ljudski. Iza svakog ekrana stoje stvarni korisnici koji se mogu osjećati isključeno ako se obrazac, mapa ili sistem upozorenja zasnivaju isključivo na boji.Srećom, danas imamo alate, najbolje prakse i jasne kriterije za dizajniranje imajući na umu sljepoću za boje, a da se pritom ne žrtvuje kreativnost.
Šta je sljepoća za boje i zašto bi vam to trebalo biti važno u dizajnu?
Sljepoća za boje, ili nedostatak percepcije boja, je vizualni poremećaj genetskog porijekla koji utiče na funkcionisanje čunjića u mrežnjači. Ove čunjiće su ćelije odgovorne za interpretaciju talasnih dužina povezanih sa bojama crvenom, zelenom i plavom.A kada bilo koji od ovih tipova zakaže ili je odsutan, pojavljuju se različiti oblici sljepoće za boje.
Na statističkom nivou, Procjenjuje se da oko 8% muške populacije i oko 1% ženske populacije ima neku vrstu sljepoće za boje u njenom najčešćem obliku.Razlika između muškaraca i žena objašnjava se činjenicom da se mnoge od ovih mutacija nalaze na X hromosomu i obično su recesivne, pa su muškarci, koji imaju samo jedan X hromosom, skloniji njihovom ispoljavanju.
U dizajnu, to znači da, od svakih 100 ljudi koji posjete vašu web stranicu, koriste vašu aplikaciju ili provjere vaš poster, Do 8 osoba bi moglo drugačije shvatiti ključni dio vaše poruke ili ga ne razumjeti dobro.Možda se čini kao mali postotak, ali u smislu korisničkog iskustva i profesionalne odgovornosti, to je prevelika grupa da bi se ignorirala.
Najčešći problem kod sljepoće za boje je teškoća u razlikovanju nijansi Crvena i zelenaNakon toga slijede promjene u percepciji plavih i žutih tonova. U najekstremnijim slučajevima, osoba može vidjeti svijet gotovo u sivim tonovima, sa svim bojama svedenim na varijacije u svjetlini.
Ako ovo ne uzmete u obzir, mogli biste dizajnirati sistem ikona gdje je ispravna stvar zelena, a neispravna crvena, a za osobu koja ne prepoznaje boju u boji, oba stanja su praktično identična. Ono što je vama savršeno jasno, drugima može biti besmisleno., sa direktnim uticajem na upotrebljivost, razumijevanje i, u mnogim slučajevima, na samu sigurnost (pomislite na mape metroa, znakove, poruke o kritičnim greškama itd.).
Glavne vrste sljepoće za boje koje utiču na dizajn
U dizajnu, ne morate postati oftalmolog, ali je korisno biti jasan o tome koje su vrste sljepoće za boje najčešće i kako utječu na ono što korisnik vidi na ekranu. Razumijevanje ovih varijacija pomaže vam da predvidite probleme s kontrastom, konfliktne kombinacije i rizične izbore boja..
Najčešća osnovna klasifikacija odnosi se na protanopiju, deuteranopiju i tritanopiju, ali spektar je zapravo širi i obuhvata i potpune i djelomične oblike promjene boje. Najrelevantniji tipovi sa stanovišta dizajna sažeti su u nastavku.
ProtanopijaProtanopija je odsustvo osjetljivosti na crvenu boju. Osobe s protanopijom imaju velikih poteškoća s percepcijom dugih valnih duljina svjetlosti, tako da crvene boje imaju tendenciju da izgledaju tamnije, mutnije ili čak pogrešno zamijenjene za smeđe ili zelene. Ovo direktno utiče na bilo koji interfejs koji koristi crvenu kao primarnu boju ili kao indikator greške.
DeuteranopijaU ovom slučaju, problem leži u čunjićima odgovornim za zeleni vid. Korisnici deuteranopijskog vida imaju jasno oštećenje u razlikovanju crvenih i zelenih tonova, koji mogu izgledati vrlo slično. Sa praktične tačke gledišta, Obje varijante (protanopija i deuteranopija) se često grupiraju zajedno kao "crveno-zeleno sljepilo" i čine oko 99% slučajeva sljepoće za boje..
TritanopiaTritanopija je mnogo rjeđa i povezana je s nedostatkom osjetljivosti na plavu boju. Poznata je i kao plava dihromazija. Osobe s tritanopijom mogu miješati plave sa zelenim i imati problema sa žutim, što može utjecati na palete na osnovu ovih kontrasta.
ProtanomalijaCrveni konus ovdje nije potpuno odsutan, ali funkcioniše abnormalno. Osoba i dalje percipira crvenu boju, ali sa manjim intenzitetom ili pomjerenom prema drugim nijansama, tako da Boje koje se u velikoj mjeri oslanjaju na ovaj kanal mogu biti manje prepoznatljive.To je blaži oblik dishromatopsije od protanopije, ali podjednako važan za dizajn.
DeuteranomalijaNešto slično se dešava sa zelenim konusom kod deuteranomalije. Konus nije odsutan, ali je njegov odgovor anomalan, što pomiče percepciju zelenih tonova. Za razliku od deuteranopije, Crvene boje ne izgledaju tako tamno, ali razlikovanje između određenih zelenih i crvenih i dalje je problematično.Mnogi od ovih korisnika mogu razlikovati nijanse s relativnom tačnošću, ali ne na isti način kao osoba s "normalnim" vidom boja.
TritanomalijaTo je rijetka varijanta kod koje je smanjena sposobnost razlikovanja određenih nijansi plave i žute boje. Iako pogađa vrlo mali postotak populacije (oko 0,01%), Vrijedi ovo znati ako je sistem vizualne hijerarhije zasnovan gotovo isključivo na ovim bojama..
AkromatopsijaOvo je ekstremni slučaj u kojem osoba percipira praktično samo bijelu, crnu i sve nijanse sive između. Boja prestaje biti koristan alat, tako da Dizajn treba biti zasnovan na kontrastu, tipografiji, ikonografiji i kompoziciji..
Monohromatski plavi konus (BCM)To je nasljedno stanje u kojem crveni i zeleni čunjići ne funkcionišu ispravno. To rezultira vrlo lošom diskriminacijom boja, niskom oštrinom vida, nistagmusom i fotofobijom. Sa stanovišta dizajna, zahtijeva posebnu pažnju posvećenu kontrastu, veličini fonta i ukupnoj čitljivosti.
Pravi uticaj sljepoće za boje na grafičke i digitalne projekte
Možda se čini kao da je sve ovo teorija, ali utjecaj sljepoće za boje na svakodnevni rad u dizajnu je vrlo konkretan. Loš izbor palete boja ili oslanjanje isključivo na boje može potpuno uništiti iskustvo za neke korisnike.čak i kada svi ostali doživljavaju interfejs kao savršeno funkcionalan.
Razmislimo o klasičnoj mapi metroa: svaka linija je označena drugom bojom i, u mnogim slučajevima, jedini vizualni trag je ta boja, kao što se dešava u signalizacija i palete bojaZa nekoga sa normalnim vidom, rute čitanja su neposredne; za osobu koja ne razumije boju kože, Dvije linije blizu jedna drugoj na spektru mogu biti praktično nerazlučive, upravo kada ih je najpotrebnije razlikovati kako bi se isplaniralo putovanje.
Drugi primjer su poruke o greškama u obrascima ili sistemima za validaciju. Vrlo je uobičajeno da se netačno polje označi jednostavno crvenim okvirom. Ako se ništa drugo ne doda, Korisnik sa sljepoćom za crveno-zeleno možda neće primijetiti nikakvu razliku u odnosu na "ispravno" stanje.Platforme poput Facebooka uključuju ikonu uskličnika, na primjer, kako bi pojačale poruku o grešci nehromatskim vizualnim znakom.
U web ili mobilnim interfejsima, također je vrlo uobičajeno razlikovati stanja (aktivno/neaktivno, odabrano/nije odabrano) isključivo putem promjena boja. Ako je kontrast između ovih stanja nizak ili se zasniva na problematičnim kombinacijama, Daltonisti će morati mnogo više da se potrude da shvate šta se dešava.što se prevodi u frustraciju, greške i odustajanje.
Ukratko, sa stručne tačke gledišta, Dobar dizajn nije samo stvar estetike: on mora jasno komunicirati s cijelom publikom, uključujući i osobe s daltonizmom. i budite dio inkluzivna mrežaNeuspjeh u prilagođavanju podrazumijeva ne samo etički problem, već i gubitak efikasnosti, konverzije, pa čak i reputacije brenda.
Alati za simuliranje sljepoće za boje u Photoshopu, Illustratoru i drugim okruženjima
Dobra vijest je da danas ne morate zamišljati kako osoba koja ne prepoznaje boju kože vidi vaš rad: to se može simulirati direktno iz uobičajenih alata za dizajn. Photoshop i Illustrator već godinama uključuju opcije pregleda za osobe s daltonizmom, što vam omogućava da provjerite rezultat jednim klikom..
Preporučeni tijek rada je jednostavan. Prvo, provjerite je li dokument u RGB modu, budući da Simulacija sljepoće za boje se vrši na ekranu.Zatim, u Photoshopu ili Illustratoru, možete otići na meni "View > Proof Settings > Color Blindness" i odabrati između načina rada koji odgovaraju protanopiji ili deuteranopiji, ovisno o tome što želite provjeriti.
Aktiviranjem ovih pregleda, Slika koju vidite na ekranu mijenja se kao da je posmatra osoba sa tom specifičnom vrstom oštećenja vida.Ne mijenja originalnu datoteku, već samo način na koji se prikazuje na vašem monitoru. Ovo vam omogućava da otkrijete probleme s kontrastom, parove boja koji se sukobljavaju ili elemente koji gube istaknutost.
Tipičan tijek rada može biti: originalni dizajn, simulirani prikaz za daltoniste, podešavanje boja i kontrasta i ponovna provjera. Ideja je ponavljati sve dok ne postignemo verziju u kojoj i osoba s "normalnim" vidom boja i korisnik s daltonizmom mogu lako razumjeti dizajn..
U Adobeovoj dokumentaciji naći ćete više detalja o ovim testnim načinima rada i specifične preporuke za podešavanje boja. Nadalje, ovi alati nisu ograničeni samo na statičku grafiku: Podjednako su korisni za interfejse, dugmad, ikone i bilo koji resurs koji planirate izvesti na web ili u aplikaciju..
Dodaci i ekstenzije za dizajniranje pristupačnih interfejsa (Sketch, Figma, Adobe XD, preglednik)
Ako radite s alatima za dizajn interfejsa kao što su Sketch, Figma ili Adobe XD, imate i neke vrlo moćne saveznike. Jedan od najpoznatijih je dodatak (plugin). sasvimDostupan za glavne aplikacije UI dizajna, Stark vam omogućava da simulirate glavne tipove sljepoće za boje (protanopija, deuteranopija, tritanopija, itd.) direktno na vašim mockupovima.
U svojoj besplatnoj verziji, Stark vam omogućava pregled tri osnovna oblika sljepoće za boje (protanopija, deuteranopija, tritanopija)Ako trebate simulirati više varijacija ili pristupiti naprednim funkcijama, plaćena verzija proširuje raspon opcija. Osim toga, Stark uključuje vrlo praktičnu funkciju za provjeru kontrasta između dvije boje i provjeru nivoa pristupačnosti prema WCAG smjernicama, a možete se konsultovati i sa vodičima o... dodaci za pristupačnost.
Još jedna vrlo svestrana opcija za Chrome preglednik je ekstenzija. DaltonizamOvaj alat je besplatan i Omogućava vam simuliranje svih najčešćih tipova sljepoće za boje na bilo kojoj web stranici koju ste otvorili.Ovo je posebno korisno ako radite s Figmom ili drugim alatima baziranim na pregledniku, jer možete procijeniti stvarni rezultat unutar konteksta samog web sučelja.
Pomoću Colorblindinga možete prelaziti između različitih simulacija (protanopija, deuteranopija, tritanopija, parcijalne anomalije, akromatopsija itd.) i u stvarnom vremenu vidjeti kako se vaš dizajn transformira. Ovo pomaže u brzom identifikovanju problematičnih elemenata i opravdavanju izbora boja klijentima ili timovima koji nisu upoznati sa temom..
Ako više volite ostati unutar Adobe ekosistema, imajte na umu da Photoshop i Illustrator već uključuju vlastite načine pregleda. U svim slučajevima, cilj je isti: Potvrdite svoje odluke ne samo na osnovu teorije, već i na osnovu stvarnog iskustva korisnika s različitim tipovima kolornog vida..
Dobre prakse bojanja za dizajne pristupačne osobama s oštećenjem vida u boji
Pored alata, postoji niz vrlo specifičnih praksi koje možete sistematski uključiti kako biste svoje dizajne učinili inkluzivnijim. Ne radi se o odustajanju od boje, već o njenom inteligentnom korištenju i kombinovanju s drugim resursima..
Prvo, ključna preporuka: Izbjegavajte oslanjanje isključivo na boju za prenošenje važnih informacija.Ako se status, greška, kategorija ili nivo prioriteta razlikuju samo promjenom boje, stvarate direktnu barijeru za dio svoje publike. Uvijek pratite ove promjene tekstom, ikonama, varijacijama oblika ili uzorcima.
Druga ključna ideja je pregledati paletu koristeći kriterije jasnoće (konsultujte trendovi palete boja). na primjer, Čista crvena boja mnogim ljudima s protanopijom izgleda tamnija i mutnija.Dok se crvena s narančastim podtonom obično lakše percipira, plavo-zelena je uglavnom manje problematična od žućkasto-zelene, koja se može pomiješati s drugim nijansama.
Također vrijedi zapamtiti da Siva se može pomiješati s magenta, blijedoružičastim ili određenim nježno zelenim nijansama.Stoga, nije uvijek tako neutralno kao što se čini. A postoje posebno delikatne kombinacije koje je najbolje izbjegavati kad god je to moguće: crvena sa zelenom, žuta sa jarko zelenom, svijetloplava sa ružičastom i tamnoplava sa ljubičastom su neke od najproblematičnijih.
Što se tiče preklapanja, Nije dobra ideja koristiti crvene elemente na vrlo tamnim pozadinamaNiti bijeli elementi na žutoj ili narandžasto-crvenoj pozadini, jer čitanje postaje mnogo teže za mnoge korisnike s oštećenjem vida boja.
Da bi se pojačala diferencijacija između blokova boja, jednostavno i efikasno rješenje je Dodajte dobro definirane okvire (bijele, crne ili tamne tonove) između susjednih područja. Ovi obrisi pomažu u vizualnom odvajanju elemenata koji bi se zbog boje mogli pomiješati.
Iznad boje: oblici, teksture i tipografija u službi pristupačnosti
Dizajneri su navikli koristiti boju kao univerzalni kod: zelena za "dobro", crvena za "loše", žuta za "upozorenje" itd. Ali kada boja prestane biti pouzdana, postaje neophodno proširiti repertoar. Oblici, teksture, ikone i tipografija postaju osnovni saveznici.
Na primjer, u obrascima ili sistemima za validaciju, crvenu boju greške možete pratiti jasnim simbolom (krst, trougao upozorenja, uskličnik) i objašnjavajućim tekstom. Na ovaj način, čak i ako se boja ne percipira ispravno, poruka se prima bez dvosmislenosti..
U grafikonima, mapama ili infografikama s mnogo kategorija, oslanjanje isključivo na boju gotovo sigurno će uzrokovati probleme. uzorci, pruge, tačke ili varijacije u teksturi na područjima sa sličnim bojama omogućava da ih razlikuju čak i oni koji ne percipiraju dobro hromatske razlike.
Tipografija također može ići u vašu korist (vodič za tipografiju). Ne moraš zlostavljati hiljadu različitih porodica, ali možeš se igrati s njima promjene u debljini, stilovima (regularni, podebljani, kurziv), veličinama ili jasno diferenciranim porodicama za označavanje hijerarhija i stanja. Dakle, "aktivno" dugme ne samo da mijenja boju, već može dobiti i tipografsku težinu ili dodatnu ikonu.
U složenim interfejsima, uključite dosljedna ikonografija i lako prepoznatljiv Za ponavljajuće radnje (spremanje, brisanje, potvrđivanje, otkazivanje), smanjuje se oslanjanje na boju. Čak i ako korisnik ne može jasno vidjeti boju dugmeta, prepoznat će radnju po simbolu i tekstualnoj oznaci.
Ukratko, što je redundantniji sistem signalizacije (boja + oblik + tekst + ikona), Što je dizajn robusniji, bit će otporniji na različite oblike sljepoće za boje ili drugih problema s vidom.
Standardi kontrasta boja i pristupačnosti (WCAG)
Pored izbora boja i upotrebe alternativnih oblika, kontrast između teksta i pozadine je osnovni stub pristupačnosti. Kombinacija boja može biti prekrasna u driblingu, ali ako je kontrast nizak, to će biti glavobolja za svakog korisnika sa slabim vidom ili sljepoćom za boje..
Smjernice za pristupačnost web sadržaja (WCAG), koje je definirao W3C, utvrđuju minimalne omjere kontrasta koje biste trebali koristiti kao referencu. Omjer kontrasta je numerička mjera koja uspoređuje relativnu svjetlinu dvije boje. Što je veći omjer, to je veća razlika i, samim tim, tekst postaje čitljiviji..
Da bi se ispunio nivo usklađenosti sa AA (najčešći kod ozbiljnih projekata), Normalan tekst treba imati minimalni kontrastni omjer od 4,5:1 u odnosu na pozadinu.U slučaju velikih tekstova ili naslova (iznad određene veličine ili tipografske težine), dozvoljen je nešto niži kontrastni omjer od 3:1.
Ako želite postići najviši nivo pristupačnosti, AAA, Potreban kontrastni omjer za normalan tekst povećava se na 7:1Za duže tekstove ili naslove, minimum je 4,5:1. Nije uvijek potrebno dostići AAA u svemu, ali je dobro znati gdje su granice i kada ima smisla podići ljestvicu.
Ne morate ručno izračunavati ove omjere. Postoji mnogo jednostavnih alata koji vam omogućavaju da unesete dvije boje (na primjer, u heksadecimalnom formatu) i vratite omjer kontrasta i da li ispunjava AA ili AAA standarde. Stark, na primjer, integrira provjeru kontrasta direktno u tijek rada Figme, Sketcha ili XD-a.Samo trebate odabrati dva sloja i koristiti opciju provjere kontrasta.
Postoje i samostalni uslužni programi, kao što je aplikacija za desktop računare. kontrast za macOS ili web stranice poput Omjer kontrastagdje unosite boje i odmah dobijate omjer i nivo pristupačnosti koji ste postigli. To su jednostavni alati, ali nevjerovatno korisni za to da pristupačnost postane sastavni dio procesa, a ne rješenje u zadnji čas.
Uloga dizajnera: odgovornost, iskustvo i prilike
Pored poštivanja propisa i korištenja dodataka (plug-inova), važno je preuzeti ulogu koju imamo kao dizajneri u izgradnji inkluzivnijih okruženja. Živimo u svijetu koji je, generalno, stvoren razmišljajući o „savršenoj“ viziji, dok relevantni dio populacije ne odgovara tom standardu..
Postoje iskazi studenata dizajna koji, nakon što otkriju da su daltonisti nakon testa boja, razmišljaju o odustajanju od studija. Strah od grešaka s paletama boja, od toga da neće "vidjeti" ono što drugi vide ili da neće uspjeti u klijentskim projektima je vrlo jak. Međutim, sljepoća na boju kože vas ne diskvalificira kao profesionalnog dizajnera.Kao što nošenje naočala ne sprečava da budete dobar fotograf.
U stvari, poznavanje problema percepcije iz prve ruke može postati prednost: To vas čini svjesnijim važnosti kontrasta, oblika, tipografije i redundancije signala.Mnogi stručnjaci za daltoniste odlično rade oslanjajući se na alate za simulaciju, sisteme za referencu boja, povratne informacije od kolega i najbolje prakse.
Iz poslovne perspektive, uključivanje pristupačnosti boja u vaše projekte nije samo "ispravna stvar", već je i konkurentska prednost. Digitalni proizvodi koji su bolje prilagođeni osobama s daltonizmom obično imaju bolje cjelokupno korisničko iskustvo, bolju stopu uspjeha u ključnim zadacima i, u mnogim slučajevima, bolji organski rang., budući da je pristupačnost sve više cijenjeni faktor.
U konačnici, ne radi se o stvaranju "posebnog dizajna" samo kada je projekt označen kao inkluzivan, već o integraciji tih kriterija u svakodnevni život. Provjera kontrasta, izbjegavanje konfliktnih kombinacija, korištenje pratećih ikona i teksta ili testiranje dizajna simulatorima sljepoće za boje su koraci koji ne oduzimaju previše vremena, a uveliko poboljšavaju kvalitet konačnog rezultata..
Prilagođavanje dizajna za osobe s daltonizmom nije hir ili dodatni teret; to je dio dobrog obavljanja našeg posla. Rad s pametnijim paletama, odgovarajućim kontrastima, jasnim simbolima i alatima za simulaciju omogućava da vaši projekti budu primjećeni mnogo šire publike. Kada boja prestane biti jedina podrška i postane još jedan resurs unutar bogatog i redundantnog sistema vizuelnih signala, dizajn dobija na jasnoći, upotrebljivosti i humanosti.I to je primjetno kako u zadovoljstvu korisnika, tako i u performansama bilo kojeg digitalnog proizvoda.
