Kontrasttjek – WCAG Kontrastforhold
Indtast en forgrunds- og baggrundsfarve for at tjekke kontrastforholdet og se, om din kombination opfylder WCAG AA og AAA tilgængelighedsstandarder.
Indtast to farver for at tjekke kontrasten
Understøtter HEX-, RGB-, HSL- og OKLCH-formater
Prøv et eksempel
Tjek farvekontrast for tilgængelighed
Farvekontrast er afgørende for læsbarheden. Når forgrundstest ikke har tilstrækkelig kontrast mod sin baggrund, bliver den svær at læse — især for brugere med nedsat syn eller farvesynsmangler.
Denne kontrasttjekker beregner kontrastforholdet mellem to vilkårlige farver og evaluerer det mod WCAG 2.1-succeskriterier. Indtast farver i HEX, RGB eller HSL-format og få øjeblikkelige resultater.
Forstå WCAG-kontrastniveauer
Retningslinjerne for tilgængelighed af webindhold (WCAG) definerer minimumskontrastforhold for tekstlæsbarhed. Der er to overensstemmelsesniveauer:
- WCAG AA Normal tekst — kræver et kontrastforhold på mindst 4,5:1
- WCAG AA Stor tekst — kræver et kontrastforhold på mindst 3:1 (stor tekst er 18pt+ eller 14pt+ fed)
- WCAG AAA Normal tekst — kræver et kontrastforhold på mindst 7:1
- WCAG AAA Stor tekst — kræver et kontrastforhold på mindst 4,5:1
AA er standardniveauet, som de fleste websites og apps sigter efter. AAA er det forbedrede niveau, anbefalet hvor maksimal læsbarhed er vigtigt.
Sådan bruger du kontrasttjekkeren
- Indtast en forgrundsfarve (tekst) — HEX, RGB eller HSL
- Indtast en baggrundsfarve i et understøttet format
- Se kontrastforholdet og en live forhåndsvisning af tekst på den baggrund
- Tjek bestået/ikke bestået-resultaterne for WCAG AA og AAA
- Brug byt-knappen til hurtigt at skifte forgrund og baggrund
Hvornår du bør tjekke farvekontrast
- Når du vælger tekst- og baggrundsfarver til en hjemmeside eller app
- Når du verificerer, at et designsystem opfylder tilgængelighedskrav
- Når du tester knap-, link- eller ikonfarver mod deres baggrunde
- Når du tjekker farvekombinationer i mørk tilstand
- Når du skal opfylde juridiske tilgængelighedsstandarder (ADA, EAA, Section 508)
Præcis, øjeblikkelig og gratis
Dette værktøj beregner WCAG 2.1-kontrastforholdet ved hjælp af standardformlen for relativ luminans. Resultaterne beregnes øjeblikkeligt i din browser — ingen data sendes til nogen server.
Har du brug for at finde eller konvertere en farve først? Brug Farvevælgeren til at udtrække farver fra et billede, eller Farvekonverteren til at konvertere mellem HEX, RGB og HSL.
Ofte stillede spørgsmål
- Hvad er et godt kontrastforhold for tekst?
- For tekst i normal størrelse kræves et kontrastforhold på mindst 4,5:1 for at opfylde WCAG AA. For stor tekst (18pt eller 14pt fed og derover) er minimum 3:1. For det højeste tilgængelighedsniveau (WCAG AAA) kræver normal tekst mindst 7:1.
- Hvad er forskellen mellem WCAG AA og AAA?
- AA er det standard overensstemmelsesniveau, som de fleste websites og apps bør opfylde. AAA er det forbedrede niveau med strengere kontrastkrav, anbefalet til indhold hvor maksimal læsbarhed er afgørende, som offentlige eller sundhedsrelaterede websites.
- Hvad tæller som stor tekst i WCAG?
- Stor tekst defineres som 18 punkt (24px) eller større ved normal vægt, eller 14 punkt (ca. 18,66px) eller større ved fed. Stor tekst har lavere kontrastkrav, fordi dens størrelse gør den lettere at læse.
- Hvilke farveformater understøtter denne tjekker?
- Du kan indtaste farver i HEX (f.eks. #1E293B), RGB (f.eks. rgb(30, 41, 59)) eller HSL (f.eks. hsl(222, 33%, 17%)). Værktøjet registrerer formatet automatisk.
- Hvordan beregnes kontrastforholdet?
- Kontrastforholdet beregnes med WCAG 2.1-formlen: (L1 + 0,05) / (L2 + 0,05), hvor L1 er den relative luminans af den lysere farve og L2 er den relative luminans af den mørkere farve. Resultatet spænder fra 1:1 (ingen kontrast) til 21:1 (maksimal kontrast, sort på hvid).
- Virker dette værktøj på mobil?
- Ja. Kontrasttjekkeren virker på alle enheder med en moderne browser — computer, tablet eller telefon.
- Er dette værktøj gratis?
- Ja. ColourPicker.app er helt gratis at bruge, uden registrering.
- Kan jeg tjekke kontrast for UI-komponenter, ikke kun tekst?
- WCAG 2.1 kræver også et minimum kontrastforhold på 3:1 for meningsfulde UI-komponenter og grafiske objekter (succeskriterium 1.4.11). Du kan bruge denne tjekker til at verificere disse kombinationer også — forholdsberegningen er den samme.