Farvekontrast og WCAG: hvad er kravet, og hvordan måler du det?

Kort svar. WCAG niveau AA kræver et kontrastforhold på mindst 4,5:1 mellem tekst og baggrund for almindelig tekst, og 3:1 for stor tekst og grafiske elementer (ikoner, kanter på inputfelter). For lav kontrast er langt den mest almindelige tilgængelighedsfejl i webshops — og heldigvis ofte til at løse i hele temaet på én gang. Den kan oven i købet måles 100% præcist med software, så der er ikke noget at diskutere.

Hvorfor er kontrast så vigtigt?

Lysegrå tekst på hvid baggrund ser stilrent ud på din skærm, men er svær at læse for svagsynede, for ældre besøgende og for alle, der kigger på en telefon i skarpt sollys. En stor del af dine kunder falder i mindst én af de grupper. Dårlig kontrast koster dig altså bogstaveligt talt læsbarhed — og dermed salg.

Hvad er de præcise WCAG-kontrastkrav?

Standarden skelner efter tekststørrelse og elementtype. Jo mindre bogstaverne er, desto skarpere skal kontrasten være:

• Almindelig tekst (mindre end 24px, eller 18,66px i fed): mindst 4,5:1.
• Stor tekst (fra 24px, eller 18,66px i fed — altså 18pt / 14pt bold): mindst 3:1.
• Grafiske komponenter (ikoner, kanter på inputfelter, aktive knaprammer): mindst 3:1 i forhold til de tilstødende farver (WCAG 1.4.11).

Kontrast udtrykkes som et forhold: 1:1 er ingen kontrast, 21:1 er rent sort på hvidt. Et par hyppige kombinationer:

Hvordan måler du selv kontrasten?

Du behøver hverken at gætte eller selv regne med formler. Der er tre pålidelige metoder:

1. En automatiseret scanning (anbefalet). Værktøjer som Seviranta beregner kontrastværdien for hvert tekstelement på siden i én omgang og markerer den præcise kodelinje for synderne — inklusive den målte værdi ved siden af kravet.
2. Din browsers udviklerværktøjer. Højreklik i Chrome eller Edge på tekst → "Inspicér"; farvevælgeren viser ofte direkte kontrastforholdet og WCAG-statussen.
3. En manuel kontrast-tjekker. Indtast de to hex-koder, og du får forholdet. Praktisk i designfasen, men tidskrævende for et helt live site.

Hvordan retter du kontrastfejl effektivt?

Det smukke ved kontrastfejl: de styres næsten altid centralt. I Shopify, WooCommerce eller Magento er farverne koblet til globale variabler i dit tema. Gør tekst- eller baggrundsfarven en nuance mørkere eller lysere, indtil forholdet passer, og du overholder kontrastkravet i hele din webshop på én gang.

Begynd med din konverteringstragt: teksten på "Læg i kurv"- og "Til kassen"-knapperne, dine prislabels, menupunkter og advarslerne ved checkout. Dér ligger den største gevinst. Det er i øvrigt en af de 10 mest almindelige tilgængelighedsfejl.

Hvorfor løser en tilgængeligheds-widget ikke det her?

Mange virksomhedsejere håber at fikse kontrasten med en overlay-widget og dens "høj kontrast-knap". Det er både teknisk og juridisk utilstrækkeligt: tilsynsmyndigheder og AI-scrapere kontrollerer din kildekodes standardtilstand. Overholder din CSS ikke 4,5:1, overholder du ikke kravet — et midlertidigt JavaScript-lag ændrer ikke på det. Hvorfor en overlay-widget ikke beskytter dig går i dybden med det. Den eneste holdbare rute er at justere farverne i dit eget tema.

Hvad ændrer sig med WCAG 3.0 (APCA)?

I de kommende WCAG 3.0-retningslinjer bliver den nuværende matematiske kontrastformel erstattet af APCA (Advanced Perceptual Contrast Algorithm). APCA matcher bedre, hvordan det menneskelige øje reelt opfatter kontrast — den tager højde for skrifttype, tykkelse og kontekst i stedet for udelukkende to farvers lysstyrke. Sætter du din side skarpt op efter 4,5:1-kravet i WCAG 2.1/2.2 nu, står du også godt rustet til den overgang.

Se hvor din side står

Nysgerrig efter, hvilke farver på din side der endnu ikke overholder kravene? Scan én side gratis. Du ser for hvert sted det målte kontrastforhold ved siden af kravet, med din sides rigtige farver — på under 60 sekunder, uden konto.