Quick Tips: Finn og fiks lav-kontrast tekst med Chrome DevTools

Finn og fiks lav-kontrast tekst med Chrome DevTools

Et av de vanligste problemene med universell utforming på nettsider vi ser er kontrast. Når det ikke er nok kontrast mellom tekst og bakgrunnsfarge, kan personer med visse visuelle problemer ha utfordringer med å lese teksten. Så her er et raskt tips til deg som jobber med utforming av nettsider. 

Hva er Universell utforming?

Universell utforming bidrar til sosial bærekraft og inkludering og handler om å bidra til at dine omgivelser, produkter og tjenester kan brukes av alle, selv de med nedsatt funksjonsevne (for eksempel blinde eller døve personer). Et eksempel på universell utforming kan være en video som er tekstet. Fra 1. juli 2014 ble det et lovkrav om at alle nye nettsider/tjenester skal følge WCAG 2.0 standarden som minimum.

Her kan du se en oversikt over tiltak som anbefales for universell utforming.

Et av disse tiltakene er god kontrast. Så hvordan sikrer du at nettsiden din har god kontrast på tekst, linker, knapper? I 2021 har det kommet flere nye funksjoner til Chrome sin Devtools, blant annet dette med sjekk av kontrast. Vi som jobber med SEO, utvikler eller designer nettsider er godt kjent med nettleserens DevTools (utviklerverktøy), og det er en av de viktigste verktøyene vi har når vi skal lage nettsider.

Er du ikke kjent med det, men ønsker å utforske mulighetene? Trykk på F12 i Chrome. Her har man mange forskjellige muligheter til å feilsøke, undersøke og se under panseret på nettsiden.  

Prosessen

Inspiser så den nettsiden du ønsker å sjekke kontrasten til, har du ikke har fanen fra før, så må du skru på "Css overview" på innstillinger, følg så følgende guide: 

Trykk på tannhjulet til høyre: 

Trykk på tannhjulet til høyre på DevTools I chrome

Trykk på experiments

Trykk på "Experiments"

Huk av og velg "Css Overview" og "Enable automatic contrast issue reporting via the issues panel:

Huk av og velg CSS overview

Trykk så på X-en i høyre hjørne:

Trykk på X for å komme tilbake

Du vil da se en ny fane som heter CSS Overview

En ny fane viser Css Overview

Der får man mulighet til å generere en rapport over den siden man er på, hvor man blant annet.Der vil man blant annet få en oversikt over alle fonter og farger man har brukt på nettsiden.

Oversikt over farger, fonter mediaqueries etc

Som man ser her, så har man oversikt over veldig mye. Man får en veldig fin oversikt over ting som fonter, farger, størrelse på typografi, media querys og ubrukt css. Det vil si at man får en veldig bra rapport bygd inn i nettleseren.

I denne rapporten vil det også være feilmeldinger på kontraster og andre ting som strider mot universell utforming. Den ser kun på den siden man er på, så denne rapporten bør man ta på alle sider / maler man lager.

Her har jeg laget en side med to knapper, og en lilla bakgrunn for å vise:
Demo på side som viser knapper med forskjellig kontrast

Denne skal vi nå undersøke i css overview. Dette er en veldig liten side, med kun disse to knappene.
Rapporten gir meg da, kanskje ikke overraskende feilmelding på den knappen som har lime bakgrunn og rosa tekst:

Etter å laget en rapport så får jeg følgende feilmelding under colors/farger: 

Error på Kontrasten på teksten på knappen

Trykker man på ( i dette tilfellet ) text, så får man opp en dialog nederst på skjermen: 

Informasjon som viser hvilken tekst som det er feil på, og som leder til riktig klasse

Ved å trykke på #text kommer man inn på "Elements" i DevTools, og direkte på elementet som det er meldt feil på.

Ved å trykke på farge-boksen ( I dette tilfellet "Hotpink" ), får man opp følgende dialogboks: 

Dialogboks som viser hvilke farge man bør velge for å oppnå riktig kontrast

Dialogboks som viser hvilke farge man bør velge for å oppnå riktig kontrast med riktig farge valgt

Her har man to grafer, ved å velge en farge under disse to grafene, så sikrer man seg at man har god kontrast på teksten, både innen AA standaren og AAA standaren. Les om nivåene her (engelsk tekst). 

Veien videre - Løs problemet

Chrome Devtools gjør ingen faktiske endringer på designet på nettsiden, derfor må man gjøre endringer i designmalene til nettsiden. Har man selv ikke tilgang eller nok kunnskap til dette så kan man gi denne fargekoden ( i dette tilfellet #843a5f ) til en som kan utføre dette, en utvikler eller en designer kan gjøre disse endringene. Så det er viktig å ha disse med i prosessen. 

Det kan også være litt vanskelig med tanke på retningslinjer på designprofil / designmanual. Noen merkevarer har strenge regler / retningslinjer på farger i profilen sin, så kanskje man må ta dette med de som har ansvar for firmaets profil slik at man kan finne en farge som har god kontrast og står i stil med merkevarens profil.
Det er uansett et viktig argument for å gjøre en endring. 


Står du fast og ønsker du å bli tilgjengelig for alle dine kunder?

Book et møte med meg

Jørgen Andreassen blog-avatar

Jørgen Andreassen

Jørgen jobber som Senior Designer i Dikom og har over 15 år variert erfaring med design og digital markedsføring og har jobbet i flere store digitale byråer som Kreatif, Sempro og Markedspartner.