Gratis værktøj: Tilgængelighed

Farvekontrasttjek

Sammenlign en tekstfarve med en baggrundsfarve efter WCAG 2.2 direkte her, eller indtast en sideadresse for at finde al tekst under kontrastminimummet med de målte farver og den nærmeste farve, der består.

Kontrastberegner

Indtast en tekstfarve og en baggrundsfarve. Alt beregnes i din browser.

Sådan ser normal tekst på 16 pixels ud.

Stor tekst på 24 pixels

Kanten på en knap

Kontrastforhold4.54:1

WCAG 2.2-resultater for disse farver
Normal tekst, AAWCAG 1.4.3, kræver 4.5:1Bestået
Stor tekst, AAWCAG 1.4.3, kræver 3:1Bestået
Normal tekst, AAAWCAG 1.4.6, kræver 7:1Fejlet
Stor tekst, AAAWCAG 1.4.6, kræver 4.5:1Bestået
Ikoner, kanter og formularfelterWCAG 1.4.11, kræver 3:1Bestået

Nærmeste tekstfarver, der består på denne baggrund

Stor tekst betyder mindst 24 pixels eller 18,66 pixels med fed skrift. Forholdstal rundes ned, så 4.499:1 vises som 4.49:1 og fejler, sådan som WCAG har tænkt det.

Eller scan en side for tekst med for lav kontrast

Gratis. Tjekker den adresse, du indtaster, på cirka 20 sekunder.

Det tjekker værktøjet

  • WCAG-forholdet mellem to vilkårlige farver

    Beregneren bruger formlen for relativ luminans fra definitionerne i WCAG 2.2 og viser resultatet for normal tekst, stor tekst og dele af brugerfladen på AA og AAA. Den kører i din browser.

  • En farve, der består, færdigberegnet

    Når et par fejler, finder den den nærmeste tekstfarve i samme farvetone, der når 4.5:1 eller 7:1, så du ændrer så lidt som muligt i dit design.

  • Al tekst med lav kontrast på en side

    Sidescanningen kører axe-cores color-contrast-regel i en rigtig Chrome-browser og viser hvert element, der fejler, med tekstfarve, baggrundsfarve, skriftstørrelse og forhold.

  • Grupperet efter farvepar

    Fejl grupperes efter tekst- og baggrundsfarve, fordi én ændring af en temafarve som regel retter alle de elementer, der bruger den.

  • Den rigtige grænse for stor tekst

    Tekst på mindst 24 pixels eller 18,66 pixels med fed skrift skal have 3:1 i stedet for 4.5:1. Scanningen bruger den rigtige grænse for hvert element ud fra dets beregnede størrelse og skrifttykkelse.

  • Det, den ikke kunne måle, og hvorfor

    Tekst oven på billeder, farveovergange eller overlappende elementer vises for sig med årsagen, så du ved præcis, hvad du skal tjekke med øjnene.

Det kan det ikke tjekke

  • Måle tekst oven på fotos, farveovergange eller video. Software kan ikke vide, hvilken del af et billede der ligger bag hvert bogstav, så de vises, så du kan tjekke dem.
  • Tjekke hover, fokus eller andre tilstande. Scanningen ser siden, som den indlæses; tjek de farver med beregneren.
  • Scanne ikoner, kanter og formularfelter på siden efter WCAG 1.4.11. Beregneren viser resultatet for 3:1 for ethvert par, du indtaster.
  • Læse tekst, der er en del af et billede, for eksempel et banner med ordene indbagt.
  • Teste mere end den side, du indtaster. Den fulde gratis scanning tester op til fem vigtige sider.

Hvorfor det er vigtigt

Lav kontrast er den mest almindelige tilgængelighedsfejl på nettet. WebAIM’s analyse fra 2026 af forsiderne på de en million største websites fandt tekst med lav kontrast på 83,9 % af dem, i gennemsnit 34 forekomster pr. side.

Svag tekst er svær at læse for mennesker med nedsat syn eller farvesynsdefekt og for alle, der bruger en telefon i skarpt sollys. WCAG 2.2-succeskriterium 1.4.3 på niveau AA sætter minimummet til 4.5:1 for normal tekst og 3:1 for stor tekst.

Det er også et af de billigste problemer at rette: på de fleste hjemmesider skyldes næsten alle fejl en håndfuld temafarver, og når du ændrer dem, er alle sider rettet på én gang.

Sådan læser du resultaterne

Kontrastforhold
Fra 1:1 (den samme farve to gange) til 21:1 (sort på hvidt). Forholdstal rundes ned, så et par, der viser 4.49:1, fejler minimummet på 4.5:1.
Normal tekst, AA (4.5:1)
Minimummet for brødtekst, links, ledetekster og knaptekst efter WCAG 1.4.3.
Stor tekst, AA (3:1)
For tekst på mindst 24 pixels eller 18,66 pixels med fed skrift. WCAG definerer stor tekst som 18 punkt eller 14 punkt fed.
AAA (7:1 og 4.5:1)
Det skærpede niveau i WCAG 1.4.6. Det er ikke nødvendigt for overensstemmelse på AA, men det hjælper flere læsere.
Ikoner, kanter og formularfelter (3:1)
WCAG 1.4.11 kræver 3:1 mod tilstødende farver for de dele af betjeningselementer og grafik, som man skal kunne se for at bruge dem.
Tekst, der fejler
Hvert element, som scanningen målte under sin grænse, med selektor, farver, størrelse og forhold. Åbn et for at se dets markup og, hvis det findes, et skærmbillede.
Skal tjekkes med øjnene
Tekst, som axe-core ikke kunne måle, med årsagen, for eksempel et billede eller en farveovergang bagved.

Sådan retter du de mest almindelige problemer

  • Grå tekst på hvidt

    #767676 er omtrent den lyseste grå, der når 4.5:1 på hvidt (4.54:1). Lysere grå som #999999 (2.84:1) er en almindelig årsag til fejl i footere, billedtekster, pladsholdere og priser.

  • Hvid tekst på en knap i brandfarven

    Hvis hvid tekst på din brandfarve fejler, så gør knappens baggrund nogle trin mørkere, eller brug mørk tekst. Tjek også farverne ved hover og fokus, da de ofte bliver lysere.

  • Pladsholdertekst i formularer

    Pladsholdertekst er stadig tekst og skal have 4.5:1. Endnu bedre: brug en synlig ledetekst over feltet, så pladsholderen ikke er den eneste vejledning.

  • Tekst oven på billeder og slidere

    Læg teksten på en heldækkende eller halvgennemsigtig baggrund, eller læg et mørkt lag over billedet, og tjek derefter den lyseste del af billedet bag teksten.

  • Tilbudsmærker og småt

    Tekst i deaktiverede betjeningselementer er undtaget fra 1.4.3, men tilbudsmærker, priser og juridisk småt er ikke. Det er ofte den svageste tekst på en webshops sider.

For lav farvekontrast: hvorfor det betyder noget, og hvordan du retter det i Shopify, WooCommerce og på enhver hjemmeside

Spørgsmål om værktøjet

Hvilket kontrastforhold kræver WCAG?

På niveau AA 4.5:1 for normal tekst og 3:1 for stor tekst (succeskriterium 1.4.3) og 3:1 for brugerfladekomponenter og meningsbærende grafik (1.4.11). Niveau AAA kræver 7:1 og 4.5:1 (1.4.6).

Hvad tæller som stor tekst?

WCAG definerer stor tekst som mindst 18 punkt eller 14 punkt fed. I CSS-pixels er det cirka 24 px eller 18,66 px med fed skrift.

Skal logoer opfylde kontrastminimummet?

Nej. WCAG 1.4.3 undtager logoer og tekst, der er en del af et logo eller et brandnavn, samt rent dekorativ tekst og tekst i inaktive betjeningselementer.

Hvorfor viser scanningen tekst oven på et billede til gennemsyn?

axe-core måler ensfarvede flader. Når et billede, en farveovergang eller et andet element ligger bag teksten, kan den ikke se, hvilke farver der mødes, så den rapporterer elementet, så et menneske kan tjekke det, i stedet for at gætte.

Har jeg brug for kontrast på AAA?

AAA er ikke påkrævet for overensstemmelse på niveau AA, og W3C anbefaler ikke at kræve AAA for hele hjemmesider. Det er stadig god praksis at nå 7:1 for brødtekst, hvor dit design tillader det.

Er APCA en del af WCAG?

Nej. APCA er en anden kontrastmetode, der har været drøftet til WCAG 3, som stadig er et udkast. Overensstemmelse måles i dag med det WCAG 2-forhold, som dette værktøj beregner.

Kilder

Relaterede værktøjer

Tilgængelighedsrapport ($174, engangsbetaling) bygger videre på den fulde gratis scanning og tilføjer flere sider, ændringen til hvert fund, en PDF og gentests, så du kan bekræfte dine rettelser.

Om Tilgængelighedsrapport