Farvekontrastkontrol
Sørg for, at din tekst og UI overholder WCAG 2.1 kontrastkrav, en væsentlig del af EAA/EN 301 549-overholdelse. Indsæt farverne, forvis kombinationer og få klart godkendt eller afvist for normal tekst, stor tekst og UI-komponenter.
Color Contrast Checker
The quick brown fox jumps over the lazy dog
Contrast Ratio
8.67:1
Betroet af organisationer i hele Europa, der arbejder mod overholdelse af WCAG og EAA
Hvad er en kontrastkontrol og hvorfor bruge den?
Tilstrækkelig kontrast øger læsbarheden for alle, især for brugere med nedsat syn, farvesynsproblemer eller på skærme af lav kvalitet.
Kontroller 1.4.3 Kontrast (Minimum), 1.4.6 Kontrast (Forbedret) og 1.4.11 Kontrast for ikke-tekst for UI-komponenter og grafik.
Det Europæiske tilgængelighedsdirektiv henviser til EN 301 549, som igen refererer til WCAG, kontrast er en nøglekomponent i at opfylde forpligtelser.
Tilgængelige farvepaletter skaber robuste, læselige grænseflader, der fungerer i lyse/mørke temaer og på forskellige enheder.
WCAG 2.1 kontrastgrænser (hurtig reference)
Minimumsforhold: 4,5:1 (tekst under 24 px almindelig / 19 px fed).
Minimumsforhold: 3:1 (≥ 24 px almindelig eller ≥ 19 px fed).
Minimal kontrast mod tilstødende farver: 3:1 (fokusringe, formularfelter, ikoner etc.).
Forstå WCAG farvekontrast for webtilgængelighed
En farvekontrastkontroller er et væsentligt værktøj for webdesignere og udviklere til at sikre, at deres digitale indhold opfylder tilgængelighedsstandarder. WCAG farvekontrastretningslinjer hjælper med at skabe grænseflader, der er læselige og brugbare for alle, inklusive mennesker med synsnedsættelse.
Hvad er WCAG farvekontrast?
WCAG (Web Content Accessibility Guidelines) definerer specifikke kontrastforhold mellem tekst- og baggrundsfarver for at sikre læsbarhed. Kontrastkontrolleren beregner disse forhold ved hjælp af relative luminansværdier og giver et matematisk mål for, hvor skelnebare farver er fra hinanden. At opfylde disse standarder er afgørende for WCAG 2.1-overholdelse og refereres af regler som den europæiske tilgængelighedslov (EAA) gennem EN 301 549.
Hvordan fungerer en kontrastkontroller?
Vores WCAG farvekontrastkontroller analyserer luminansforskellen mellem forgrunds- (tekst-) og baggrundsfarver. Den beregner automatisk kontrastforholdet og sammenligner det med WCAG-succeskriterierne 4,5:1 for normal tekst (Level AA), 3:1 for stor tekst og 7:1 for forbedret kontrast (Level AAA). Denne øjeblikkelige feedback hjælper dig med at træffe informerede designbeslutninger uden manuelle beregninger.
Best practices for farvekontrast
Start med at teste dine brandfarver tidligt i designprocessen ved hjælp af en kontrastkontroller. Sørg for, at alle tekstelementer, knapper, formularfelter og ikoner opfylder minimumskravene. Stol ikke udelukkende på farve til at formidle information – brug også tekstlabels, ikoner eller mønstre. Regelmæssig test med en WCAG kontrastkontroller hjælper med at opretholde tilgængelighedsstandarder gennem hele dit projektforløb.
WCAG 2.2 minimumskontrast (officiel W3C): 4.5:1, 3:1 og ikke-tekst 3:1
De officielle WCAG 2.2-minimumskrav til kontrast, som bruges i tilgængelighedsrevisioner, er enkle: tekst i normal størrelse skal have mindst 4.5:1, stor tekst mindst 3:1, og ikke-tekstuelle UI-komponenter samt grafiske objekter mindst 3:1 mod tilstødende farver. Det er de kontrasttærskler, som WCAG 2.2 definerer, og som tilgængelighedstestværktøjer typisk validerer.
| Elementtype | WCAG-minimum | Succeskriterier |
|---|---|---|
| Tekst i normal størrelse | 4.5:1 | 1.4.3 (AA) |
| Stor tekst | 3:1 | 1.4.3 (AA) |
| Ikke-tekstuelle UI-komponenter og grafiske objekter | 3:1 | 1.4.11 (AA) |
WCAG 2.2 vs WCAG 2.1: kontrastregler
WCAG 2.2 bruger de samme grundlæggende kontrastforhold som WCAG 2.1, så dine bestået/ikke bestået-grænser ændres ikke. Det, der ændrer sig for stærke teams, er udførelsen: produkt-, design- og QA-teams, der formaliserer WCAG 2.2 i workflowet, går hurtigere fra scanresultater til godkendte rettelser, reducerer release-risiko og beskytter konverteringskritiske interfaces.
WCAG-kontrastkrav efter elementtype
WCAG-kontrastkrav varierer efter elementtype. Brødtekst, billedtekster og hjælpetekst vurderes som tekstkontrast. Knapper, formulargrænser, fokusindikatorer, ikoner og statusgrafik vurderes som ikke-tekstkontrast. For praktisk compliance bør du teste begge kategorier i design-QA, bekræfte igen før release og reteste efter enhver ændring af farvepalette eller komponent.
WCAG-farvekontrastkontrol
Uanset om dit team bruger color eller colour, er WCAG-reglerne de samme. Denne WCAG-farvekontrastkontrol vurderer forgrund og baggrund mod officielle W3C-tærskler og giver et tydeligt bestået/ikke bestået-resultat, som designere og udviklere kan handle på med det samme.
ADA-krav til farvekontrast og WCAG-mapping
I amerikanske tilgængelighedsprogrammer måles ADA-udbedring i praksis ofte mod WCAG-succeskriterier. Hvis din organisation har brug for en ADA-proces til kontrastkontrol, så brug WCAG-tærskler som målbar baseline og dokumentér evidens i designreviews, QA-godkendelse og release-dokumentation.
WCAG-kontrol vs kontrastkontrol
En kontrastkontrol verificerer ét kritisk område: læsbare farveforhold for tekst og interface-elementer. En fuld WCAG-kontrol dækker et bredere compliance-område, herunder tastaturstøtte, formularsemantik, labels, overskrifter og ARIA-adfærd. De stærkeste tilgængelighedsteams bruger begge: hurtige kontrastkontroller i det daglige arbejde og fuld WCAG-test af hele sitet før release.
Test kontrastkontrollen
Indtast for- og baggrundsfarver (HEX). Værktøjet beregner kontrastforholdet og viser godkendt/ikke godkendt for WCAG-niveauer. Resultater opdateres mens du skriver.
Ofte stillede spørgsmål
Ændres kontrastkrav i WCAG 2.1?
Kræver EAA WCAG-kontrast?
Hvad tælles som ”stor tekst”?
Gør kontrastkontroller til en del af din arbejdsgang
Kør kontrastkontroller under designgennemgange og kodegennemgange. Kombiner med automatiseret scanning for at finde problemer i stor skala.