Denne vejledning henvender sig til medarbejdere i VIA og beskriver, hvordan du bruger værktøjet Contrast Checker til at tjekke kontrastforhold - bl.a. mellem tekstfarve og baggrundsfarve.
Tekst skal have tilstrækkelig kontrast ift. baggrundsfarver, så teksten kan opfattes af alle brugere, herunder farveblinde og svagtseende. Dette inkluderer tekst på billeder, baggrundsfarver, knapper og andre elementer såsom links. Læs om krav til kontrastforhold her.
For at tjekke, om kontrastforholdet er tilpas kan du bruge værktøjet Contrast Checker. Følg trinnene herunder:
- Tilgå Contrast Checker her.
- Hav det dokument eller den side åben, hvor du vil tjekke kontrastforholdet mellem elementer og hav Contrast Checker åbent i et minimeret vindue, så du stadig kan se de elementer, du vil tjekke kontrastforholdet mellem (som illustreret på billedet nedenfor).
- Vælg farven under Foreground Color.
- Vælg pipetten.
- Vælg den forgrundsfarve (tekstfarve), du vil tjekke.
- Gentag trin 3-5, men vælg farven under Background Color for at tjekke baggrundsfarven.
- Du skal tjekke om kontrastforholdet er godt nok under Normal Text eller Large Text og WCAG AA i Contrast Checker. Ifølge lov om webtilgængelighed er vi kun forpligtede til at leve op til WCAG AA og ikke WCAG AAA. Derfor må der gerne stå "Fail" ved WCAG AAA.
- Du skal tjekke under Normal Text, når den tekst, du tjekker er skriftstørrelse 14 eller mindre.
- Du skal tjekke under Large Text, når den tekst, du tjekker er skriftstørrelse 14 og fed eller større.
I eksemplet illustreret nedenfor er kontrastforholdet ikke stort nok.
Oversigt over funktioner i Contrast checker
- Skriv farvens HTML farvekode (hex farve)
- Vælg farve.
- Du kan enten vælge en af standardfarverne, bruge pipetten eller skrive RGB farvekoden.
- Brug slideren til at gøre farven mærkere eller lysere, så du kan se, hvornår kontrastforholdet er tilstrækkeligt.
- Byt om på forgrundsfarve/tekstfarve og baggrundsfarve.
- Se kontrastforholdet mellem forgrunds- og baggrundsfarven.
