Uporaba kontrasta visoke barve za bolj dostopno obliko

Spletni standardi za barvni kontrast

Razmerje barvnega kontrasta meri razliko v kontrastu med dvema barvama. Višja kot je vrednost, lažje je razlikovati predmet (besedilo, sliko, grafiko) v ospredju od ozadja.

Barve se lahko razlikujejo na različne načine, na primer v odtenek, vrednost in nasičenost. Razmerje kontrasta barv se izračuna po formuli, ki jo zagotavlja W3C, glavna mednarodna organizacija za standarde za svetovni splet.

Lahko zavzame vrednost med 1: 1 (nobenega kontrasta, ospredje in ozadje sta enake barve) in 21: 1 (največji kontrast ki obstaja samo med črno-belo).

Najnovejše smernice za dostopnost spletnih vsebin W3C (WCAG) 2.0 spletnim razvijalcem in ustvarjalcem vsebine zagotavljajo merila za najnižjo (Level AA) in izboljšano (Level AAA) vrednost sprejemljivega razmerja barvnega kontrasta.

Raven AA zahteva vsaj 4.5: 1 razmerje za običajno besedilo, in 3: 1 za veliko besedilo. Veliko lažje je brati velike podnapise kot besedilo, zato potrebuje nižji barvni kontrast.

Če želite doseči raven AAA, ki je izboljšana raven, morate svojo barvno shemo oblikovati bolj skrbno, saj zahteva vsaj 7: 1 kontrastno razmerje za normalno besedilo, in 4,5: 1 za velike. Če je besedilo del logotipa ali blagovne znamke, na obeh nivojih WCAG ni zahteve po minimalnem barvnem kontrastu.

Spletno mesto lahko pokličemo le vizualno, če je razmerje barvnega kontrasta med vsakim predmetom v ospredju in njegovim ozadjem doseže vsaj raven AA.

Prednosti kontrastnega razmerja visoke barve

Z zagotavljanjem boljše berljivosti ne sodelujete le z uporabniki z okvarami vida, temveč tudi ljudi, ki berejo vašo vsebino na majhnih zaslonih med drugim na pametnem telefonu ali pametni uri slabe svetlobne razmere, in naprej monitorje nižje kakovosti.

Ljudje prav tako berejo hitreje, ko obstaja večji kontrast med besedilom in ozadjem, tako da jim bo najverjetneje potrebno več časa, da se jim zdi, da se mu zdi, da je vsebina spletnega mesta dolgočasna..

Če vas skrbi, da bo uporaba višjega kontrastnega razmerja negativno vplivala na estetiko vašega oblikovanja, morate preveriti spletni projekt Contrast Rebellion, ki s primeri iz resničnega življenja dokazuje, da se lahko držanje pravil visokega kontrastnega razmerja še vedno doseže v privlačnih in kul oblikah.

Aplikacije za preverjanje kontrasta barv

Obstaja veliko veliko brezplačnih orodij po vsem spletu, ki lahko pomagajo oblikovalcem preveriti razmerje barvnega kontrasta njihove spletne strani.

Najpreprostejši način preizkušanja zasnove za barvni kontrast je izbiranje glavnih barv s Photoshopom ali ustrezno razširitvijo brskalnika, kot je ta za Firefox, in kopiranje vrednosti v eno od aplikacij spodaj.

Najpomembnejša stvar, ki si jo morate zapomniti, je, da morate vedno primerjajte barvo ospredja, kot je barva besedila, z okolico (barva ozadja).

1. WebAim kontrolnik barvnega kontrasta

WebAim (spletna dostopnost v mislih) je organizacija, ki spodbuja spletno dostopnost, ki razvijalcem ponuja preprosto, a zanesljivo preverjanje barvnega kontrasta med številnimi drugimi odličnimi orodji za dostopnost, kot je Wave, splošna aplikacija za ocenjevanje dostopnosti, ki vam lahko pomaga hitro ocenite vprašanja dostopnosti spletnega mesta.

Program za preverjanje kontrasta barve WebAim vam pove če vaše barve preidejo teste WCAG AA in AAA, tako za običajna kot za velika besedila.

2. Preverite preverjanje kontrasta barve

Jonathan Snook, ki trenutno dela kot vodilni razvijalec v podjetju Shopify, že več kot desetletje gosti priročno orodje za preverjanje barvnega kontrasta. Aplikacija Snook vam omogoča spremenite vrednosti HSL in RGB osvetlitve in barve ozadja enega za drugim z uporabo priročni drsniki za območje dokler ne dosežete rezultata, ki je skladen z referenčnimi vrednostmi WCAG 2.0.

CheckMyColours

CheckMyColours, ki ga je ustvaril Giovanni Scala, vam omogoča, da preverite razmerje barvnega kontrasta vseh barvnih kombinacij ospredja in ozadja na spletnem mestu v živo.

Izračuna kontrastno razmerje svetilnosti, razlika svetlosti, in barvna razlika, in vam pošlje celotno poročilo o rezultatih. Poročilo CheckMyColours lahko bistveno olajša razumevanje, kako lahko izboljšate vizualno dostopnost vašega spletnega mesta.

Oblikovalec barvne sheme

Color Scheme Designer ni posebej pregledovalnik barvnega kontrasta, ampak orodje za oblikovanje celostnih barvnih shem.

Vključujemo jo v to zbirko, ker ima funkcijo, ki vam omogoča, da vidite, kako vašo barvno shemo zaznavajo ljudje z različnimi vrstami motenj vida. Barve lahko preizkusite za popolno barvno slepoto, protanopijo, deuteranopijo in mnoge druge motnje vida. Aplikacija ima novejšo različico, imenovano Paletton, ki omogoča še bolj prefinjeno vizualno simulacijo (lahko preizkusite tudi za stvari, kot so slab zaslon LED ali šibek zaslon CRT)..

W3C vam ponuja tudi ogromen seznam orodij za ocenjevanje spletne dostopnosti, kjer lahko najdete številna druga orodja za barvno kontrast, kot je to koristno kolo za dostopnost..

Nasveti za ustvarjanje vizualno dostopnih spletnih strani

Če želite ustvariti vizualno dostopno spletno mesto, je to vedno dobra ideja izogibajte se uporabi barve samo za prenos funkcionalnosti ali pomena. Ikone, ki spreminjajo barvo glede na njihovo trenutno stanje, so tipični primeri za to.

Če je mogoče, vedno oblikovati dodatne vizualne napotke ki pomagajo ljudem, ki vidijo barve drugače pri razumevanju funkcionalnosti.

Nikoli ne pozabi posebno pozornost posvetite barvnemu kontrastu gumbov, povezav in menijev, kot so sredstva za navigacijo na vašem spletnem mestu. Če uporabniki ne morejo preprosto brskati po vašem spletnem mestu, jih boste hitro izgubili. Dostopne barve za gumbe za poziv k dejanjem so tudi pomembne za dobre menjalne tečaje.

Dobra praksa poteka dela je, da čim hitreje preizkusite razmerje barvnega kontrasta v procesu oblikovanja, saj bo težko prepričati stranko, da bo kasneje spremenil barvno shemo mesta..

Sedaj preberite: Praktični pristop k izbiri sheme barv na spletni strani