Kuidas kujundada juurdepääsetav värviskeem

Foto Harry Quan saidil Unsplash

See oli varem Envoy veebi armatuurlaua värviskeem.

Nagu paljud veebi värvilahendused, sisaldas see brändi värvi (punane), infovärvi (sinine), eduvärvi (roheline), hoiatusvärvi (oranž) ja erinevaid halli toone.

Kuigi need värvid tunduvad eraldiseisva palettana kenad, mõistsime aja jooksul, et need ei olnud meie veebisaidi kasutajaliidese kõigi vajaduste jaoks piisavalt paindlikud. Üks kommentaar tuli disainikriitikutes ikka ja jälle esile: "Sellel tekstil pole piisavalt kontrasti."

[Madal kontrastsus, vasak: teksti värv ja taustavärv on sarnased, nii et teksti on raskem lugeda. Kui värvid kontrasteeruvad rohkem, aka on teistsugused, on teksti kergem lugeda.]

Meie olemasoleva värvipaleti varjundid olid kontrastiks enamasti liiga madalad ja tulemuseks oli meie saidil palju raskesti loetavat teksti.

Otsustasin muuta meie värviskeemi üsna lihtsalt seetõttu, et soovime, et meie veebisait oleks loetav. Kuid tahtsin kujundada ka veebi juurdepääsetavuse juhistele vastava värviskeemi, et meie sait pakuks kaasavamat kogemust.

Veebi juurdepääsetavuse kujundamine tähendab kogemuste tahtlikku loomist kõigile kasutajatele, sõltumata nende visuaalsest, kuulmis-, motoorsetest või kognitiivsetest võimetest. Sellised organisatsioonid nagu World Wide Web Consortium (W3C) on loonud juurdepääsetavuse standardid, mida igaüks saab järgida, et luua kaasavam veeb.

Siin on vaid mõned põhjused, miks tahtsime investeerida juurdepääsetavama värvilahenduse loomisse ja miks võiksite kaaluda ka selle loomist -

  • Paljudel inimestel on nägemiskahjustus: Maailma Terviseorganisatsiooni hinnangul elab maailmas 1,3 miljardit inimest nägemispuudega mingis vormis.
  • Parem loetavus aitab kõiki: inimese nägemisvõime pole ainus arvestatav tegur; mõelge erinevatele arvutitele ja seadmetele, millel on teie veebisaidile juurdepääs erineva eraldusvõime ja heledusega. Lihtsam lugeda on lihtsam kõigile.
  • Tänased juhised võiksid olla homse nõudmised: juurdepääsetavusega seotud kohtuasjad on tõusuteel. Olemasolevate juhiste järgimine võib vähendada ettevõtte vastutust.
  • Empaatia kasutajatele: disainerina on teil õigus anda maailmale head välja. Kasutage oma empaatiavõimelisi suurriike, et kujundada laiemat hulka inimesi, sest te hoolite neist.

Asusin teekonnale, et luua uus värviskeem kõrgema kontrastsusega ja paremini juurdepääsetavate värvidega. Võttis aega ja mõtlesin selle õigeks saada, nii et tahan oma protsessi teiega jagada, et rohkematel disaineritel oleks võimalik lahendada juurdepääsetavate värviskeemide kujundamise väljakutse.

Kuid kõigepealt, mis täpselt on juurdepääsetavad värvid?

Põhiline värvi juurdepääsetavuse juhend on valida värvid, mida inimesed saavad näha. Teksti nägemise olulisus on selle lugemine ja selle tähenduse mõistmine.

Niisiis, kuidas sa tead, milliseid värve inimesed näevad? See kõik puudutab kontrasti, mida, nagu ma juba lühidalt varem mainisin, on esiplaani ja taustvärvi võrdlus.

Allolevas näites näete, et vasakul olev tekst on väga sarnane taustavärviga (madal kontrastsus), kuid paremal olev tekst erineb taustavärvist (kõrge kontrastsus) ja seda on palju lihtsam lugeda.

W3C välja töötatud veebisisu juurdepääsetavuse juhised (WCAG) pakuvad valemi kahe värvi vahelise kontrastsuse arvutamiseks, mille tulemuseks on kontrastsuse suhe.

Kontrastsuse suhe on vahemikus 1: 1 (värvide vahel pole erinevusi) kuni 21: 1 (suurim võimalik erinevus). Neid on paljude tasuta tööriistade abil lihtne arvutada - Envoy meeskond armastab Tanagurut, Kontrast ja Starki visandite pistikprogrammi.

WCAG määratleb ka täpselt, kui suur kontrast peaks teksti loetavuse jaoks olemas olema:

Tase AA: miinimumstandard
Väikese teksti kontrastsuse suhe peaks olema 4,5: 1 või suurem
Suur tekst peaks olema 3: 1 või suurem

Tase AAA: täiustatud standard
Väike tekst peaks olema 7: 1 või suurem
Suur tekst peaks olema 4,5: 1 või suurem

Märkus: teie tekst kvalifitseeritakse kui „suur”, kui see pole paksus kirjas ja 18 pikslit (24 pikslit) või suurem või kui see on paksus kirjas ja 14 pp (~ 19 pikslit) või suurem; muidu on see “väike” tekst. W3C määratleb punkti kui 1/72 tolli ja piksli kui 1/96 tolli, nii et pikslite teisendamiseks punktideks korrutage piksli väärtus 0,75-ga.

Kuidas ehitasin paremini juurdepääsetava värvilahenduse

Nüüd, kui oleme kõik samal lehel selle kohta, millised on standardid ja miks me tahame neid järgida, lubage mul rääkida teile, kuidas ma selle teoks sain.

Arvutage kõigi olemasolevate värvide kontrastsuse suhe

Kasutage käepäraseid tööriistu, mida ma eespool mainisin (Tanaguru, Contrast, Stark), et testida oma olemasoleva värviskeemi kõiki värve oma veebisaidi taustal.

Ma leidsin, et ükski meie eredatest värvitoonidest ei vastanud teksti standardile 4.5: 1, ehkki me kasutasime neid kogu meie veebisaidil teksti jaoks. Kasutasime teksti jaoks ka mõnda heledamat halli värvi. Nii et ma teadsin, et mul on vaja kohandada nii meie värve kui ka halli.

Hallide valimine

Leiutasin kohti, kus veebisaidil kasutasime halli teksti, ja leidsin, et meil on järgmised kasutusjuhud:

  • Põhilõike tekst, tavaliselt hallimas tumedamas toonis
  • Teisene tekst või alampäised, tavaliselt halli kõige tumedamas toonis
  • Keelatud olekuga tekst ja kohahoidjad, tavaliselt halli kõige tumedamas toonis
Esmased päised, sekundaarne „host” teave, kolmanda astme null olek

See 1/2/3 muster on veebis üsna tavaline, nii et see on ka turvaline koht alustamiseks, kui ehitate paletti nullist.

Erinevate halli varjundite katsetamine, vähendades läbipaistmatust

Nüüd teadsin, et mul on vaja kolme halli varjundit, mis näevad teineteisest piisavalt erinevad välja, et soovitada esmast, keskastme või kolmanda astme staatust ning mis läbiksid ka juurdepääsetavuse norme.

Kontrastsuse suhte arvutamine pistikprogrammi Stark Sketch abil

Sketchi abil joonistasin paar ruutu, mis olid täidetud minu kõige tumedama värviga. Vähendasin ühe ruudu läbipaistmatust 50% ja kasutasin värvi tilgutit, et leida hekskood ligikaudseks tahkeks värviks. (Veebis saab erinevate värvide loomiseks kasutada üksi läbipaistmatust, kuid olen leidnud, et kindlad värvid on paindlikumad, kuna neid saab usaldusväärselt rakendada igasuguste kujundusriistade ja projektide jaoks.)

Seejärel arvutasin Starki pistikprogrammi abil selle heledama tooni kontrastsuse suhte. Valisin juhuslikult 50%, kuid see osutus täpselt 3: 1 kontrastiks valge taustal. Niisiis võtsin selle oma madalaimaks piiriks: see oleks kõige heledam halltoon, mida oma veebisaidil teksti jaoks kasutame. See läbib AA taseme standardid suure teksti jaoks ja seda on vastuvõetav kasutada vormivälja kohahoidjate ja muu peene teksti puhul.

Nii et nüüd tuli mul leida teisese teksti jaoks väärtus 100% kuni 50% kõige tumedamast värvist. 75% tundis end isegi 25% sammude tõttu hästi, kuid pärast erinevate varjundite proovimist laskusin 65% peale, sest see vastas just kontrastimurdepunktile 4,5: 1.

See protsess võtab natuke aega, kuid jätkake kontrasti arvutamist, kuni leiate täpse värviväärtuse, mis vastab teie soovitud suhtele.

Kui mul oli teksti jaoks kolm halli varjundit, siis kasutasin sama protsessi veel mõne tooni määratlemiseks ikoonide, ääriste ja taustvärvide jaoks (lihtsalt mitte teksti jaoks!)

Erksate värvide valimine

Ma olen aus: hallidel oli palju lihtsam. Ühe musta värvi valimine ja läbipaistvuse muutmine uute väärtuste leidmiseks on üsna lihtne. Kuid aktsentvärvide valimisel saate valida ükskõik mida, mis võimaldab teil arvutada palju kontrastsuse suhteid.

Kasutasin lähtepunktina meie olemasolevaid värve, sest neil oli eesmärk. Meie kaubamärgi värv ei muutunud ega muutu ning meie muud värvid pärinesid veebiriikide jaoks tavaliselt kasutatavatest värvirühmadest: sinine teabe saamiseks, roheline edu saavutamiseks ja oranž hoiatamiseks.

Kui teie visandil on kirjas RGB, klõpsake HSB-režiimi lülitumiseks RGB-sildil.

Alustasin alusvärviga, mis mulle meeldis iga värvipere jaoks, seejärel kohandasin küllastuse ja heleduse väärtusi, et luua sama tooni, kuid erineva kontrastsusega värve.

See võttis jällegi palju katseid, et avastada värve, mis mulle meeldisid ja mis vastasid ka kontrastsuse suhte murdepunktidele. Värviline palett oli palju subjektiivsem; oli kordi vaja varjundit pisut reguleerida, et erinevad varjundid näeksid mulle “sobivad”.

Lõppkokkuvõttes lõin kolm sinise ja rohelise tooni, mida saaks kasutada erineva kontrastsuse suhtega punktide teksti jaoks.

Oranž oli raske, kuna oranž muutub tumedamaks muutudes üsna kiiresti pruuniks, nii et otsustasime madalaima kontrastsuse suhte riba täita ainult kena sinepivarjuga ja kasutada seda säästlikult.

Ma ei muutnud meie kaubamärgi põhivärvi, kuid lõin kaks tumedamat versiooni, mida teksti jaoks kasutada.

Märkisin mõned erksad madalama kontrastsusega varjundid, mida saab kasutada ainult ikoonide või muude kui tekstide kaunistamiseks aktsentvärvidena.

Ja lõpuks lõin igast värvist väga kahvatud varjundid, mida vajadusel kasutada taustvärvidena.

Kääri see kõik kokku

Lõpetasime täieliku värviskeemi, mis võimaldab meil nüüd järgida juurdepääsetavuse juhiseid ja millel on palju võimalusi kõigi meie teksti- ja kasutajaliidese vajaduste jaoks.

Rullisime CSS-is uued värvid hoolikalt läbi ja oleme seniste tulemuste ja suurenenud loetavusega rahul.

Enne ja pärast

Protsessi käigus tehti palju katseid ja vigu, kuid tulemused võimaldavad meil luua kõigile kasutajatele nähtavama, loetavama ja juurdepääsetavama veebisaidi.

Millised näpunäited on teil oma veebisaidi värvipaleti loomisel? Milliste juurdepääsetavusega seotud projektide kallal olete töötanud? Jagage neid minuga allpool!

Täname, et lugesite! Külastage kindlasti saidi envoy.design ja tellige, et saada midagi uut teada avaldades. Või vaadake minu eelnevaid juhiseid: Kuidas esitada häid küsimusi ja oma kasutajauuringute oskusi tasandada