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.
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.