Kontrastforhold
Se også: color contrast
Luminansforholdet mellem forgrundstext og baggrund på en skala fra 1:1 til 21:1. WCAG 2.x kræver 4,5:1 for normal tekst og 3:1 for stor tekst (≥18pt eller 14pt fed) på niveau AA.
Kontrastforholdet måler den opfattelsesmæssige forskel i luminans mellem to farver — typisk tekst og dens baggrund. Skalaen løber fra 1:1 (intet kontrast overhovedet — hvid på hvid) til 21:1 (rent sort på rent hvid). WCAG definerer minimumsforhold for tekstlæsbarhed.
WCAG-tærsklerne
WCAG 2.x-succeskriterium 1.4.3 (Kontrastminimum, niveau AA) og 1.4.6 (Forbedret kontrast, niveau AAA) fastsætter disse minimumsniveauer:
| Teksttype | AA | AAA |
|---|---|---|
| Normal tekst (< 18pt eller < 14pt fed) | 4,5:1 | 7:1 |
| Stor tekst (≥ 18pt eller ≥ 14pt fed) | 3:1 | 4,5:1 |
| Grafiske objekter + UI-komponenter (1.4.11) | 3:1 | — |
WCAG 2.x måler kontrast med WCAG-formlen (et luminansbaseret forhold). WCAG 3 undersøger en perceptionsmæssigt ensartet erstatning (“APCA” — Accessible Perceptual Contrast Algorithm), som opfører sig anderledes ved meget mørke eller meget lyse baggrunde; APCA er endnu ikke normativ.
Hvad der overses
Kontrast er en af de få WCAG-regler, et værktøj kan registrere med sikkerhed, så automatiserede scannere opdager de fleste rene tekstfejl over baggrund. Hvad der stadig slipper igennem:
- Pladsholdertekst i inputfelter. Ofte #999 eller lysere på hvid —
bestås ikke på AA-niveau. Designere bruger kontrastsvage pladsholdere for at
skelne dem fra udfyldte værdier, men den bedste praksis er at bruge
en separat
<label>over feltet og en pladsholder med tilstrækkelig kontrast (eller ingen pladsholder overhovedet). - Hover- og fokustilstande. En knap med tilstrækkelig standardkontrast kan fejle ved hover (f.eks. en lysegrå hover-tilstand på hvid). Gennemgå interaktive elementer i alle visuelle tilstande.
- Deaktiverede kontroller. Deaktiverede kontroller er formelt undtaget fra
AA-kontrast, men kun at gøre dem grå via lav kontrast efterlader
brugere med farvesynsnedsættelse uden mulighed for at vide, at kontrollen
er deaktiveret. Kombiner farve med et andet signal — et ikon, en
etiketændring eller
aria-disabled, så skærmlæsere annoncerer det. - Tekst over billeder og gradienter. Hero-overlays, hvor den samme tekst passerer over både et lyst og et mørkt område af baggrundsbilledet, fejler ofte i det lysere område.
- Ikoner brugt som eneste etiket. Et 24-pixel-ikon uden tekst har brug for 3:1 mod sin baggrund (1.4.11), og ikonets meningsfulde pixels — konturstrøgene — er det, der måles.
Operationel testning
Tre arbejdsgange reducerer kontrastfejl tidligt:
- Linting i designfasen. Stark, Able og Adobe XD’s tilgængeligheds-checker scorer kontrast inde i designværktøjet. Ret det, inden koden skrives.
- Tokeniserede farvepaletter. Definer hvert tekst/baggrunds-par som et token, hvis kontrast kontrolleres én gang. Forbyd ad hoc-farveværdier på tekstbærende komponenter.
- Automatiserede CI-kontroller. axe-core, Pa11y eller Lighthouse fejler builds ved kontrastovertrædelser. Billigt at tilføje, dyrt at springe over.
Over minimumsgrænsen
4,5:1 er et minimum, ikke et æstetisk mål. Brugere med mild farvesynsnedsættelse, aldersrelateret synsnedsættelse eller lav-kvalitetsskærme foretrækker 7:1 eller højere for brødtekst. Et websted, der akkurat består AA på hvert element, opleves generelt som kontrastsvagt selv af brugere uden formelle funktionsnedsættelser.