tigtools

Kontrasttjekker

Indtast en tekstfarve og en baggrundsfarve for at se WCAG-kontrastforholdet, hvilke niveauer der er opfyldt, og en live forhåndsvisning.

Kører i din browser Ingen tilmelding

Kontrastforhold

4.47:1

KravKrævetResultat
AA, normal tekst4.5:1Ikke godkendt
AA, stor tekst3:1Godkendt
AAA, normal tekst7:1Ikke godkendt
AAA, stor tekst4.5:1Ikke godkendt
UI-komponenter og grafik3:1Godkendt

Stor tekst betyder mindst 24px (18pt) normal eller 18.66px (14pt) fed.

Eksempel

Normal tekst ved 16px. Quizdeltagerne spiste jordbær med fløde.

Lille tekst ved 14px er sværere at læse med lav kontrast.

Stor tekst ved 24px

Fed tekst ved 18.66px (14pt)

Knap

Nærmeste godkendte tekstfarve

Mål
#767676 når 4.54:1 mod denne baggrund.

Transparent tekst blandes oven på baggrunden, inden der måles; en transparent baggrund blandes oven på hvid.

Sådan bruger du det

  1. Indtast tekstfarven (forgrunden) og baggrundsfarven som HEX, rgb(), hsl() eller et andet CSS-format, eller brug farvevælgerne.
  2. Læs kontrastforholdet og resultatet (bestået eller ikke bestået) for hvert WCAG-krav.
  3. Hvis et krav ikke er opfyldt, skal du vælge et mål og anvende den foreslåede farve, som bevarer farvetonen og kun ændrer lysheden.
  4. Brug “Byt om” til at tjekke den omvendte kombination, f.eks. lys tekst på en mørk knap.

Sådan fungerer det

Kontrastforholdet følger WCAG 2.2-definitionen: hver farves relative luminans beregnes ud fra dens sRGB-kanaler, og forholdet er (lysere + 0,05) ÷ (mørkere + 0,05). Det spænder fra 1:1 (identiske farver) til 21:1 (sort på hvidt).

Kontrollerede krav: succeskriterium 1.4.3 (AA) kræver 4,5:1 for almindelig tekst og 3:1 for stor tekst; 1.4.6 (AAA) kræver 7:1 og 4,5:1; 1.4.11 kræver 3:1 for brugergrænsefladedele og meningsfuld grafik som inputkanter og ikoner. Stor tekst er mindst 24px normal eller ca. 18,66px fed. WCAG tillader ikke oprunding, så 4,49:1 opfylder ikke AA, selvom det er tæt på; forholdet vist her er afkortet, ikke afrundet.

Forslaget bevarer tekstfarvenens farvetone og chroma i OKLCH og søger efter den nærmeste lyshed, mørkere eller lysere, der opfylder målet. Kontrastforhold er én del af læsbarheden: skriftvægt, størrelse og farvesynsforskelle betyder også noget, og WCAG 2.2 er den aktuelle W3C-anbefaling, som de fleste tilgængelighedslove henviser til.

Eksempler

Grå tekst, der næsten består

#777777 på hvid giver 4,48:1. Det opfylder kravene til stor tekst og UI-komponenter, men opfylder ikke AA for almindelig tekst. Den nærmeste grå, der opfylder kravene, er ca. #767676, som når 4,54:1.

Hvid tekst på en brandknap

Hvid på #ff8800 giver ca. 2.4:1, hvilket ikke engang opfylder 3:1-niveauet for stor tekst. De sædvanlige løsninger er at gøre orangefarven mørkere eller bruge mørk tekst i stedet; forslaget viser, hvor mørk tekstfarven skal være.

Tjek af en formularfeltkant

En lysegrå kant #cccccc på hvid er ca. 1.6:1. Ifølge kriterium 1.4.11 skal den kant, der identificerer et inputfelt, have 3:1, så der kræves noget omkring #949494 eller mørkere.

Ofte stillede spørgsmål

Hvilket kontrastforhold skal jeg bruge til WCAG AA?

4.5:1 for normal brødtekst, 3:1 for stor tekst (24px eller 18.66px fed) og 3:1 for UI-komponenter og meningsfuld grafik. AAA hæver kravet for tekst til 7:1 og for stor tekst til 4.5:1.

Skal logotekst eller tekst på deaktiverede knapper bestå?

Nej. WCAG undtager tekst i logoer og brandnavne, rent dekorativ tekst og tekst i inaktive (deaktiverede) UI-komponenter.

Hvorfor afviger mit resultat lidt fra et andet værktøj?

Nogle værktøjer afrunder forholdet til én decimal eller runder op. WCAG sammenligner den nøjagtige værdi, så dette værktøj afkorter til to decimaler. Små forskelle kan også skyldes farver angivet med alpha.

Hvad med den nye APCA-kontrastmetode?

APCA er en anden metode, der er foreslået til en fremtidig WCAG-version. Den er ikke en del af WCAG 2.2, som er det, dette værktøj måler, og som de gældende tilgængelighedsregler henviser til.

Privatliv

Farverne kontrolleres i din browser. Intet uploades eller gemmes.