Korištenje kontrasta visoke boje za pristupačniji dizajn
Visoka stopa posjeta jednoj stranici često je uzrokovana lošom vizualnom dostupnošću web-lokacije. Kada su fontovi premali ili su jedva čitljivi, ako ima previše smetnji ili premalo razmaka, mnogi ljudi napustite web-lokaciju bez ikakve druge misli.
Jedan od najčešćih razloga za rano napuštanje je slabo odabran sheme boja koje smanjuju čitljivost sadržaja.
Prema statistici WHO-a, oko 285 milijuna osoba s oštećenjem vida diljem svijeta, od kojih su mnogi djelomično ili potpuno slijepi. Osobe s vizualnim teškoćama različito gledaju boje, tako da izbjegavanje niskog kontrasta boja u našim nacrtima je neizbježan ako želimo našim klijentima pružiti pristupačnu i user-friendly web stranicu.
Web standardi za kontrast boja
Omjer kontrasta boje mjeri razliku u kontrastu između dvije boje. Što je veća vrijednost, lakše je razlikovati objekt (tekst, sliku, grafiku) u prvom planu od pozadine.
Boje se mogu razlikovati na mnogo različitih načina, primjerice u nijansa, vrijednost i zasićenje. Omjer kontrasta boja izračunava se pomoću formule koju je osigurala W3C, glavna međunarodna organizacija za standarde za World Wide Web.
Može imati vrijednost između 1: 1 (uopće nema kontrasta, prednji plan i pozadina imaju istu boju) i 21: 1 (maksimalni kontrast koji postoji samo između crne i bijele boje).
Najnovije smjernice za pristupačnost web-sadržaja tvrtke W3C (WCAG) 2.0 web-razvojnim programerima i tvorcima sadržaja pružaju mjerila za minimalnu razinu (razina AA) i poboljšanu (razina AAA) vrijednost prihvatljivog omjera kontrasta boja.
Razina AA zahtijeva najmanje Omjer 4,5: 1 za obični tekst, i 3: 1 za veliki tekst. Mnogo je lakše čitati velike tekstualne sadržaje kao što su titlovi, zato je potreban niži kontrast boja.
Ako želite doseći razinu AAA koja je poboljšana razina, trebate dizajnirati shemu boja s većom pažnjom, jer to zahtijeva barem Omjer kontrasta 7: 1 za normalan tekst, i 4,5: 1 za velike. Ako je tekst dio logotipa ili robne marke, nema zahtjeva za minimalnim kontrastom boja na bilo kojoj WCAG razini.
Možemo nazvati web-lokaciju samo vizualno dostupnom ako Omjer kontrasta boja između svakog objekta u prvom planu i njegove pozadine dostiže barem razinu AA.
Prednosti visokog kontrasta u boji
Osiguravanjem bolje čitljivosti ne angažirate samo korisnike s oštećenjem vida, već i ljudi koji čitaju vaš sadržaj na malim zaslonima kao na pametnom telefonu ili pametnom satu loši svjetlosni uvjeti, i na monitore niže kvalitete.
Ljudi i brže čitaju kada postoji veći kontrast između teksta i pozadine, pa će im vjerojatno trebati više vremena da im dosadi sadržaj web-lokacije.
Ako brinete da će primjena višeg kontrastnog omjera negativno utjecati na estetiku vašeg dizajna, trebate provjeriti web projekt Contrast Rebellion koji dokazuje, uz primjere iz stvarnog života, da se pridržavanje pravila visokog kontrasta još uvijek može postići u atraktivnim i cool dizajnu.
Aplikacije za provjeru kontrasta u boji
Postoji mnogo izvrsnih besplatnih alata na cijelom webu koji mogu pomoći dizajnerima da provjere omjer kontrasta boja na svojoj web lokaciji.
Najlakši način testiranja dizajna za kontrast boja je odabir glavnih boja s Photoshopom ili odgovarajućim proširenjem preglednika kao što je ovaj za Firefox i kopiranje vrijednosti u jednu od aplikacija u nastavku.
Najvažnije je zapamtiti da uvijek trebate usporedite boju prednjeg plana kao što je boja teksta s okolnim područjem (boja pozadine).
1. Provjera kontrasta boje WebAim
WebAim (Web Accessibility In Mind) je organizacija koja promiče web pristupačnost koja nudi programerima jednostavan ali pouzdan kontrolor kontrasta boja među mnogim drugim alatima za pristupačnost kao što su Wave, aplikacija za procjenu pristupačnosti koja vam može pomoći brzo procijenite probleme dostupnosti svoje web-lokacije.
WebAim vam provjerava kontrast boja ako boje prelaze WCAG AA i AAA testove, i za normalne i za velike tekstove.
2. Provjerite Kontrolu kontrasta boje
Jonathan Snook, koji trenutno radi kao vodeći razvojni programer u Shopifyu, već više od deset godina ugrađuje svoj zgodan alat za provjeru kontrasta boja. Snook-ova aplikacija vam omogućuje promijeniti vrijednosti HSL i RGB jedan po jedan u prvom planu i boji pozadine praktični klizači raspona dok ne postignete rezultat koji je u skladu s referentnim vrijednostima usluge WCAG 2.0.
CheckMyColours
CheckMyColours koju je stvorio Giovanni Scala omogućuje vam da provjerite omjer kontrasta boja svih kombinacija boja u pozadini i pozadini. na web-lokaciji uživo.
Ona izračunava omjer kontrasta svjetline, razlika svjetline, i razlika boja, i daje vam cjelovito izvješće o rezultatima. Izvješće tvrtke CheckMyColours može značajno olakšati razumijevanje načina na koji možete poboljšati vizualnu dostupnost svoje web-lokacije.
Dizajner sheme boja
Color Scheme Designer nije posebno provjeru kontrasta boja, već alat za osmišljavanje cjelovitih shema boja.
Uključujemo ga u ovu zbirku, jer ima značajku koja vam omogućuje da vidite kako vašu shemu boja percipiraju osobe s različitim vrstama oštećenja vida. Možete testirati svoje boje za sljepoću u punoj boji, protanopiju, deuteranopiju i mnoge druge oštećenja vida. Aplikacija ima noviju verziju pod nazivom Paletton koja omogućuje čak i sofisticiraniju vizualnu simulaciju (možete testirati i za stvari poput lošeg LED zaslona ili slabog CRT zaslona).
W3C vam također nudi ogroman popis alata za procjenu pristupačnosti web-mjesta na kojem možete pronaći mnoge druge alate za kontrast boja, kao što je ovaj korisni kotačić za pristupačnost boja.
Savjeti za izradu vizualno pristupačnih web stranica
Ako želite stvoriti vizualno pristupačnu web-lokaciju, uvijek je dobro izbjegavajte uporabu boja samo da biste prenijeli funkcionalnost ili značenje. Ikone koje mijenjaju boju na temelju trenutnog stanja su tipični primjeri za to.
Ako je moguće, uvijek dizajnirajte dodatne vizualne znakove koji pomažu ljudima koji različite boje vide u razumijevanju funkcionalnosti.
Nikad nemoj zaboraviti posebnu pažnju posvetite kontrastu boja gumba, veza i izbornika, jer su to sredstva navigacije na vašoj web-lokaciji. Ako se korisnici ne mogu lako kretati na vašoj web-lokaciji, brzo ćete ih izgubiti. Dostupne boje za gumbe poziva na radnju su također presudna za dobre stope pretvorbe.
Dobra praksa rada je testirati omjer kontrasta boja što je prije moguće u procesu dizajna jer će biti teško uvjeriti klijenta da promijeni shemu boja web-lokacije kasnije u procesu dizajna.
Sada pročitajte: Praktični pristup odabiru sheme boja web-mjesta
