Kontrast (minimum)

Hvad kriteriet kræver

Tekst og billeder af tekst skal have et kontrastforhold på mindst 4,5:1 mod deres baggrund. Stor tekst — defineret som 18pt (24px) normalvægt eller 14pt (18,66px) fed — kræver kun 3:1. Forholdet beregnes ud fra forgrunds- og baggrundens relative lysstyrke. Logoer, brandnavne og rent dekorativ tekst er undtaget. Inaktive kontroller er også undtaget, men vær opmærksom: den undtagelse er snævrere, end designere normalt tror.

Sådan opfyldes det

• Kør alle tekst-på-baggrund-kombinationer gennem en kontrasttjekker (axe DevTools, WebAIM, Stark, Figma-plugins). Opnå minimum 4,5:1.
• For lysegrå pladsholdertekst i formularfelter: hæv den til mindst 4,5:1 mod feltets baggrund — pladsholdertekst er tekst.
• Gennemgå hero-sektioner med tekst henover billeder. Baggrunden varierer pixel for pixel, så kontrollér worst-case-området eller tilføj et mørkt overlay.
• For mørk tilstand: genberegn alle forhold — farvetokens, der består på hvid, fejler ofte på nærsort.
• For brandfarver, der fejler på hvid: mørk brandfarvenuancen kun for tekst; behold originalen til grafik.
• For knapper er det kontrasten mellem etiket og knapbaggrund, der gælder — ikke knap-mod-side-kontrasten.

Hyppige fejl

• Lysegrå hjælpetekst (#999 på #fff = 2,85:1) i formularfelter — fejler markant.
• Hvid tekst på en brandfarvet knap, hvor brandfarven er midmættet (orange, gulgrøn, teal).
• Hero-overskrifter placeret over fotografier uden overlay — kontrasten varierer over billedet og falder ofte under 3:1.
• Pladsholdertekst i samme farve som etiketten, men med mindre tykkelse, hvilket gør den til sidens lavest-kontrasterende element.
• „Inaktive“ eller „deaktiverede“ knapper med 2:1, hvilket er fint hvis de er rigtigt ikke-interaktive — men de er ofte stadig fokuserbare via tastatur, hvilket ophæver undtagelsen.
• Dark-mode-tokens, der spejler lys tilstand uden genberegning af forhold — #bbb på #222 er tæt på, men ikke helt overensstemmende.

Hvorfor det er vigtigt

1.4.3 er den hyppigst citerede enkeltfejl i WCAG-audits uden undtagelse. Lighthouse, axe, Stark og alle automatiserede værktøjer flagger det pålideligt, så det er også det billigste at fange. Rettelsen er normalt én ændring af et design-token, der kaskadeforsreder i hele systemet — foretag den én gang, test én gang, leverér. At springe den over er næsten altid en brand-mod-tilgængelighed-afvejning, der ender i en klage.