Fargekontrast og WCAG: hva er kravet, og hvordan måler du det?

Kort svar: WCAG nivå AA krever et kontrastforhold på minst 4,5:1 mellom tekst og bakgrunn for vanlig tekst, og 3:1 for stor tekst og grafiske elementer (ikoner, kanter på skjemafelt). For lav kontrast er den klart vanligste tilgjengelighetsfeilen i nettbutikker, og heldigvis kan den ofte løses for hele temaet i én omgang. Den kan dessuten måles 100% presist med programvare, så her er det ingenting å diskutere.

Hvorfor er kontrast så viktig?

Lysegrå tekst på hvit bakgrunn ser stilrent ut på skjermen din, men er vanskelig å lese for svaksynte, for eldre besøkende og for alle som ser på en telefon i sterkt sollys. En stor del av kundene dine havner i minst én av de gruppene. Dårlig kontrast koster deg altså bokstavelig talt lesbarhet, og dermed salg.

Hva er de nøyaktige WCAG-kontrastkravene?

Standarden skiller mellom tekststørrelse og elementtype. Jo mindre bokstavene er, desto skarpere må kontrasten være:

• Vanlig tekst (mindre enn 24px, eller 18,66px i fet): minst 4,5:1.
• Stor tekst (fra 24px, eller 18,66px i fet, altså 18pt / 14pt bold): minst 3:1.
• Grafiske komponenter (ikoner, kanter på skjemafelt, rammer på aktive knapper): minst 3:1 i forhold til de tilgrensende fargene (WCAG 1.4.11).

Kontrast uttrykkes som et forhold: 1:1 er ingen kontrast, 21:1 er rent svart på hvitt. Noen vanlige kombinasjoner:

Hvordan måler du kontrasten selv?

Du trenger verken å gjette eller å regne med formler selv. Det finnes tre pålitelige metoder:

1. En automatisert skanning (anbefalt). Verktøy som Seviranta beregner kontrastverdien for hvert tekstelement på siden i én omgang og markerer den nøyaktige kodelinjen hos synderne, inkludert målt verdi ved siden av kravet.
2. Utviklerverktøyene i nettleseren din. Høyreklikk på tekst i Chrome eller Edge → "Inspiser"; fargevelgeren viser ofte kontrastforholdet og WCAG-statusen direkte.
3. En manuell kontrastsjekker. Skriv inn de to hex-kodene, og du får forholdet. Praktisk i designfasen, men tidkrevende for et helt live nettsted.

Hvordan retter du kontrastfeil effektivt?

Det fine med kontrastfeil: de styres nesten alltid sentralt. I Shopify, WooCommerce eller Magento er fargene koblet til globale variabler i temaet ditt. Gjør tekst- eller bakgrunnsfargen en nyanse mørkere eller lysere til forholdet stemmer, så oppfyller du kontrastkravet for hele nettbutikken på én gang.

Begynn med konverteringstrakten din: teksten på "Legg i handlekurv"- og "Til kassen"-knappene, prisetikettene, menypunktene og advarslene i kassen. Der ligger den største gevinsten. Dette er forresten en av de 10 vanligste tilgjengelighetsfeilene.

Hvorfor løser ikke en tilgjengelighets-widget dette?

Mange bedriftseiere håper å fikse kontrasten med en overlay-widget og dens "høykontrast-knapp". Det er både teknisk og juridisk utilstrekkelig: tilsynsmyndigheter og AI-skrapere kontrollerer standardtilstanden i kildekoden din. Oppfyller ikke CSS-en din 4,5:1, så oppfyller du ikke kravet, et midlertidig JavaScript-lag endrer ikke på det. Hvorfor en overlay-widget ikke beskytter deg går i dybden på dette. Den eneste holdbare veien er å justere fargene i ditt eget tema.

Hva endrer seg med WCAG 3.0 (APCA)?

I de kommende WCAG 3.0-retningslinjene kan dagens matematiske kontrastformel bli avløst av APCA (Advanced Perceptual Contrast Algorithm), som for øyeblikket vurderes som kandidat; det er ennå ikke besluttet. APCA stemmer bedre overens med hvordan det menneskelige øyet faktisk oppfatter kontrast, den tar hensyn til skrifttype, tykkelse og kontekst i stedet for bare lysstyrken til to farger. Setter du nettstedet ditt solid opp etter 4,5:1-kravet i WCAG 2.1/2.2 nå, står du også godt rustet for den overgangen.

Se hvor nettstedet ditt står

Nysgjerrig på hvilke farger på nettstedet ditt som ennå ikke oppfyller kravene? Skann én side gratis. Du ser det målte kontrastforholdet ved siden av kravet for hvert enkelt sted, med de ekte fargene fra nettstedet ditt, på under 60 sekunder, uten konto. Skann nettstedet ditt gratis.