Lysegrå tekst på en hvid baggrund kan se elegant og minimalistisk ud med et blik – og være fuldstændig ulæselig for brugere med synshandicap, stærkt sollys på skærmen eller blot almindelig anstrengelse af øjnene i slutningen af ​​en arbejdsdag. Farvekontrast er et af de mest "tekniske" kriterier for tilgængelighed - der er nøjagtige tal, der skal opfyldes - men det er også et af de nemmeste at teste og rette på forhånd.

Kort sagt – hvad denne vejledning dækker

  1. Hvilke forhold kræver WCAG
  2. Hvorfor tillades stor tekst mindre kontrast
  3. How to check a contrast ratio in practice
  4. How to choose an accessible color palette in advance

Hvilke forhold WCAG kræver

WCAG definerer et kontrastforhold som et tal mellem 1:1 (ingen kontrast overhovedet - identisk farve) og 21:1 (den maksimalt mulige kontrast - ren sort på ren hvid). På niveau AA (det obligatoriske niveau de fleste steder, inklusive Israel), er kravet et forhold på mindst 4,5:1 mellem almindelig tekst og baggrunden bag. På det strengere AAA-niveau stiger kravet til 7:1.

Hvorfor er stor tekst tilladt mindre kontrast

Stor tekst forbliver læsbar selv med lavere kontrast, så WCAG sætter den til en lettere tærskel: 3:1 på niveau AA (i stedet for 4,5:1) og 4,5:1 på niveau AAA (i stedet for 7:1). "Stor tekst" er defineret som tekst på 18 punkter eller større (ca. 24 px), eller 14 punkter eller større (ca. 18,7 px), hvis den er fed. Store overskrifter har for eksempel "råd" til lidt lavere kontrast end et almindeligt brødtekstafsnit og opfylder stadig kravet.

Illustrativt diagram Sammenligning af kontrastforhold Tre tekst-på-baggrund-eksempler med forskellige kontrastforhold Kontrastforhold mellem tekst og baggrund Eksempeltekst 1.8:1 — ✕ mislykkes Eksempeltekst 7.1:1 — ✓ opfylder også AAA Eksempeltekst 5.4:1 — ✓ opfylder niveau AA Almindelig tekst: mindst 4,5:1 · Stor tekst (24px+ eller 18,7px fed): mindst 3:1 Værktøjer som WebAIM Contrast Checker giver dig det nøjagtige forhold, før du færdiggør en farvepalet
Tre eksempler på tekst-på-baggrund: for lavt forhold (1,8:1) fejler selv det grundlæggende niveau; de to andre nøgletal opfylder henholdsvis AA- og AAA-kravene.

Sådan kontrollerer du et kontrastforhold i praksis

Der er ingen grund til at beregne det manuelt – gratis værktøjer som WebAIM Contrast Checker lader dig indtaste tekst- og baggrundsfarvekoderne og straks få det nøjagtige forhold og en bestået/ikke-bestået-score for hvert niveau. Det er værd at tjekke ikke kun tekst på en solid baggrund, men også tekst over baggrundsbilleder eller gradienter - hvor kontrasten kan variere mellem forskellige områder af det samme billede, så det er bedst at teste det mest "problematiske" sted.

💡 Praktisk tip

Ikke kun tekst: det samme kontrastkrav (ved en lettere tærskel, 3:1) gælder også for grafiske brugergrænsefladekomponenter som formfeltkonturer, funktionelle ikoner og knapkanter – ikke kun for bogstaver.

Sådan vælger du en tilgængelig farvepalet på forhånd

Den mest effektive tilgang er at kontrollere kontrasten på skabelondesignstadiet, ikke i hvert dokument separat. Når du vælger mærkefarver til overskrifter, brødtekst og links, er det værd at bekræfte på forhånd, at hver tekst-baggrundskombination, du rent faktisk bruger, opfylder mindst 4,5:1. På denne måde "arver" hvert nyt dokument, der oprettes fra skabelonen, automatisk den rigtige kontrast, i stedet for at kontrollere hvert dokument separat, efter at det allerede er skrevet.

Vil du vide, om dine dokumenter opfylder kontrastkravene?

Vores værktøj kontrollerer farvekontrasten som en del af den automatiske scanning af hver PDF-fil på dit websted.

Scan dit websted gratis ←