# 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. ## 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. ## Ofte stillede spørgsmål ### 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 - [W3C: forklaring af WCAG 2.2-succeskriterium 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) - [W3C: forklaring af succeskriterium 1.4.6 Contrast (Enhanced)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-enhanced) - [W3C: forklaring af succeskriterium 1.4.11 Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast) - [W3C: definitionen af relativ luminans i WCAG 2.2](https://www.w3.org/TR/WCAG22/#dfn-relative-luminance) - [Deque: axe-cores color-contrast-regel](https://dequeuniversity.com/rules/axe/4.13/color-contrast) - [WebAIM: The WebAIM Million (2026)](https://webaim.org/projects/million/)