Hva kreves i praksis?
UI-komponenter og meningsbærende grafikk skal ha minst 3:1 i kontrast mot tilstøtende farger — inkludert kanter, ikoner og fokusmarkering. Kravet gjelder sider som brukes i Norge, uavhengig av om du er offentlig virksomhet, butikk eller byrå som leverer nettsiden.
Vanlige feil og avvik
- Lys input-kant mot paper-bakgrunn under 3:1.
- Fokusring som nesten forsvinner i bakgrunnen.
- Ikoner som bærer mening i for lys moss/60.
Før og etter — kodeeksempler
Eksemplene er forenklet. Lim inn mønsteret, ikke nødvendigvis klassenavnene, i din egen kodebase.
Feil kode — bryter WCAG
Feltkanten og ikonet er for svake mot bakgrunnen. Fokus er fjernet uten erstatning.
Feil eksempel
<input class="border border-black/10 outline-none" aria-label="Søk">
<button class="text-moss/50 outline-none" aria-label="Lukk">
<svg><!-- x --></svg>
</button>Riktig kode — utbedret
Kant, ikon og fokusring holder minst 3:1. outline:none brukes bare sammen med synlig ring.
Riktig eksempel
<input class="border border-moss focus-visible:outline focus-visible:outline-2 focus-visible:outline-pine" aria-label="Søk">
<button class="text-moss focus-visible:outline focus-visible:outline-2 focus-visible:outline-pine" aria-label="Lukk">
<svg aria-hidden="true"><!-- x --></svg>
</button>Hvordan UUvakta tester dette
Axe dekker 1.4.11 delvis. UUvakta varsler der kontrastmotoren ser for svake kontroller, og rapporten minner om 3:1 for kanter og ikoner. Grafikk i canvas og komplekse tilstander bør sjekkes manuelt.