Ikke-tekstlig kontrast

Hvad kriteriet kræver

Kontrastreglen i 1.4.3 dækker kun tekst; 1.4.11 udvider en svagere version (3:1 i stedet for 4,5:1) til to yderligere kategorier. For det første skal UI-komponenters visuelle indikatorer — det, der viser, at en knap er en knap, hvor fokusringen er, og hvor formularfeltets afgrænsning befinder sig — opnå 3:1 mod den tilstødende flade. For det andet skal de dele af meningsfuld grafik, som brugeren skal kunne identificere — diagramsøjler, ikoner der signalerer tilstand, indikatorprikker — opnå 3:1.

Sådan opfyldes det

• Giv hvert formularfelt en synlig ramme med mindst 3:1 mod sidens baggrund.
• Stil fokusindikatorer (:focus-visible-outline) med mindst 3:1 mod både komponenten og siden.
• For ghost/outline-knapper skal selve kanten opnå 3:1 mod sidens baggrund.
• For toggle-kontakter skal sporet og skyderen have 3:1 kontrast der, hvor de mødes.
• For ikoner, der bærer mening (info „i“, advarselstrekant, flueben), skal ikonets streger opnå 3:1 mod baggrunden.
• For diagramserier skal farverne, der bruges til at adskille søjler og linjer, stå 3:1 fra hinanden eller kombineres med mønstre eller teksturer.

Hyppige fejl

• Formularfelter uden synlig ramme eller med en #e5e5e5 på #fff-ramme på 1,3:1 — usynlige for svagtseende brugere.
• Standard browser-fokusomrids tilsidesat med outline: none uden erstatning.
• Ghost-knapper med hvid tekst på en transparent baggrund og en 1px grå ramme — knappen er reelt usynlig.
• Toggle-kontakter med en næsten usynlig skyder på et tæt matchende spor i „slukket“-tilstand.
• Statusikoner i hjørnet af et kort (grønt flueben, rødt kryds), hvor farven kun knap adskiller sig fra kortets baggrund.
• Cirkeldiagram med sektionsfarver, der kun har 2:1 mod hinanden — seende brugere ser stadig grænselinjerne, men kun lige knap; svagtseende ser én klump.

Hvorfor det er vigtigt

1.4.11 blev tilføjet i WCAG 2.1 og overrasker løbende teams — de fleste kontrasttjek dækker kun tekst. Formularfelts-rammer, fokusringe og ghost-knapper er de klassiske fejlmønstre. Værktøjer som axe og Stark tjekker nu ikke-tekstlig kontrast, men designere springer det stadig over i designfasen, fordi den gængse mentale model er „kontrast = tekstkontrast“. Rettelsen kræver normalt, at rammer gøres tykkere og grå nuancer mørkeres i designsystemet.