1. Skriv inn tekstfarge
Skriv inn en fargekode i HEX-, RGB- eller HSL-format – eller velg en farge fra fargevelgeren.
Sjekk fargekontrast og lesbarhet i henhold til WCAG-standarder
Skriv inn tekst- og bakgrunnsfarge, og verktøyet viser om kontrasten er tilstrekkelig. Beregningene er basert på den internasjonale tilgjengelighetsstandarden WCAG 2.1.
Loading tool editor...
Hvorfor er fargelesbarhet viktig?
Lesbarhet er forskjellen i lysstyrke mellom tekstfargen og bakgrunnsfargen. Jo større forskjell, jo lettere er det å lese teksten. For lav kontrast gjør innholdet vanskelig å lese – spesielt for personer med synshemming, eldre eller under vanskelige lysforhold.
Ifølge Verdens helseorganisasjon (WHO) har ca. 2,2 milliarder mennesker i verden en eller annen form for synshemming.
Verktøyet beregner kontrastforholdet med formelen definert i WCAG 2.1 – internasjonale retningslinjer for digital tilgjengelighet.
Slik bruker du fargekontrastsjekkeren
Å sjekke lesbarheten tar bare noen sekunder:
2. Skriv inn bakgrunnsfarge
Skriv inn bakgrunnsfargen der teksten skal vises.3. Les resultatene
Verktøyet beregner kontrastforholdet og viser om fargene oppfyller WCAG-kravene for normal tekst, stor tekst og ikoner.4. Juster fargene
Hvis kontrasten er for lav, foreslår Match-funksjonen automatisk en fargevariant som oppfyller den valgte terskelen.
Hvilke fargeformater støttes?
HEX
Heksadesimalt format – det mest populære innen webdesign. Begynner med tegnet # og inneholder 3 eller 6 tegn (sifre 0-9 og bokstaver A-F).
#fff– hvit (forkortet form)#ffffff– hvit (full form)#1a73e8– blå
Kontrastforhold
8.59:1
Normal tekst
AA (min. 4.5:1)AAA (min. 7:1)
Slik tolker du resultatene av lesbarhetstesten
Når farger er skrevet inn, viser verktøyet resultater i tre seksjoner:
- Normal tekst – krever kontrast 4.5:1 (AA) eller 7:1 (AAA). Gjelder tekst under 18pt (24px) eller under 14pt fet.
- Stor tekst / fet – krever kontrast 3:1 (AA) eller 4.5:1 (AAA). Gjelder overskrifter, knapper og uthevet tekst.
- Ikoner – krever kontrast 3:1 (AA). Gjelder ikoner og grafiske UI-elementer som formidler informasjon.
Grønn indikator betyr at kravet er oppfylt. Rød indikator betyr at kontrasten er for lav og må korrigeres.
Hva betyr resultatene av lesbarhetstesten?
Verktøyet viser kontrastforholdet på en skala fra 1:1 (ingen kontrast) til 21:1 (maksimal kontrast – svart tekst på hvit bakgrunn). Resultatet sammenlignes med terskler definert i WCAG-standarden:
- Normal tekst – krever kontrast minst 4.5:1 for nivå AA (minimumsstandard) eller 7:1 for nivå AAA (utvidet standard). Gjelder tekst under 18pt (24px) eller under 14pt (18.5px) fet.
- Stor tekst / fet – krever kontrast minst 3:1 for nivå AA eller 4.5:1 for nivå AAA. Gjelder tekst fra 18pt (24px) eller fra 14pt (18.5px) fet – overskrifter, knapper, uthevelser.
- Ikoner og grafiske elementer – krever kontrast minst 3:1 for nivå AA. Gjelder ikoner, knapper, skjemafelt og andre UI-elementer som formidler informasjon.
Nivå AA er minimum krevd av tilgjengelighetslovgivning i mange land, inkludert EUs webtilgjengelighetsdirektiv. Nivå AAA gir bedre lesbarhet, men er ikke alltid praktisk oppnåelig for alle elementer.
Automatisk fargetilpasning til WCAG-krav
Hvis kontrasten er for lav, trenger du ikke lete etter riktig farge ved prøving og feiling. Funksjonen Match finner automatisk en variant av tekstfargen som oppfyller den valgte kontrastterskelen.
Slik fungerer tilpasningen:
- Velg tilpasningsmålet fra listen – f.eks. AA for normal tekst eller AAA for stor tekst.
- Start funksjonen med Match-knappen.
- Verktøyet søker gjennom lyshets-varianter av tekstfargen og foreslår den nærmeste som oppfyller kravene.
- Den foreslåtte fargekoden kan kopieres til utklippstavlen eller umiddelbart settes som ny tekstfarge.
Algoritmen bevarer nyansen og metningen til den originale fargen og endrer kun lysheten. Den foreslåtte fargen forblir dermed konsistent med den visuelle identiteten og oppfyller samtidig tilgjengelighetsstandarden.
Hva betyr nivåene AA og AAA i WCAG-standarden?
| Funkcja | Nivå AA (minimum) | Nivå AAA (forbedret) |
|---|---|---|
| Normal tekst – min. 4.5:1 | ||
| Normal tekst – min. 7:1 | ||
| Stor tekst / fet – min. 3:1 | ||
| Stor tekst / fet – min. 4.5:1 | ||
| Ikoner og UI-elementer – min. 3:1 | ||
| Lovkrav (EU-direktiv) | ||
| Krevd av US ADA / Section 508 | ||
| Krevd av UK Equality Act 2010 | ||
| Anbefales for hovedinnhold |
Nivå AA (minimum)
- Normal tekst – min. 4.5:1
- Normal tekst – min. 7:1
- Stor tekst / fet – min. 3:1
- Stor tekst / fet – min. 4.5:1
- Ikoner og UI-elementer – min. 3:1
- Lovkrav (EU-direktiv)
- Krevd av US ADA / Section 508
- Krevd av UK Equality Act 2010
- Anbefales for hovedinnhold
Nivå AAA (forbedret)
- Normal tekst – min. 4.5:1
- Normal tekst – min. 7:1
- Stor tekst / fet – min. 3:1
- Stor tekst / fet – min. 4.5:1
- Ikoner og UI-elementer – min. 3:1
- Lovkrav (EU-direktiv)
- Krevd av US ADA / Section 508
- Krevd av UK Equality Act 2010
- Anbefales for hovedinnhold
Feilsøking av fargekontrasttesteren
Jeg ser en feilmelding om fargeformat
Sjekk fargeformatet. HEX-kode skal starte med # og inneholde 3 eller 6 tegn (f.eks. #fff eller #ffffff). For RGB-format sjekk at verdiene er atskilt med komma og ligger i intervallet 0-255.
Match-funksjonen finner ikke en passende farge
Når bakgrunn og tekst har lignende lyshet i samme nyanse, kan algoritmen muligens ikke finne en variant som oppfyller kravene uten å endre nyansen. I så fall bør du vurdere å endre bakgrunnsfargen eller velge en helt annen tekstfarge.
Fargen i velgeren matcher ikke den inntastede koden
Nettleserens fargevelger støtter kun HEX-format uten gjennomsiktighet. Hvis du taster inn en farge i RGBA- eller HSLA-format med gjennomsiktighet, viser velgeren kun fargedelen (uten alpha). Kontrastberegningene tar likevel hensyn til gjennomsiktigheten.
Hvor er det verdt å sjekke fargelesbarhet?
Lesbarhet er viktig overalt hvor noen må lese tekst eller gjenkjenne et grensesnittelement:
Nettsider
Tekst på sider, knapper, lenker, skjemaer. Spesielt viktig for bedriftssider, hvor besøkende har ulik alder og ulike synsmuligheter.Nettbutikker
Priser, Kjøp nå-knapper, produktinformasjon. Lav lesbarhet kan bety tapte bestillinger.Presentasjoner
Lysbilder vist fra en projektor har ofte svakere kontrast enn på en skjerm. Det er verdt å sjekke fargene før presentasjonen.Plakater og flyers
Trykte materialer sett under ulike lysforhold krever høy kontrast.Mobilapper
Telefoner brukes i fullt sollys, om natten, av mennesker i alle aldre.Restaurantmenyer
Ofte trykt på farget papir eller med dekorative skrifttyper – det er lett å ende opp med for lav kontrast.
Fargelesbarhet for fargeblinde
Fargeblindhet er en forstyrrelse av fargesynet som rammer ca. 8% av menn og 0,5% av kvinner. Fargeblinde personer kan ha vanskeligheter med å skille visse fargepar, selv når lyshetskontrasten er tilstrekkelig.
De vanligste typene fargeblindhet:
- Deuteranopi – vanskeligheter med å skille grønn og rød (den vanligste formen)
- Protanopi – vanskeligheter med å se rød
- Tritanopi – vanskeligheter med å se blå og gul (sjelden)
Dette verktøyet sjekker lyshetskontrast, som er viktig for alle brukere. Ved design bør du imidlertid i tillegg unngå problematiske fargekombinasjoner (f.eks. rød tekst på grønn bakgrunn) og ikke utelukkende stole på farge for å formidle informasjon – bruk også former, ikoner og tekst.
Krav til universell utforming i Norge
Norge har en av Europas strengeste lover om universell utforming — den gjelder også privat sektor, ikke bare offentlige virksomheter:
- Forskrift om universell utforming av IKT — krever at alle nettsteder og apper rettet mot allmennheten oppfyller WCAG 2.1 nivå AA. Gjelder både offentlig og privat sektor.
- Likestillings- og diskrimineringsloven — forbyr diskriminering på grunn av funksjonsnedsettelse, inkludert utilgjengelige digitale tjenester.
- Digitaliseringsdirektoratet (Digdir) — fører tilsyn og kan gi pålegg og dagbøter ved brudd.
- Strengere enn EU — mens EU-direktivet primært dekker offentlig sektor (med EAA fra 2025 for privat), har Norge allerede krevd universell utforming fra privat sektor i mange år.
Kontrastforholdet 4,5:1 for vanlig tekst og 3:1 for stor tekst er lovpålagt. Dette verktøyet sjekker nøyaktig disse tersklene.
Hva kjennetegner fargekontrasttesteren?
Objektiv vurdering basert på matematisk formel
Kontrastforholdet beregnes etter formelen fra WCAG-retningslinjer – resultatet avhenger ikke av skjerminnstillinger eller individuell fargeoppfatning.Samsvar med internasjonal WCAG-standard
Resultatene svarer til kravene i WCAG 2.1, som er grunnlaget for tilgjengelighetslovgivning i EU og mange andre land.Automatisk fargetilpasning til terskel
Match-funksjonen finner en variant av tekstfargen som oppfyller den valgte kontrastterskelen – bevarer nyansen, endrer kun lysheten.Fem fargeformater
Støttede formater: HEX, RGB, RGBA, HSL og HSLA. Fargekoden kan limes inn direkte fra Figma, Photoshop eller CSS-stilark.Tre innholdstyper i én test
Én sjekk viser resultatet for normal tekst, stor tekst (overskrifter, knapper) og ikoner – du trenger ikke teste hver type separat.Live tekstforhåndsvisning
Endring av tekst- eller bakgrunnsfarge oppdaterer straks forhåndsvisningen – du ser hvordan teksten ser ut på den valgte bakgrunnen, allerede før implementering.
Ofte stilte spørsmål om fargekontrastsjekkeren
Hjelp oss å forbedre verktøyene våre
Har du en idé til en ny funksjon, funnet en feil eller vil foreslå et annet verktøy som ville gjøre arbeidet ditt enklere? Skriv til oss – vi svarer innen 24 timer.
Trenger du en universelt utformet nettside?
Vi lager nettsider med alle brukere i tankene — riktig fargekontrast, lesbar typografi og logisk struktur. Norges krav om universell utforming gjelder også privat sektor.