Gratis verktøy: Universell utforming

Sjekk fargekontrasten

Sammenlign en tekstfarge med en bakgrunnsfarge mot WCAG 2.2 her, eller skriv inn en sideadresse for å finne all tekst under minimumskravet til kontrast, med de målte fargene og den nærmeste fargen som består.

Kontrastkalkulator

Skriv inn en tekstfarge og en bakgrunnsfarge. Alt beregnes i nettleseren din.

Normal tekst på 16 piksler ser slik ut.

Stor tekst på 24 piksler

Omrisset av en knapp

Kontrastforhold4.54:1

WCAG 2.2-resultater for disse fargene
Normal tekst, AAWCAG 1.4.3, krever 4.5:1Bestått
Stor tekst, AAWCAG 1.4.3, krever 3:1Bestått
Normal tekst, AAAWCAG 1.4.6, krever 7:1Ikke bestått
Stor tekst, AAAWCAG 1.4.6, krever 4.5:1Bestått
Ikoner, kantlinjer og skjemafeltWCAG 1.4.11, krever 3:1Bestått

Nærmeste tekstfarger som består på denne bakgrunnen

Stor tekst betyr minst 24 piksler, eller 18,66 piksler i fet skrift. Forholdene rundes ned, så 4.499:1 vises som 4.49:1 og består ikke, slik WCAG har ment det.

Eller skann en side for tekst med lav kontrast

Gratis. Sjekker adressen du skriver inn, på omtrent 20 sekunder.

Hva verktøyet sjekker

  • WCAG-forholdet mellom to vilkårlige farger

    Kalkulatoren bruker formelen for relativ luminans fra definisjonene i WCAG 2.2 og viser resultatet for normal tekst, stor tekst og grensesnittdeler, på nivå AA og AAA. Den kjører i nettleseren din.

  • En beregnet farge som består

    Når et par ikke består, finner den den nærmeste tekstfargen med samme fargetone som når 4.5:1 eller 7:1, slik at du endrer designet ditt så lite som mulig.

  • All tekst med lav kontrast på en side

    Sideskanningen kjører color-contrast-regelen i axe-core i en ekte Chrome-nettleser og viser hvert element som ikke består, med tekstfarge, bakgrunnsfarge, skriftstørrelse og forhold.

  • Gruppert etter fargepar

    Feilene grupperes etter tekstfarge og bakgrunnsfarge, fordi én endring i en temafarge som regel retter alle elementene som bruker den.

  • Riktig terskel for stor tekst

    Tekst på minst 24 piksler, eller 18,66 piksler i fet skrift, trenger 3:1 i stedet for 4.5:1. Skanningen bruker riktig terskel for hvert element ut fra den beregnede størrelsen og skrifttykkelsen.

  • Det den ikke kunne måle, og hvorfor

    Tekst over bilder, fargeoverganger eller overlappende elementer vises for seg med årsaken, så du vet nøyaktig hva du må sjekke visuelt.

Hva det ikke kan sjekke

  • Måle tekst over bilder, fargeoverganger eller video. Programvare kan ikke vite hvilken del av et bilde som ligger bak hver bokstav, så disse listes opp slik at du kan sjekke dem.
  • Sjekke hover, fokus eller andre tilstander. Skanningen ser siden slik den lastes inn; sjekk disse fargene med kalkulatoren.
  • Skanne ikoner, kantlinjer og skjemafelt på siden mot WCAG 1.4.11. Kalkulatoren viser resultatet for 3:1 for alle par du skriver inn.
  • Lese tekst som er en del av et bilde, for eksempel et banner der ordene er bakt inn i bildet.
  • Teste mer enn siden du skriver inn. Den fullstendige gratis skanningen tester opptil fem viktige sider.

Hvorfor det er viktig

Lav kontrast er den vanligste feilen innen universell utforming på nettet. WebAIMs analyse fra 2026 av forsidene til de én million største nettstedene fant tekst med lav kontrast på 83,9 % av dem, med i snitt 34 forekomster per side.

Svak tekst er vanskelig å lese for personer med nedsatt syn eller fargesynsvansker, og for alle som bruker mobilen i sterkt sollys. Suksesskriterium 1.4.3 i WCAG 2.2, på nivå AA, setter minimumet til 4.5:1 for normal tekst og 3:1 for stor tekst.

Det er også et av de billigste problemene å rette: på de fleste nettsteder står en håndfull temafarger bak nesten alle feilene, og når du endrer dem, rettes alle sidene på én gang.

Slik leser du resultatene

Kontrastforhold
Fra 1:1 (samme farge to ganger) til 21:1 (svart på hvitt). Forholdene rundes ned, så et par som viser 4.49:1, oppfyller ikke minimumet på 4.5:1.
Normal tekst, AA (4.5:1)
Minimumet for brødtekst, lenker, ledetekster og knappetekst etter WCAG 1.4.3.
Stor tekst, AA (3:1)
For tekst på minst 24 piksler, eller 18,66 piksler i fet skrift. WCAG definerer stor tekst som 18 punkter, eller 14 punkter i fet skrift.
AAA (7:1 og 4.5:1)
Det skjerpede nivået i WCAG 1.4.6. Det kreves ikke for samsvar med AA, men det hjelper flere lesere.
Ikoner, kantlinjer og skjemafelt (3:1)
WCAG 1.4.11 krever 3:1 mot tilstøtende farger for de delene av kontroller og grafikk som folk må se for å kunne bruke dem.
Tekst som ikke består
Hvert element som skanningen målte under terskelen, med selektor, farger, størrelse og forhold. Åpne et element for å se markupen og, der det finnes, et skjermbilde.
Må sjekkes visuelt
Tekst som axe-core ikke kunne måle, med årsaken, for eksempel et bilde eller en fargeovergang bak teksten.

Slik fikser du de vanligste problemene

  • Grå tekst på hvitt

    #767676 er omtrent den lyseste gråtonen som når 4.5:1 på hvitt (4.54:1). Lysere gråtoner som #999999 (2.84:1) er en vanlig årsak til feil i bunnfelt, bildetekster, plassholdertekst og priser.

  • Hvit tekst på en knapp i merkevarefargen

    Hvis hvit tekst på merkevarefargen din ikke består, gjør du knappebakgrunnen noen hakk mørkere eller bruker mørk tekst. Sjekk også fargene for hover og fokus, siden de ofte blir lysere.

  • Plassholdertekst i skjemaer

    Plassholdertekst er også tekst og trenger 4.5:1. Enda bedre er det å bruke en synlig ledetekst over feltet, slik at plassholderen ikke er den eneste instruksjonen.

  • Tekst over bilder og bildekaruseller

    Legg teksten på en heldekkende eller halvgjennomsiktig bakgrunn, eller legg et mørkt lag over bildet, og sjekk deretter den lyseste delen av bildet som ligger bak teksten.

  • Salgsmerker og småskrift

    Tekst i deaktiverte kontroller er unntatt fra 1.4.3, men salgsmerker, priser og juridisk småskrift er det ikke. Dette er ofte den svakeste teksten på sidene i en nettbutikk.

Lav fargekontrast: hvorfor det er viktig, og hvordan du retter det i Shopify, WooCommerce og på alle nettsteder

Spørsmål om verktøyet

Hvilket kontrastforhold krever WCAG?

For nivå AA 4.5:1 for normal tekst og 3:1 for stor tekst (suksesskriterium 1.4.3), og 3:1 for grensesnittkomponenter og meningsbærende grafikk (1.4.11). Nivå AAA krever 7:1 og 4.5:1 (1.4.6).

Hva regnes som stor tekst?

WCAG definerer stor tekst som minst 18 punkter, eller 14 punkter i fet skrift. I CSS-piksler er det omtrent 24 px, eller 18,66 px i fet skrift.

Må logoer oppfylle minimumskravet til kontrast?

Nei. WCAG 1.4.3 unntar logoer og tekst som er en del av en logo eller et merkenavn, i tillegg til rent dekorativ tekst og tekst i inaktive kontroller.

Hvorfor viser skanningen tekst over et bilde for vurdering?

axe-core måler rene flatefarger. Når et bilde, en fargeovergang eller et annet element ligger bak teksten, kan den ikke vite hvilke farger som møtes, så den rapporterer elementet slik at et menneske kan sjekke det, i stedet for å gjette.

Trenger jeg kontrast på AAA-nivå?

AAA kreves ikke for samsvar med nivå AA, og W3C anbefaler ikke å kreve AAA for hele nettsteder. Det er likevel god praksis å nå 7:1 for brødtekst der designet ditt tillater det.

Er APCA en del av WCAG?

Nei. APCA er en annen metode for å beregne kontrast som har vært diskutert for WCAG 3, som fortsatt er et utkast. Samsvar måles i dag med forholdstallet fra WCAG 2, som dette verktøyet beregner.

Kilder

Relaterte verktøy

«Rapport om universell utforming» ($174, engangspris) bygger på hele den gratis skanningen og legger til flere sider, endringen du skal gjøre for hvert funn, en PDF og kontrolltester som bekrefter utbedringene dine.

Les mer om «Rapport om universell utforming»