Fargekontrast og tilgjengelighet: WCAG-krav, sjekker og løsninger

Lysegrå tekst på hvit bakgrunn ser ren og elegant ut i en designfil. På en mobil i sterkt sollys, eller for en som er svaksynt, er den tung å lese. Det er også den vanligste tilgjengelighetsfeilen som finnes: WebAIM Million 2026 (åpnes i en ny fane) fant tekst med lav kontrast på 83,9 % av forsidene til de én million største nettstedene, med i snitt 34 forekomster per side.

Det gode er at kontrast kan måles, at tersklene er klare og at løsningene stort sett er billige. Denne guiden gir deg tallene, de gratis verktøyene og en måte å rette profilfarger på uten å begynne på nytt.

Hva er et kontrastforhold?

Et kontrastforhold er et tall som sammenligner den relative lysstyrken, eller luminansen, til to farger, som regel tekst og bakgrunn. WCAG regner det ut med en fast formel, og resultatet går fra 1:1 (ingen forskjell, hvitt på hvitt) til 21:1 (svart på hvitt). Jo høyere tall, desto lettere er fargene å skille fra hverandre.

Formelen er (L1 + 0,05) / (L2 + 0,05), der L1 er den relative luminansen til den lyseste fargen og L2 til den mørkeste. Du kommer aldri til å måtte regne det ut for hånd, men én detalj er viktig: bare luminansen teller, ikke fargetonen. Derfor kan rød tekst på grønn bakgrunn se sterk ut og likevel få dårlig score.

Den andre detaljen folk overser, er avrunding. W3Cs Understanding-dokument for 1.4.3 (åpnes i en ny fane) sier at utregnede verdier «ikke skal rundes av (for eksempel oppfyller ikke 4,499:1 terskelen på 4,5:1)». Grått #767676 på hvitt (4,54:1) består altså, mens #777777 på hvitt (4,48:1) stryker, selv om ingen kan se forskjell med det blotte øye.

Hvilket kontrastforhold krever WCAG?

På nivå AA, som de fleste lover og kontrakter viser til, trenger vanlig tekst minst 4,5:1 mot bakgrunnen og stor tekst 3:1 (suksesskriterium 1.4.3). Grensesnittkomponenter og grafikk som bærer mening, trenger 3:1 mot fargene ved siden av (1.4.11). Det strengere nivå AAA krever 7:1 for vanlig tekst og 4,5:1 for stor tekst (1.4.6).

Hvorfor 4,5:1? W3C forklarer at tallet «kompenserte for tapet av kontrastfølsomhet som brukere med synstap tilsvarende omtrent 20/40-syn vanligvis opplever». Med andre ord er det satt for personer med moderat nedsatt syn, blant dem mange eldre kunder som aldri ville kalt seg funksjonshemmet.

Noe tekst er unntatt: logoer og merkenavn, rent dekorativ tekst, tekst som ikke er synlig for noen, tekst i et bilde med betydelig annet visuelt innhold, og tekst i inaktive (deaktiverte) kontroller. Logoen din kan bli som den er. Et avsnitt satt i logoens blekeste farge kan ikke det.

Hva regnes som stor tekst?

Stor tekst i WCAG betyr minst 18 punkter, eller minst 14 punkter hvis teksten er fet. W3C regner det om til omtrent 24 CSS-piksler og 18,5 piksler fet. Alt som er mindre, trenger hele 4,5:1. Brødtekst, bildetekster, etiketter på skjemafelt, priser og lenker i bunnteksten er nesten aldri stor tekst, så de trenger det høyere forholdstallet.

Slik slår det ut i praksis. Grått #949494 på hvitt gir 3,03:1. Det holder for en overskrift på 28 piksler, men stryker for et avsnitt på 16 piksler i samme farge. Mange nettsteder består med overskriftene og stryker på alt under dem.

Tynne og dekorative skrifter krever ekstra omtanke. W3C påpeker at på grunn av kantutjevning kan «spesielt tynne eller uvanlige skrifter gjengis av nettleseren med en mye svakere farge» enn den du valgte. Har profilskriften din et tynt snitt, bør du legge inn god margin over 4,5:1 i stedet for å sikte på 4,51.

Gjelder kontrastkravene for knapper, ikoner, fokusindikatorer og diagrammer?

Ja. Etter suksesskriterium 1.4.11 (nivå AA) trenger alt folk må se for å identifisere en kontroll, tilstanden dens eller et grafisk element, 3:1 mot fargene ved siden av. Det omfatter kanter på skjemafelt, ikoner uten tekst, fokusrammer, tilstander for avkrysningsbokser og brytere, og linjer og sektorer i diagrammer. Tekst inne i en knapp trenger fortsatt 4,5:1.

• Skjemafelt: en lysegrå #CCCCCC-kant på hvitt gir 1,61:1. Er den svake streken det eneste som viser hvor man skal skrive, stryker den.
• Knapper: WCAG krever ikke en synlig kant rundt hver knapp. W3Cs Understanding-dokument for 1.4.11 (åpnes i en ny fane) sier at en avgrensning bare trengs når det ikke finnes noen annen visuell måte å kjenne igjen kontrollen på. Kjennes en knapp bare igjen på den fargede formen, må formen ha 3:1 mot siden.
• Ikoner: et forstørrelsesglass for søk, et hjerte for ønskelisten eller et handlekurvikon uten tekst ved siden av trenger 3:1.
• Fokusindikatorer: rammen som viser tastaturfokus, må ha kontrast mot bakgrunnen rundt. WCAG 2.2-guiden vår går gjennom de nyere kriteriene for fokus.
• Diagrammer: linjer i et linjediagram og sektorer i et kakediagram trenger 3:1, med mindre de samme verdiene også vises som tekst.
• Deaktiverte kontroller er unntatt, men folk må fortsatt kunne se om en knapp kan trykkes på.

Lenker i løpende tekst er et spesialtilfelle. Vises de bare med farge, uten understreking, krever W3Cs teknikk G183 (åpnes i en ny fane) 3:1 mellom lenkefargen og teksten rundt, samtidig som begge fortsatt trenger 4,5:1 mot bakgrunnen. Å finne tre farger som oppfyller alt dette, er vanskelig. En understreking er mye enklere.

Hvordan sjekker jeg fargekontrast?

Bruk et gratis kontrastverktøy for bestemte fargepar, nettleserens utviklerverktøy for sider som er i drift, og en automatisk skanning for å finne problemområder på tvers av nettstedet. Sjekk deretter med egne øyne det verktøyene overser: tekst over bilder og fargeoverganger, hover- og fokustilstander, plassholdertekst og feilmeldinger. Det meste tar noen minutter per sidemal.

• WebAIM Contrast Checker (åpnes i en ny fane): skriv inn to heksadesimale koder og få forholdstallet, med bestått eller ikke bestått for vanlig tekst, stor tekst og grafiske objekter. Glidebryteren for lyshet er nyttig for å finne nærmeste nyanse som består.
• Colour Contrast Analyser (åpnes i en ny fane): et gratis skrivebordsprogram fra Vispero for Windows og macOS. Pipetten henter fargen fra en hvilken som helst piksel på skjermen, noe som er nyttig for tekst over bilder, PDF-er og apper, og programmet har en simulator for fargeblindhet.
• Chrome DevTools: inspiser en tekst og åpne fargevelgeren. Delen om kontrastforhold (åpnes i en ny fane) viser linjer for AA og AAA og kan foreslå en farge som består. Panelet CSS Overview lister opp alle kontrastproblemer på siden.
• Automatiske testverktøy: nettleserutvidelser og Lighthouse markerer tekst med lav kontrast på hele siden, men de merker ofte tekst over bilder eller fargeoverganger som noe som må sjekkes manuelt, i stedet for å gi bestått eller ikke bestått.

Der verktøyene kommer til kort, må du sjekke manuelt. Ligger teksten på et stort toppbilde, sjekker du den lyseste delen av bildet bak de lyseste bokstavene; W3C oppgir bakgrunnsbilder uten nok kontrast som en kjent feil (F83). Hold musepekeren over knapper, gå til dem med Tab, utløs en feil i et skjema, og bytt til mørk modus hvis du tilbyr det. Et mørkt tema kan også stryke: grått #757575 på en #121212-bakgrunn gir 4,07:1. Guiden vår om hvordan du tester tilgjengeligheten på nettstedet setter kontrast ved siden av de andre raske manuelle sjekkene.

Hvordan retter jeg lav kontrast uten å endre den visuelle profilen?

Som regel ved å legge til en mørkere nyanse av profilfargen til tekst og små elementer, og beholde originalen til store overskrifter, bakgrunner og illustrasjoner. Mange profilfarger stryker bare i små størrelser. Å bytte hvit tekst med mørk tekst på en lys profilfarge er ofte nok, og de fleste besøkende vil bare merke at siden er lettere å lese.

1. Lag en tekstsikker versjon av hver profilfarge, med minst 4,5:1 mot de viktigste bakgrunnene, og bruk den til brødtekst, lenker og små ikoner.
2. Bruk den opprinnelige lyse fargen til store overskrifter (der holder 3:1), bakgrunner, illustrasjoner og pynt.
3. På lyse profilfarger bytter du knappeteksten fra hvit til mørk.
4. Legg et heldekkende eller halvgjennomsiktig felt bak tekst som ligger på bilder.
5. Sjekk alle tilstander: hover, fokus, besøkt, valgt, feil og plassholder.
6. Lagre fargeparene som består, som design-tokens eller temainnstillinger, slik at nye sider arver dem i stedet for å finne dem opp på nytt.

Design for fargeblindhet: hvorfor farge alene ikke er nok

Kontrast og farge er to forskjellige problemer. Omtrent 1 av 12 menn og 1 av 200 kvinner har nedsatt fargesyn, oftest rød-grønn, ifølge Colour Blind Awareness (åpnes i en ny fane). WCAG 1.4.1 (åpnes i en ny fane) (nivå A) sier at farge ikke skal være den eneste visuelle måten å formidle informasjon på, så kombiner den med tekst, ikoner, mønstre eller understreking.

• Feil i skjemaer: en rød kant alene er ikke nok. Legg til en melding som «Skriv inn et postnummer» ved siden av feltet, helst med et ikon.
• Lager og status: en grønn eller rød prikk ved siden av et produkt sier ingenting til mange kunder. Skriv «På lager» eller «Utsolgt».
• Diagrammer: en tegnforklaring som er avhengig av å matche farger, er vanskelig å lese. Sett etiketter direkte på linjene, eller bruk mønstre og ulike linjetyper.
• Lenker: i brødtekst bør de understrekes, av grunnene ovenfor.

Vil du se problemet selv, kan Chrome DevTools simulere ulike typer nedsatt fargesyn, og Colour Contrast Analyser har også en simulator. Kontrast hjelper her også: forholdstallet måler lyshet, ikke fargetone, så to farger med høyt forholdstall er fortsatt mulige å skille selv når fargetonene ser like ut. Vil du vite mer om hvordan svaksynte og andre setter opp enhetene sine, se hvordan personer med funksjonsnedsettelser bruker nettet.

Er høykontrastmodus og kontrastknapper nok?

Nei. Kontrasttemaer i operativsystemet og kontrastknapper på siden hjelper dem som vet at de trenger mer kontrast, og slår det på. WCAG vurderer likevel siden i standardtilstanden, så fargene alle besøkende ser først, må fortsatt bestå. En kontrastknapp er et ekstra valg for dem som vil ha mer, ikke en løsning for farger som stryker.

Noen personer med funksjonsnedsettelser bruker kontrasttemaene i Windows, som erstatter fargene dine med sine egne. Det er verdt å teste nettstedet med et slikt tema slått på: ikoner laget som bakgrunnsbilder kan forsvinne, og fokusstiler som bare er tegnet med box-shadow, kan bli borte. Mediespørringen prefers-contrast i CSS lar deg også tilby en versjon med høyere kontrast til dem som har bedt om det i systeminnstillingene.

Widgeten vår har en kontrastjustering og en profil for fargeblindhet, og noen besøkende har nytte av dem. Vi ville likevel sagt det samme til deg: er brødteksten din #999999 på hvitt, bør du endre CSS-en. Widgeten gir en besøkende som vil ha mer kontrast, en måte å få det på. Den får ikke standardfarger som stryker, til å bestå, og WCAG-referansen i dokumentasjonen vår sier det samme.