Naudojant aukštą spalvų kontrastą prieinamesniam dizainui
Didelį atšokimo dažnį dažnai sukelia prasta vizualinė svetainės prieiga. Kai šriftai yra per maži arba jie sunkiai įskaitomi, kai yra per daug blaškymų ar nepakankamai erdvės, daugelis žmonių tiesiog palikti svetainę be antros minties.
Vienas iš dažniausių ankstyvo atsisakymo priežasčių yra prastai pasirinktas spalvų schemas, kurios sumažina skaitomumą turinio.
Pasak PSO statistikos, visame pasaulyje yra apie 285 milijonai regos negalią turinčių žmonių, iš kurių daugelis yra iš dalies arba visiškai spalvotas. Vaizdiniai neįgalieji mato skirtingas spalvas išvengti mažo spalvų kontrasto mūsų dizainuose yra neišvengiama, jei norime suteikti klientams prieinamą ir patogią svetainę.
Web standartai spalvų kontrastui
Spalvų kontrasto santykis matuoja skirtumą tarp dviejų spalvų. Kuo didesnė reikšmė, tuo lengviau atskirti objektą (tekstą, vaizdą, grafiką) priešakyje iš fono.
Spalvos gali kontrastuoti įvairiais būdais, pvz., atspalvis, vertė ir prisotinimas. Spalvų kontrasto santykis apskaičiuojamas pagal formulę, pateiktą W3C, pagrindinės tarptautinės standartų organizacijos pasaulyje.
Jis gali būti vertingas tarp 1: 1 (jokio kontrasto, pirmtakas ir fonas turi tą pačią spalvą) ir 21: 1 (maksimalų kontrastą tai yra tik tarp juodos ir baltos spalvos).
Paskutinės W3C žiniatinklio prieinamumo gairės (WCAG) 2.0 suteikia žiniatinklio kūrėjams ir turinio kūrėjams minimalaus (AA lygio) ir patobulinto (lygio AAA) priimtino spalvų kontrasto santykio etalonus.
AA lygis reikalauja bent jau 4.5: 1 santykis įprastiniam tekstui, ir 3: 1 dideliam tekstui. Tai daug lengviau skaityti didelį tekstą, pavyzdžiui, subtitrus, todėl jam reikia mažesnio spalvų kontrasto.
Jei norite pasiekti AAA lygį, kuris yra padidintas lygis, turite sukurti spalvų schemą labiau rūpestingai, kaip reikalaujama bent jau 7: 1 kontrasto santykis normaliam tekstui, ir 4,5: 1 dideliems. Jei tekstas yra logotipo ar prekės ženklo pavadinimo dalis, nereikia minimalaus spalvų kontrasto reikalavimo nei WCAG lygiu.
Mes galime skambinti tik svetainėje, jei ji yra spalvų kontrasto santykis tarp kiekvieno priekinio objekto ir jo fono pasiekia bent AA lygį.
Aukštos spalvos kontrasto santykio privalumai
Užtikrindami geresnį suprantamumą, ne tik dalyvauja silpnaregiai, bet ir kiti žmonės, kurie skaito jūsų turinį mažuose ekranuose pvz., išmaniajame telefone ar smartwatch blogos apšvietimo sąlygos, ir toliau žemesnės kokybės monitoriai.
Žmonės taip pat skaito greičiau, kai yra didesnis kontrastas tarp teksto ir fono, todėl greičiausiai užtruks daugiau laiko, kol jie nuobodu svetainės turiniu.
Jei nerimaujate, kad didesnio kontrasto santykio taikymas turės neigiamos įtakos jūsų dizaino estetikai, reikia patikrinti „Contrast Rebellion“ interneto projektą, kuris, realaus gyvenimo pavyzdžiais, įrodo, kad vis dar gali būti laikomasi aukšto kontrasto santykio taisyklių patrauklių ir vėsių dizainų.
Spalvų kontrasto tikrinimo programos
Visame žiniatinklyje yra daug puikių nemokamų įrankių, kurie gali padėti dizaineriams patikrinti savo svetainės spalvų kontrasto santykį.
Paprasčiausias būdas patikrinti savo spalvų kontrasto dizainą yra pasirinkti pagrindines „Photoshop“ arba tinkamo naršyklės plėtinio spalvas, pvz., „Firefox“, ir kopijuoti vertes į vieną iš toliau pateiktų programų.
Svarbiausia prisiminti, kad jums visada reikia palyginkite priekinio plano spalvą, pvz., teksto spalvą, į jos apylinkes (fono spalva).
1. „WebAim“ spalvų kontrasto tikrintuvas
„WebAim“ („Web Accessibility In Mind“) yra organizacija, skatinanti žiniatinklio prieinamumą, kuri suteikia kūrėjams paprastą, bet patikimą spalvų kontrasto tikrintuvą tarp daugelio kitų puikių prieinamumo įrankių, tokių kaip „Wave“, kuri yra bendra prieinamumo vertinimo programa, kuri gali jums padėti greitai įvertinti svetainės prieinamumo problemas.
„WebAim“ spalvų kontrasto tikrintuvas pasakoja jei jūsų spalvos atitinka WCAG AA ir AAA testus, tiek įprastiems, tiek dideliems tekstams.
2. „Snook“ spalvų kontrasto patikrinimas
„Jonathan Snook“, šiuo metu dirbantis „Shopify“ pirmaujančiu „front-end“ kūrėju, jau daugiau nei dešimtmetį tvarko savo patogų spalvų kontrasto patikrinimo įrankį. Snook programa leidžia jums pakeisti HSL ir RGB reikšmes naudodami patogūs diapazonai kol pasieksite rezultatą, atitinkantį WCAG 2.0 etalonus.
„CheckMyColours“
„Giovanni Scala“ sukurtas „CheckMyColours“ leidžia jums patikrinti visų spalvų kombinacijų spalvų kontrastą svetainėje.
Jis apskaičiuoja šviesumo kontrasto santykis, ryškumo skirtumas, ir spalvų skirtumas, ir pateikia jums išsamią ataskaitą apie rezultatus. „CheckMyColours“ ataskaita gali labai palengvinti jūsų supratimą apie tai, kaip galite pagerinti savo svetainės vaizdinį pasiekiamumą.
Spalvų schemos dizaineris
Spalvų schemos dizaineris nėra ypač spalvų kontrasto tikrintuvas, bet įrankis kurti pilnas spalvų schemas.
Įtraukiame jį į šią kolekciją, nes ji turi funkciją, leidžiančią jums pamatyti, kaip jūsų spalvų schemą suvokia žmonės, turintys skirtingų tipų regėjimo negalią. Jūs galite išbandyti savo spalvas visiškam aklumui, protanopijai, deuteranopijai ir daugeliui kitų regėjimo sutrikimų. Programa turi naujesnę versiją, pavadintą „Paletton“, kuri leidžia atlikti dar sudėtingesnę vizualizavimo viziją (taip pat galite išbandyti tokius dalykus kaip bjaurus LED ekranas arba silpnas CRT ekranas).
„W3C“ taip pat suteikia jums didžiulį interneto prieinamumo įvertinimo įrankių sąrašą, kuriame galite rasti daug kitų spalvų kontrasto įrankių, tokių kaip šis naudingas prieinamumo spalvų ratas.
Patarimai, kaip sukurti vizualiai prieinamas svetaines
Jei norite sukurti vizualiai prieinamą svetainę, tai visada gera idėja venkite vien tik spalvos, kad perduotumėte funkcionalumą ar prasmę. Jų tipiški pavyzdžiai yra piktogramos, kurios keičia jų spalvą pagal jų dabartinę būseną.
Jei tai įmanoma, visada suprojektuoti papildomus vaizdinius ženklus kurie padeda žmonėms, kurie mato skirtingas spalvas, suprasti funkcionalumą.
Niekada nepamirškite atkreipkite ypatingą dėmesį į mygtukų, nuorodų ir meniu spalvų kontrastą, kadangi jie yra jūsų svetainės navigacijos priemonės. Jei naudotojai negali lengvai naršyti jūsų svetainėje, greitai juos neteksite. Prieiga prie veiksmų mygtukų prieinamos spalvos taip pat yra labai svarbūs siekiant užtikrinti gerus perskaičiavimo kursus.
Tai gera darbo eigos praktika bandant spalvų kontrastą kuo greičiau projektavimo procese, nes bus sunku įtikinti savo klientą pakeisti svetainės spalvų schemą vėliau projektavimo proceso metu..
Dabar perskaitykite: Praktinis požiūris į svetainės spalvų schemos pasirinkimą
