Kui me räägime graafilisest disainist, kasutajaliidesest või veebidisainist, eeldame peaaegu alati, et kõik näevad värve samamoodi nagu meie. Tegelikkus on aga see, et märkimisväärne osa kasutajatest tajub liidest värvipimeduse tõttu väga erinevalt. Nende inimeste värvitaju ignoreerimine võib muuta meie kujundused segaseks, kasutuskõlbmatuks või lihtsalt ligipääsmatuks., kuigi esmapilgul võivad need tunduda laitmatud.
Lisaks pole küsimus ainult tehniline või ligipääsetavuse küsimus, vaid ka sügavalt inimlik. Iga ekraani taga on päris kasutajad, kes võivad tunda end tõrjutuna, kui vorm, kaart või hoiatussüsteem põhineb ainult värvil.Õnneks on meil tänapäeval tööriistad, parimad tavad ja selged kriteeriumid värvipimedust silmas pidades disainimiseks, ilma et see loovust ohverdaks.
Mis on värvipimedus ja miks peaks see disainis oluline olema?
Värvipimedus ehk värvitaju puudulikkus on geneetilise päritoluga nägemishäire, mis mõjutab võrkkesta koonuste tööd. Need koonused on rakud, mis vastutavad punase, rohelise ja sinise värviga seotud lainepikkuste tõlgendamise eest.Ja kui mõni neist tüüpidest ebaõnnestub või puudub, ilmnevad erinevad värvipimeduse vormid.
Statistilisel tasandil Hinnanguliselt esineb umbes 8%-l meestest ja umbes 1%-l naistest mingisugune värvipimedus selle kõige levinumas vormis.Meeste ja naiste erinevust seletatakse asjaoluga, et paljud neist mutatsioonidest asuvad X-kromosoomis ja on tavaliselt retsessiivsed, seega meestel, kellel on ainult üks X-kromosoom, avalduvad need tõenäolisemalt.
Disaini seisukohast tähendab see, et iga sajast inimesest, kes külastavad teie veebisaiti, kasutavad teie rakendust või vaatavad teie plakatit, Kuni kaheksa inimest võivad teie sõnumi olulist osa tajuda erinevalt või sellest hästi mitte aru saada.See võib tunduda väikese protsendina, aga kasutajakogemuse ja professionaalse vastutuse osas on see liiga suur grupp, et seda ignoreerida.
Värvipimeduse kõige levinum probleem on raskused värvitoonide eristamisel. Punane ja rohelineSellele järgnevad muutused siniste ja kollaste toonide tajumises. Kõige äärmuslikumatel juhtudel võib inimene hakata maailma nägema peaaegu halltoonides, kus kõik värvid on taandunud heleduse varieeruvusele.
Kui seda mitte arvestada, võiks kujundada ikoonisüsteemi, kus õige asi on roheline ja vale asi punane ning värvipimeda inimese jaoks on mõlemad olekud praktiliselt identsed. Mis sulle täiesti selge on, võib teistele tunduda jama., millel on otsene mõju kasutatavusele, arusaadavusele ja paljudel juhtudel ka ohutusele endale (mõelge metrookaartidele, siltidele, kriitilistele veateadetele jne).
Peamised värvipimeduse tüübid, mis mõjutavad disaini
Disainis ei pea saama oftalmoloogiks, aga kasulik on selgelt aru saada, millised värvipimeduse tüübid on kõige levinumad ja kuidas need mõjutavad seda, mida kasutaja ekraanil näeb. Nende variatsioonide mõistmine aitab teil ette näha kontrastiprobleeme, vastuolulisi kombinatsioone ja riskantseid värvivalikuid..
Kõige levinum põhiklassifikatsioon viitab protanoopiale, deuteranoopiale ja tritanoopiale, kuid spekter on tegelikult laiem, hõlmates nii täielikke kui ka osalisi värvimuutuse vorme. Disaini seisukohast kõige olulisemad tüübid on kokku võetud allpool.
ProtanopiaProtanoopia on punase värvi suhtes tundlikkuse puudumine. Protanoopiaga inimestel on suuri raskusi pikkade valguse lainepikkuste tajumisega, mistõttu punased kipuvad tunduma tumedamad, tuhmimad või isegi pruunide või roheliste toonidega ekslikult. See mõjutab otseselt kõiki liideseid, mis kasutavad punast oma põhivärvina või veaindikaatorina.
DeuteranoopiaAntud juhul seisneb probleem rohelise nägemise eest vastutavates koonustes. Deuteranoopikutel on selge häire punaste ja roheliste toonide eristamisel, kuigi need võivad tunduda väga sarnased. Praktilisest vaatenurgast... Mõlemad variandid (protanoopia ja deuteranoopia) rühmitatakse sageli "punase-rohelise pimeduse" alla ja moodustavad umbes 99% värvipimeduse juhtudest..
TritanoopiaTritanoopia on palju haruldasem ja seotud sinise suhtes tundlikkuse puudumisega. Seda tuntakse ka sinise dikromaatilisusena. Tritanoopiaga inimesed võivad siniseid toone rohelistega segi ajada ning neil võib olla probleeme kollaste toonidega, mis võib mõjutada nendel kontrastidel põhinevaid palette.
ProtanomaaliaPunane koonus ei puudu siin täielikult, kuid see toimib ebanormaalselt. Inimene tajub endiselt punast, kuid väiksema intensiivsusega või nihkudes teiste varjundite poole, nii et Värvid, mis sellest kanalist suuresti sõltuvad, võivad olla vähem eristatavad.See on düskromatopsia leebem vorm kui protanoopia, kuid disaini seisukohalt sama oluline.
DeuteranomaaliaMidagi sarnast toimub rohelise koonusega deuteranomia korral. Koonus ei puudu, kuid selle reaktsioon on anomaalne, mis tõrjub rohelise taju välja. Erinevalt deuteranoopiast, Punased ei tundu nii tumedad, kuid teatud roheliste ja punaste eristamine on endiselt problemaatiline.Paljud neist kasutajatest suudavad eristada nüansse suhteliselt täpselt, kuid mitte samamoodi nagu inimene, kellel on "normaalne" värvinägemine.
TritanomaaliaSee on haruldane variant, mille puhul on teatud sinise ja kollase varjundite eristamise võime vähenenud. Kuigi see mõjutab väga väikest protsenti elanikkonnast (umbes 0,01%), Seda tasub teada, kui visuaalne hierarhiasüsteem põhineb peaaegu eranditult nendel värvidel..
AkromatopsiaSee on äärmuslik juhtum, kus inimene tajub praktiliselt ainult valget, musta ja kõiki nendevahelisi halli varjundeid. Värv lakkab olemast kasulik tööriist, seega Kujundus peaks põhinema kontrastil, tüpograafial, ikonograafial ja kompositsioonil..
Sinine koonus monokroomne (BCM)See on pärilik seisund, mille korral punased ja rohelised koonused ei tööta korralikult. Selle tulemuseks on väga halb värvide eristamine, madal nägemisteravus, nüstagm ja valguskartus. Disaini seisukohast nõuab see erilist tähelepanu kontrastsusele, kirjasuurusele ja üldisele loetavusele.
Värvipimeduse tegelik mõju graafilistele ja digitaalsetele projektidele
See võib tunduda vaid teooriana, kuid värvipimeduse mõju igapäevasele disainitööle on väga konkreetne. Halb värvipaleti valik või ainult värvile lootmine võib mõne kasutaja jaoks kogemuse täielikult rikkuda.isegi kui kõik teised tajuvad liidest täiesti funktsionaalsena.
Mõelgem klassikalisele metrookaardile: iga liin on tähistatud erineva värviga ja paljudel juhtudel on ainus visuaalne vihje see värv, nagu juhtub näiteks ... sildid ja värvipaletidNormaalse nägemisega inimesel on marsruutide lugemine kohene; värvipimedal inimesel Kaks spektril üksteisele lähestikku asuvat joont võivad olla praktiliselt eristamatud., just siis, kui reisi planeerimiseks on kõige olulisem neid eristada.
Teine näide on veateated vormides või valideerimissüsteemides. On väga tavaline, et vale väli on tähistatud lihtsalt punase äärisega. Kui midagi muud pole lisatud, Punase-rohelise nägemise pimedusega kasutaja ei pruugi märgata mingit erinevust "õigest" olekust.Näiteks platvormid nagu Facebook sisaldavad hüüumärgi ikooni, et veateadet mittekromaatilise visuaalse vihje abil rõhutada.
Veebi- või mobiililiidestes on samuti väga tavaline eristada olekuid (aktiivne/mitteaktiivne, valitud/mittevalitud) ainult värvimuutuste abil. Kui nende olekute vaheline kontrast on madal või põhineb problemaatilistel kombinatsioonidel, Värvipimedad kasutajad peavad toimuva mõistmiseks palju rohkem pingutama.mis tähendab pettumust, vigu ja allaandmist.
Kokkuvõttes, professionaalsest vaatenurgast... Hea disain ei seisne ainult esteetikas: see peab selgelt edastama infot kogu publikule, sealhulgas värvipimedatele inimestele. ja ole osa kaasav veebKohandumata jätmine ei tähenda mitte ainult eetilist probleemi, vaid ka efektiivsuse, konversiooni ja isegi brändi maine kadu.
Tööriistad värvipimeduse simuleerimiseks Photoshopis, Illustratoris ja muudes keskkondades
Hea uudis on see, et tänapäeval ei pea te ette kujutama, kuidas värvipime inimene teie tööd näeb: seda saab simuleerida otse tavapäraste disainitööriistade abil. Photoshop ja Illustrator on aastaid lisanud värvipimeduse eelvaate valikuid, mis võimaldavad teil tulemust ühe klõpsuga kontrollida..
Soovitatav töövoog on lihtne. Esiteks veenduge, et dokument on RGB-režiimis, kuna Värvipimeduse simulatsioon toimub ekraanil.Seejärel saate Photoshopis või Illustratoris minna menüüsse "Vaade > Proof Settings > Color Blindness" ja valida protanoopiale või deuteranoopiale vastavate režiimide vahel olenevalt sellest, mida soovite kontrollida.
Nende eelvaadete aktiveerimisega Ekraanil nähtav pilt muutub nii, nagu vaataks seda inimene, kellel on seda tüüpi nägemispuue.See ei muuda algset faili, vaid ainult seda, kuidas see teie monitoril kuvatakse. See võimaldab teil tuvastada kontrastiprobleeme, konflikte tekitavaid värvipaare või elemente, mis kaotavad oma nähtavust.
Tüüpiline töövoog võib olla järgmine: algne kujundus, värvipimeduse simuleeritud vaade, värvi- ja kontrastsuse korrigeerimine ning uuesti kontrollimine. Idee on itereerida seni, kuni jõuame versioonini, kus nii "normaalse" värvinägemisega inimene kui ka värvipime kasutaja saavad disainist hõlpsasti aru..
Adobe'i dokumentatsioonist leiate lisateavet nende testimisrežiimide kohta ja konkreetseid soovitusi värvide korrigeerimiseks. Lisaks ei piirdu need tööriistad ainult staatilise graafikaga: Need on võrdselt kasulikud liideste, nuppude, ikoonide ja kõigi ressursside jaoks, mida kavatsete veebi või rakendusse eksportida..
Ligipääsetavate liideste kujundamise pluginad ja laiendused (Sketch, Figma, Adobe XD, brauser)
Kui töötad liidese kujundamise tööriistadega nagu Sketch, Figma või Adobe XD, on sul ka mõned väga võimsad liitlased. Üks tuntumaid on plugin KarmStark on saadaval suuremate kasutajaliidese disaini rakenduste jaoks ning võimaldab simuleerida peamisi värvipimeduse tüüpe (protanoopia, deuteranoopia, tritanoopia jne) otse oma maketidel.
Oma tasuta versioonis Stark võimaldab teil eelvaadata kolme põhilist värvipimeduse vormi (protanoopia, deuteranoopia, tritanoopia)Kui teil on vaja simuleerida rohkem variatsioone või pääseda ligi täiustatud funktsioonidele, laiendab tasuline versioon valikuvõimalusi. Lisaks sisaldab Stark väga praktilist funktsiooni kahe värvi kontrasti kontrollimiseks ja ligipääsetavuse tasemete kinnitamiseks vastavalt WCAG suunistele ning saate tutvuda juhenditega ... ligipääsetavuse pluginad.
Teine väga mitmekülgne Chrome'i brauseri valik on laiendus. VärvipimestamineSee tööriist on tasuta ja See võimaldab teil simuleerida kõiki levinumaid värvipimeduse tüüpe mis tahes avatud veebilehel.See on eriti kasulik Figma või muude brauseripõhiste tööriistadega töötamisel, sest saate tegelikku tulemust hinnata veebiliidese enda kontekstis.
Värvipimeduse abil saate vahetada erinevate simulatsioonide vahel (protanoopia, deuteranoopia, tritanoopia, osalised anomaaliad, akromatopsia jne) ja näha reaalajas, kuidas teie disain muutub. See aitab probleemseid elemente kiiresti tuvastada ja värvivalikuid teemaga mitte tuttavatele klientidele või meeskondadele põhjendada..
Kui eelistate jääda Adobe ökosüsteemi piiresse, pidage meeles, et Photoshopil ja Illustratoril on juba oma eelvaaterežiimid. Kõigil juhtudel on eesmärk sama: Kinnitage oma otsuseid mitte ainult teooria, vaid ka erinevat tüüpi värvinägemisega kasutajate reaalsete kogemuste põhjal..
Head värvipraktikad värvipimedatele inimestele ligipääsetavate kujunduste jaoks
Lisaks tööriistadele on olemas mitmeid väga spetsiifilisi praktikaid, mida saate süstemaatiliselt rakendada, et muuta oma kujundused kaasavamaks. Asi pole värvist loobumises, vaid selle intelligentse kasutamises ja teiste ressurssidega kombineerimises..
Esiteks, oluline soovitus: Väldi olulise teabe edastamiseks ainult värvile lootmist.Kui olekut, viga, kategooriat või prioriteeditaset eristab ainult värvimuutus, lood otsese barjääri osale oma sihtrühmast. Lisa nendele muudatustele alati tekst, ikoonid, kuju variatsioonid või mustrid.
Teine oluline idee on paleti ülevaatamine selguskriteeriumide abil (vt värvipaleti trendid). Näiteks Puhas punane kipub paljudele protanoopiaga inimestele tunduma tumedam ja süngem.Kuigi oranži alatooniga punast on tavaliselt kergemini tajutav, on sinakasroheline üldiselt vähem problemaatiline kui kollakasroheline, mida võib teiste toonidega segi ajada.
Samuti tasub meeles pidada, et Halli võib segi ajada magenta, kahvaturoosa või teatud pehmete roheliste toonidega.Seega pole see alati nii neutraalne, kui paistab. Ja on eriti õrnu kombinatsioone, mida on parem võimaluse korral vältida: punane rohelisega, kollane erkrohelisega, helesinine roosaga ja tumesinine violetsega on ühed kõige problemaatilisemad.
Kattuvuste osas Punaste elementide kasutamine väga tumedal taustal ei ole hea mõte.Ega ka valgeid elemente kollasel või oranžikaspunasel taustal, sest paljudel värvinägemispuudega kasutajatel on lugemine palju raskem.
Värviplokkide eristamise tugevdamiseks on lihtne ja tõhus lahendus Lisa selgelt piiritletud äärised (valged, mustad või tumedad) külgnevate alade vahel. Need kontuurid aitavad visuaalselt eraldada elemente, mida värvi tõttu võiks segi ajada.
Värvist kaugemale: kujundid, tekstuurid ja tüpograafia ligipääsetavuse teenistuses
Disainerid on harjunud kasutama värvi universaalse koodina: roheline tähistab "head", punane "halba", kollane "hoiatust" jne. Aga kui värv lakkab olemast usaldusväärne, muutub vajalikuks repertuaari laiendada. Kujundid, tekstuurid, ikoonid ja tüpograafia saavad olulisteks liitlasteks.
Näiteks vormides või valideerimissüsteemides saate punase veavärviga kaasneda selge sümboliga (rist, hoiatuskolmnurk, hüüumärk) ja selgitava tekstiga. Sel viisil, isegi kui värvi ei tajuta õigesti, võetakse sõnum vastu ilma üheselt mõisteta..
Paljude kategooriatega diagrammide, kaartide või infograafikute puhul on ainuüksi värvile lootmine peaaegu garanteeritud probleemide tekkes. mustrid, triibud, täpid või tekstuuri variatsioonid sarnaste värvidega aladel võimaldab neid eristada isegi neil, kes kromaatilisi erinevusi hästi ei taju.
Ka tüpograafia võib teie kasuks töötada (tüpograafia juhend). Sa ei pea tuhandet erinevat perekonda väärkohtlema, aga sa võid nendega mängida paksuse, stiilide (tavaline, paks, kaldkiri), suuruste või selgelt eristunud perekondade muutused hierarhiate ja olekute tähistamiseks. Seega „aktiivne” nupp mitte ainult ei muuda värvi, vaid võib saada ka tüpograafilise kaalu või lisada ikooni.
Komplekssetes liidestes lisage järjepidev ikonograafia ja kergesti äratuntav Korduvate toimingute (salvestamine, kustutamine, kinnitamine, tühistamine) puhul vähendab see sõltuvust värvist. Isegi kui kasutaja ei näe nupu värvi selgelt, tunneb ta toimingu ära sümboli ja tekstisildi järgi.
Lühidalt, mida redundantsem on signaalimissüsteem (värv + kuju + tekst + ikoon), Mida vastupidavam on disain erinevate värvipimeduse või muude nägemisprobleemide vastu.
Värvikontrast ja ligipääsetavuse standardid (WCAG)
Lisaks värvivalikule ja alternatiivsete kujundite kasutamisele on teksti ja tausta kontrast ligipääsetavuse alustalaks. Värvikombinatsioon võib driblis ilus olla, aga kui kontrastsus on madal, tekitab see peavalu igale nägemispuudega või värvipimedale kasutajale..
W3C määratletud veebisisu ligipääsetavuse juhised (WCAG) kehtestavad minimaalsed kontrastsuse suhted, mida peaksite võrdlusena kasutama. Kontrastsuse suhe on numbriline mõõt, mis võrdleb kahe värvi suhtelist heledust. Mida suurem on suhe, seda suurem on erinevus ja seetõttu muutub tekst loetavamaks..
AA vastavustaseme saavutamiseks (kõige levinum tõsiste projektide puhul) Tavalise teksti kontrastsuse suhe taustaga peaks olema vähemalt 4,5:1.Suurte tekstide või pealkirjade puhul (üle teatud suuruse või tüpograafilise kaalu) on lubatud veidi madalam kontrastsuse suhe, 3:1.
Kui soovite saavutada kõrgeima ligipääsetavuse taseme, AAA, Tavalise teksti jaoks vajalik kontrastsuse suhe suureneb 7:1-ni.Pikemate tekstide või pealkirjade puhul on minimaalne suhe 4,5:1. AAA tasemele jõudmine pole alati vajalik kõiges, aga hea on teada, kus on piirid ja millal on mõttekas latti tõsta.
Sa ei pea neid suhteid käsitsi arvutama. On palju lihtsaid tööriistu, mis võimaldavad sul sisestada kaks värvi (näiteks kuueteistkümnendsüsteemis) ja tagastada kontrastsuse suhte ning selle, kas see vastab AA või AAA standarditele. Näiteks Stark integreerib kontrastikontrollija otse Figma, Sketchi või XD töövoogu.Peate lihtsalt valima kaks kihti ja kasutama kontrasti kontrollimise valikut.
Samuti on olemas eraldiseisvad utiliidid, näiteks töölauarakendus. Kontrast macOS-i jaoks või selliste veebisaitide jaoks nagu Kontrastsussuhekus sisestate värvid ja saate koheselt kätte saavutatud suhte ja ligipääsetavuse taseme. Need on kerged tööriistad, kuid uskumatult kasulikud, et muuta ligipääsetavus protsessi lahutamatuks osaks, mitte viimase hetke lahenduseks.
Disaineri roll: vastutus, kogemused ja võimalused
Lisaks eeskirjade järgimisele ja pistikprogrammide kasutamisele on oluline võtta endale disaineritena roll kaasavama keskkonna loomisel. Me elame maailmas, mis on üldiselt loodud mõeldes „täiuslikule“ visioonile, kui oluline osa elanikkonnast sellele standardile ei vasta..
On lugusid disainitudengitest, kes pärast värvitesti tegemist avastavad, et on värvipimedad, ja kaaluvad õpingute katkestamist. Hirm värvipalettidega vigade tegemise, teiste nähtu mittenägemise või kliendiprojektides läbikukkumise ees on väga tugev. Värvipime olemine ei diskvalifitseeri teid aga disainiprofessionaalina.Nii nagu prillide kandmine ei takista sul hea fotograaf olemast.
Tegelikult võib tajumisraskuste esmane tundmine olla eeliseks: See teeb sind teadlikumaks kontrasti, kujundite, tüpograafia ja signaalide koondamise olulisusest.Paljud värvipimedate spetsialistid töötavad suurepäraselt, tuginedes simulatsioonitööriistadele, värvireferentssüsteemidele, kolleegide tagasisidele ja parimatele tavadele.
Ärilisest vaatenurgast pole värvide ligipääsetavuse lisamine oma projektidesse mitte ainult "õige asi", vaid ka konkurentsieelis. Värvipimedatele inimestele paremini kohandatud digitaalsetel toodetel on tavaliselt parem üldine kasutuskogemus, paremad edukuse määrad kriitiliste ülesannete täitmisel ja paljudel juhtudel parem orgaaniline edetabel., kuna ligipääsetavus on üha väärtuslikum tegur.
Lõppkokkuvõttes ei ole asi mitte ainult "erilise disaini" loomises ainult siis, kui projekt on märgistatud kaasavaks, vaid nende kriteeriumide integreerimises igapäevaellu. Kontrastide kontrollimine, vastuoluliste kombinatsioonide vältimine, ikoonide ja tugiteksti kasutamine või disaini testimine värvipimeduse simulaatoritega on sammud, mis ei võta liiga palju aega ja parandavad oluliselt lõpptulemuse kvaliteeti..
Värvipimeduse arvestamine disainilahendustega ei ole moehullus ega lisakoorem; see on osa meie töö heast tegemisest. Nutikamate palettide, sobivate kontrastide, selgete sümbolite ja simulatsioonitööriistadega töötamine võimaldab teie projektidel sobida palju laiemale publikule. Kui värv lakkab olemast ainus tugisammas ja saab vaid üheks ressursiks rikkalikus ja üleliigses visuaalsete signaalide süsteemis, saavutab disain selguse, kasutatavuse ja inimlikkuse.Ja see on märgatav nii kasutajate rahulolus kui ka iga digitaalse toote toimivuses.
