Bruke høy fargekontrast for mer tilgjengelig design

Webstandarder for fargekontrast

Fargekontrastforhold måler forskjellen i kontrast mellom to farger. Jo høyere verdien er, desto lettere er det å skille objektet (tekst, bilde, grafikk) i forgrunnen fra bakgrunnen.

Farger kan kontrast på mange forskjellige måter, for eksempel i hue, verdi og metning. Fargekontrastforhold beregnes med en formel gitt av W3C, den viktigste internasjonale standardorganisasjonen for World Wide Web.

Det kan ta en verdi mellom 1: 1 (ingen kontrast i det hele tatt, forgrunnen og bakgrunnen har samme farge) og 21: 1 (maksimal kontrast som bare eksisterer mellom svart og hvitt).

W3Cs nyeste retningslinjer for tilgjengelighet for webinnhold (WCAG) 2.0 gir webutviklere og innholdsskapere benchmarks for minimum (nivå AA) og den forbedrede (nivå AAA) verdien av akseptabelt fargekontrastforhold.

Nivå AA krever minst 4,5: 1-forhold for vanlig tekst, og 3: 1 for stor tekst. Det er mye lettere å lese stor tekst som teksting, derfor trenger den en lavere fargekontrast.

Hvis du vil nå nivå AAA som er det forbedrede nivået, må du utforme fargevalg med større forsiktighet, som det krever minst 7: 1 kontrastforhold for normal tekst, og 4,5: 1 for store. Hvis en tekst er en del av en logo eller et merkenavn, er det ikke noe fargekontrastbehov på enten WCAG-nivå.

Vi kan bare ringe et nettsted visuelt tilgjengelig hvis fargekontrastforhold mellom hvert forgrunnsobjekt og bakgrunnen sin når minst nivå AA.

Fordeler med høy fargekontrastforhold

Ved å sikre bedre lesbarhet engasjerer du ikke bare synskadede brukere, men også folk som leser innholdet ditt på små skjermer for eksempel på en smarttelefon eller en smartwatch, blant dårlige lysforhold, og på lavere kvalitetsmonitorer.

Folk leser også raskere når det er høyere kontrast mellom teksten og bakgrunnen, så det vil mest sannsynlig ta mer tid for dem å bli kjedelig med innholdet på nettstedet.

Hvis du er bekymret for at bruk av høyere kontrastforhold vil ha en negativ innvirkning på designenes estetikk, må du sjekke ut kontrastopprørings webprosjektet som viser at det med reelle eksempler som følger med reglene for høy kontrastforhold, fremdeles kan føre til i attraktive og kule design.

Apper for å sjekke fargekontrast

Det er mange flotte gratis verktøy over hele nettet som kan hjelpe designere å sjekke fargekontrastforholdet på nettstedet deres.

Den enkleste måten å teste design på for fargekontrast er å velge hovedfarger med enten Photoshop eller en egnet nettleserforlengelse som denne for Firefox, og kopier verdiene til en av appene under.

Det viktigste å huske er at du alltid trenger å sammenligne forgrunnsfargen som tekstfarge til omgivelsene (bakgrunnsfarge).

1. WebAim Color Contrast Checker

WebAim (Web Accessibility In Mind) er en organisasjon som fremmer webtilgjengelighet som gir utviklere en enkel, men pålitelig fargekontrastkontroll blant mange andre gode tilgjengelighetsverktøy som Wave, en generell tilgjengelighetsevalueringsapp som kan hjelpe deg Vurder raskt nettstedets tilgjengelighetsproblemer.

WebAims Color Contrast Checker forteller deg hvis fargene dine passerer WCAG AA og AAA tester, både for normale og store tekster.

2. Snook Color Contrast Check

Jonathan Snook, som for tiden jobber som ledende front-end-utvikler hos Shopify, har vært vært for sitt praktiske fargekontrast-kontrollverktøy i over et tiår. Snook's app lar deg endre HSL- og RGB-verdiene av forgrunnen og bakgrunnsfarge en etter en ved å bruke lett tilgjengelig glidebryter til du når et resultat som er i samsvar med WCAG 2.0-referansene.

CheckMyColours

CheckMyColours opprettet av Giovanni Scala lar deg sjekke fargekontrastforholdet for alle fargekombinasjoner i forgrunns bakgrunn på en levende nettside.

Det beregnes lysstyrke kontrastforhold, lysstyrke forskjell, og fargeforskjell, og gir deg en fullstendig rapport om resultatene. CheckMyColours 'rapport kan betydelig legge til rette for forståelsen av hvordan du kan forbedre den visuelle tilgjengeligheten til nettstedet ditt.

Fargeskjema Designer

Color Scheme Designer er ikke spesielt en fargekontrastkontroll, men et verktøy for designe komplette fargeskjemaer.

Vi inkludere den i denne samlingen, fordi den har en funksjon som lar deg se hvordan fargen din oppfattes av personer med ulike typer synshemming. Du kan teste dine farger for fullfargeblindhet, protanopi, deuteranopi og mange andre synshemming. Appen har en nyere versjon kalt Paletton som gjør det mulig med en mer sofistikert visjonssimulering (du kan også teste for ting som elendig LED-skjerm eller svak CRT-skjerm).

W3C gir deg også en stor liste over verktøy for tilgjengelighet for webtilgjengelighet, hvor du kan finne mange andre fargekontrastverktøy, for eksempel dette hjelpsomme tilgjengelighetsfargehjulet.

Tips for å lage visuelt tilgjengelige nettsteder

Hvis du vil opprette et visuelt tilgjengelig nettsted, er det alltid en god idé å unngå å bruke farge alene for å formidle funksjonalitet eller mening. Ikoner som bytter farge basert på deres nåværende tilstand, er typiske eksempler på dette.

Hvis det er mulig, alltid designe ekstra visuelle signaler som hjelper folk som ser farger annerledes når man forstår funksjonalitet.

Glem aldri å Vær ekstra oppmerksom på fargekontrast av knapper, lenker og menyer, som de er måten å navigere på nettstedet ditt. Hvis brukerne ikke kan navigere lett på nettstedet ditt, vil du raskt miste dem. Tilgjengelige farger for Call-to-Action-knapper er også avgjørende for gode konverteringsfrekvenser.

Det er en god arbeidsflytøvelse for å teste fargekontrastforhold så tidlig som mulig i designprosessen, da det vil være vanskelig å overtale klienten til å endre fargeskjemaet til nettstedet senere på ned designprosessen.

Nå Les: Praktisk tilnærming til å velge nettsidefargeskjema