1. Indtast tekstfarve
Indtast en farvekode i HEX-, RGB- eller HSL-format – eller vælg en farve fra farvevælgeren.
Kontrollér farvekontrast og læsbarhed ifølge WCAG-standarder
Indtast tekst- og baggrundsfarve, og værktøjet viser om kontrasten er tilstrækkelig. Beregningerne er baseret på den internationale tilgængelighedsstandard WCAG 2.1.
Loading tool editor...
Hvorfor er farvelæsbarhed vigtig?
Læsbarhed er forskellen i lysstyrke mellem tekstfarven og baggrundsfarven. Jo større forskel, jo lettere er det at læse teksten. For lav kontrast gør indholdet svært at læse – især for personer med synsnedsættelse, ældre eller under vanskelige lysforhold.
Ifølge Verdenssundhedsorganisationen (WHO) har ca. 2,2 milliarder mennesker i verden en eller anden form for synsnedsættelse.
Værktøjet beregner kontrastforholdet med formlen defineret i WCAG 2.1 – internationale retningslinjer for digital tilgængelighed.
Sådan bruger du farvekontrastkontrollen
At kontrollere læsbarheden tager kun få sekunder:
2. Indtast baggrundsfarve
Indtast baggrundsfarven, hvor teksten vil blive vist.3. Læs resultaterne
Værktøjet beregner kontrastforholdet og viser om farverne opfylder WCAG-kravene for normal tekst, stor tekst og ikoner.4. Justér farverne
Hvis kontrasten er for lav, foreslår Match-funktionen automatisk en farvevariant, der opfylder den valgte tærskel.
Hvilke farveformater understøttes?
HEX
Hexadecimalt format – det mest populære inden for webdesign. Begynder med tegnet # og indeholder 3 eller 6 tegn (cifre 0-9 og bogstaver A-F).
#fff– hvid (forkortet form)#ffffff– hvid (fuld form)#1a73e8– blå
Kontrastforhold
8.59:1
Normal tekst
AA (min. 4.5:1)AAA (min. 7:1)
Sådan fortolker du resultaterne af læsbarhedstesten
Når farver er indtastet, viser værktøjet resultater i tre sektioner:
- Normal tekst – kræver kontrast 4.5:1 (AA) eller 7:1 (AAA). Gælder tekst under 18pt (24px) eller under 14pt fed.
- Stor tekst / fed – kræver kontrast 3:1 (AA) eller 4.5:1 (AAA). Gælder overskrifter, knapper og fremhævet tekst.
- Ikoner – kræver kontrast 3:1 (AA). Gælder ikoner og grafiske UI-elementer, der formidler information.
Grøn indikator betyder at kravet er opfyldt. Rød indikator betyder at kontrasten er for lav og skal korrigeres.
Hvad betyder resultaterne af læsbarhedstesten?
Værktøjet viser kontrastforholdet på en skala fra 1:1 (ingen kontrast) til 21:1 (maksimal kontrast – sort tekst på hvid baggrund). Resultatet sammenlignes med tærskler defineret i WCAG-standarden:
- Normal tekst – kræver kontrast mindst 4.5:1 for niveau AA (minimumsstandard) eller 7:1 for niveau AAA (udvidet standard). Gælder tekst under 18pt (24px) eller under 14pt (18.5px) fed.
- Stor tekst / fed – kræver kontrast mindst 3:1 for niveau AA eller 4.5:1 for niveau AAA. Gælder tekst fra 18pt (24px) eller fra 14pt (18.5px) fed – overskrifter, knapper, fremhævelser.
- Ikoner og grafiske elementer – kræver kontrast mindst 3:1 for niveau AA. Gælder ikoner, knapper, formularfelter og andre UI-elementer, der formidler information.
Niveau AA er minimum krævet af tilgængelighedslovgivning i mange lande, herunder EU-direktivet om webtilgængelighed. Niveau AAA giver bedre læsbarhed, men er ikke altid praktisk opnåeligt for alle elementer.
Automatisk farvetilpasning til WCAG-krav
Hvis kontrasten er for lav, behøver du ikke søge efter den rigtige farve ved forsøg og fejl. Funktionen Match finder automatisk en variant af tekstfarven, der opfylder den valgte kontrasttærskel.
Sådan fungerer tilpasningen:
- Vælg tilpasningsmålet fra listen – f.eks. AA for normal tekst eller AAA for stor tekst.
- Start funktionen med knappen Match.
- Værktøjet søger gennem lysstyrke-varianter af tekstfarven og foreslår den nærmeste, der opfylder kravene.
- Den foreslåede farvekode kan kopieres til udklipsholderen eller straks indstilles som ny tekstfarve.
Algoritmen bevarer nuancen og mætningen af den originale farve og ændrer kun lysstyrken. Den foreslåede farve forbliver derfor konsistent med den visuelle identitet og opfylder samtidig tilgængelighedsstandarden.
Hvad betyder niveauerne AA og AAA i WCAG-standarden?
| Feature | Niveau AA (minimum) | Niveau AAA (forbedret) |
|---|---|---|
| Normal tekst – min. 4.5:1 | ||
| Normal tekst – min. 7:1 | ||
| Stor tekst / fed – min. 3:1 | ||
| Stor tekst / fed – min. 4.5:1 | ||
| Ikoner og UI-elementer – min. 3:1 | ||
| Lovkrav (EU-direktiv) | ||
| Krævet af US ADA / Section 508 | ||
| Krævet af UK Equality Act 2010 | ||
| Anbefales til hovedindhold |
Niveau AA (minimum)
- Normal tekst – min. 4.5:1
- Normal tekst – min. 7:1
- Stor tekst / fed – min. 3:1
- Stor tekst / fed – min. 4.5:1
- Ikoner og UI-elementer – min. 3:1
- Lovkrav (EU-direktiv)
- Krævet af US ADA / Section 508
- Krævet af UK Equality Act 2010
- Anbefales til hovedindhold
Niveau AAA (forbedret)
- Normal tekst – min. 4.5:1
- Normal tekst – min. 7:1
- Stor tekst / fed – min. 3:1
- Stor tekst / fed – min. 4.5:1
- Ikoner og UI-elementer – min. 3:1
- Lovkrav (EU-direktiv)
- Krævet af US ADA / Section 508
- Krævet af UK Equality Act 2010
- Anbefales til hovedindhold
Fejlfinding af farvekontrasttesteren
Jeg ser en fejlmeddelelse om farveformat
Kontrollér farveformatet. HEX-kode skal starte med # og indeholde 3 eller 6 tegn (f.eks. #fff eller #ffffff). For RGB-format kontrollér at værdierne er adskilt med kommaer og ligger i intervallet 0-255.
Match-funktionen finder ikke en passende farve
Når baggrund og tekst har lignende lysstyrke i samme nuance, kan algoritmen muligvis ikke finde en variant, der opfylder kravene uden at ændre nuancen. I så fald bør du overveje at ændre baggrundsfarven eller vælge en helt anden tekstfarve.
Farven i vælgeren matcher ikke den indtastede kode
Browserens farvevælger understøtter kun HEX-format uden gennemsigtighed. Hvis du indtaster en farve i RGBA- eller HSLA-format med gennemsigtighed, viser vælgeren kun farvedelen (uden alpha). Kontrastberegningerne tager stadig højde for gennemsigtigheden.
Hvor er det værd at kontrollere farvelæsbarhed?
Læsbarhed er vigtig overalt, hvor nogen skal læse tekst eller genkende et interface-element:
Hjemmesider
Tekst på sider, knapper, links, formularer. Særligt vigtigt for virksomhedssider, hvor besøgende har forskellig alder og forskellige synsmuligheder.Webshops
Priser, Køb nu-knapper, produktinformation. Lav læsbarhed kan betyde tabte ordrer.Præsentationer
Slides vist fra en projektor har ofte svagere kontrast end på en skærm. Det er værd at tjekke farverne inden præsentationen.Plakater og flyers
Trykte materialer set under forskellige lysforhold kræver høj kontrast.Mobilapps
Telefoner bruges i fuldt sollys, om natten, af mennesker i alle aldre.Restaurantmenuer
Ofte trykt på farvet papir eller med dekorative skrifttyper – det er let at ende med for lav kontrast.
Farvelæsbarhed for farveblinde personer
Farveblindhed er en forstyrrelse af farvesynet, der rammer ca. 8% af mænd og 0,5% af kvinder. Farveblinde personer kan have svært ved at skelne visse farvepar, selv når lysstyrkekontrasten er tilstrækkelig.
De mest almindelige typer farveblindhed:
- Deuteranopi – vanskeligheder med at skelne grøn og rød (den mest almindelige form)
- Protanopi – vanskeligheder med at se rød
- Tritanopi – vanskeligheder med at se blå og gul (sjælden)
Dette værktøj kontrollerer lysstyrkekontrast, som er vigtig for alle brugere. Ved design bør du dog desuden undgå problematiske farvekombinationer (f.eks. rød tekst på grøn baggrund) og ikke udelukkende stole på farve til at formidle information – brug også former, ikoner og tekst.
Tilgængelighedskrav i Danmark
Danmark har implementeret EU's webtilgængelighedsdirektiv gennem Webtilgængelighedsloven (Lov nr. 692 af 8. juni 2018). Loven kræver, at alle offentlige organers websteder og mobilapplikationer overholder WCAG 2.1 niveau AA.
- Offentlig sektor - alle statslige, regionale og kommunale websteder skal overholde WCAG 2.1 AA. Digitaliseringsstyrelsen fører tilsyn.
- EU's tilgængelighedslov (EAA) - fra juni 2025 udvides kravene til den private sektor: webshops, banker, transporttjenester og medieplatforme.
- Skandinavisk kontekst - Danmark, Sverige og Norge deler en stærk tilgængelighedskultur. Danske virksomheder, der opererer i hele Skandinavien, bør opfylde det strengeste krav (Norges lov dækker også den private sektor).
Kontrastforholdet 4,5:1 for normal tekst og 3:1 for stor tekst er lovkrav. Dette værktøj kontrollerer netop disse tærskler.
Hvad kendetegner farvekontrasttesteren?
Objektiv vurdering baseret på matematisk formel
Kontrastforholdet beregnes efter formlen fra WCAG-retningslinjer – resultatet afhænger ikke af skærmindstillinger eller individuel farveopfattelse.Overensstemmelse med international WCAG-standard
Resultaterne svarer til kravene i WCAG 2.1, som er grundlaget for tilgængelighedslovgivning i EU og mange andre lande.Automatisk farvetilpasning til tærskel
Match-funktionen finder en variant af tekstfarven, der opfylder den valgte kontrasttærskel – bevarer nuancen, ændrer kun lysstyrken.Fem farveformater
Understøttede formater: HEX, RGB, RGBA, HSL og HSLA. Farvekoden kan indsættes direkte fra Figma, Photoshop eller CSS-stylesheet.Tre indholdstyper i én test
Én kontrol viser resultatet for normal tekst, stor tekst (overskrifter, knapper) og ikoner – du behøver ikke teste hver type separat.Live tekstforhåndsvisning
Ændring af tekst- eller baggrundsfarve opdaterer straks forhåndsvisningen – du ser, hvordan teksten ser ud på den valgte baggrund, allerede inden implementering.
Ofte stillede spørgsmål om farvekontrastkontrollen
Hvad er et farvekontrastforhold?
Kontrastforholdet er et mål for lysstyrkeforskellen mellem to farver. Skalaen starter fra 1:1 (ingen forskel) til 21:1 (maksimal forskel – sort tekst på hvid baggrund). Jo højere forhold, jo lettere at skelne tekst fra baggrund.
Hvilken kontrast er tilstrækkelig ifølge WCAG?
For normal tekst er minimum 4.5:1 (Niveau AA). For stor tekst – overskrifter fra 18pt eller fed tekst fra 14pt – er 3:1 tilstrækkeligt. For ikoner og UI-komponenter kræves også 3:1.
Hvorfor opfylder mine farver ikke kravene, selvom jeg kan se dem godt?
Personlig farveopfattelse afhænger af skærmindstillinger, rumbelysning og individuel synsevne. WCAG er baseret på en objektiv matematisk formel, der tager hensyn til forskellige synsnedsættelser.
Skal jeg opfylde kontrastniveau AAA?
Ikke altid. Niveau AA (4.5:1 for normal tekst) er det minimum, der kræves af tilgængelighedsforskrifter i EU. Niveau AAA (7:1) giver bedre læsbarhed, men er sværere at opnå. For kritisk indhold – advarsler, sikkerhedsinstruktioner – overvej at opnå AAA.
Kræver dansk lov farvekontrast på websites?
Ja. Webtilgængelighedsloven (Lov nr. 692/2018) kræver, at offentlige websites overholder WCAG 2.1 AA, inkludert kontrastforhold på 4,5:1 for normal tekst og 3:1 for stor tekst. Fra juni 2025 udvider EU's tilgængelighedslov kravet til den private sektor.
Hvad er WCAG-standarden?
WCAG (Web Content Accessibility Guidelines) er internationale retningslinjer for webtilgængelighed udviklet af W3C. De definerer bl.a. minimumkontrastværdier, overskriftsstruktur og tastaturunderstøttelse. Danske love refererer til WCAG via den europæiske standard EN 301 549.
Hvordan finder jeg farvekoder fra min hjemmeside?
I browseren (Chrome, Firefox, Edge) kan du åbne udviklerværktøjer (højreklik > Inspicér). Under fanen Styles kan du se farverne på siden. Alternativt kan browserudvidelser som ColorZilla lade dig vælge farven på ethvert element.
Virker dette værktøj til mørk tilstand?
Ja. Værktøjet tjekker kontrastforholdet mellem to farver uanset hvilken der er lysere. For mørk tilstand indtaster du en lys tekstfarve og en mørk baggrundsfarve. De samme WCAG-tærskler gælder - 4,5:1 for normal tekst (AA) og 7:1 (AAA).
Hvad er forskellen mellem WCAG-niveau AA og AAA?
AA kræver 4,5:1 kontrast for normal tekst og 3:1 for stor tekst - dette er det lovmæssige minimum. AAA kræver 7:1 for normal tekst og 4,5:1 for stor tekst - bedre læsbarhed, men sværere at opnå. For kritisk indhold (advarsler, sikkerhedsinstruktioner) anbefales AAA.
Hvilke farvepar på min hjemmeside skal jeg tjekke først?
Vigtigst: tekst på hovedbaggrunden, tekst på bannere og farvede sektioner, knapper (tekstfarve og knapbaggrund i forhold til sidebaggrunden), links og ikoner.
Hjælp os med at forbedre vores værktøjer
Har du en idé til en ny funktion, fundet en fejl eller vil foreslå et andet værktøj, der ville gøre dit arbejde lettere? Skriv til os – vi svarer inden for 24 timer.