Kontrastcheck

Kontrastcheck

Gratis WCAG-kontrastcheck. Indtast en tekst- og baggrundsfarve og få kontrastforholdet, AA/AAA-resultater og den nærmeste farve, der består.

Tekstfarve

Baggrundsfarve

Kontrastforhold

–

WCAG 2.2-resultater

	AA	AAA
Normal tekst
Stor tekst
UI-komponenter og grafik		–

Eksempel

Normal tekst (16 px). Quizdeltagerne spiste jordbær med fløde, mens cirkusklovnen Walther spillede på xylofon.

Stor tekst (24 px)

Stor fed tekst (18,66 px fed)

Knap

Forslag

Mål

Nærmeste tekstfarve, der består

–

Nærmeste baggrundsfarve, der består

–

Sådan bruger du kontrastchecken

Angiv Tekstfarve og Baggrundsfarve. Brug farveprøverne, eller skriv en vilkårlig CSS-værdi i felterne: en HEX-kode som #595959, rgb(89 89 89), hsl(0 0% 35%) eller et navn som navy.
Kontrastforhold opdateres, mens du skriver, fra 1:1 (ingen kontrast) til 21:1 (sort på hvid).
Tabellen WCAG 2.2-resultater viser Bestået eller Ikke bestået for Normal tekst, Stor tekst og UI-komponenter og grafik på niveauerne AA og AAA.
Se på Eksempel: det viser normal tekst, stor tekst, stor fed tekst, en knapkontur og et ikon i dine to farver.
Hvis et niveau ikke består, vælger du et Mål under Forslag. Værktøjet foreslår Nærmeste tekstfarve, der består og Nærmeste baggrundsfarve, der består. Klik på Brug for at anvende en af dem. Byt om på farverne bytter tekst og baggrund.

Alt beregnes i din browser. Intet, du indtaster, sendes til en server.

Sådan beregnes kontrastforholdet

WCAG 2.x definerer forholdet som (L1 + 0,05) / (L2 + 0,05), hvor L1 er den relative luminans for den lyseste farve og L2 for den mørkeste. Relativ luminans beregnes ud fra lineariserede sRGB-kanaler: hver kanal afkodes med sRGB-overføringskurven, derefter er L = 0,2126 R + 0,7152 G + 0,0722 B. Grøn vejer tungest, fordi vores øjne er mest følsomme over for den, og derfor ser en ren grøn meget lysere ud end en ren blå af samme »styrke«.

Forholdet rundes aldrig op. #777777 på hvid giver cirka 4,48:1 og består ikke AA for normal tekst, selv om det ligner »4,5«. Værktøjet afkorter den viste værdi til to decimaler, så det, du ser, er det, WCAG tjekker.

Hvis tekstfarven er delvist gennemsigtig (for eksempel rgb(0 0 0 / 60%)), blandes den først med baggrunden, som browseren ville tegne den. Gennemsigtighed i baggrundsfarven ignoreres, fordi man ikke ved, hvad der ligger bag siden.

WCAG-niveauerne i overblik

Indhold	AA	AAA
Normal tekst	4,5:1	7:1
Stor tekst (24 px, eller 18,66 px fed)	3:1	4,5:1
UI-komponenter og meningsfuld grafik	3:1	–

»Stor tekst« betyder mindst 18 pt (24 CSS-pixel) eller 14 pt fed (cirka 18,66 px). Logoer og rent dekorativ tekst har intet krav. Reglen om 3:1 for grænsefladekomponenter (succeskriterium 1.4.11) gælder for kanter på inputfelter og knapper, fokusmarkeringer, ikoner og diagramlinjer, som brugerne skal kunne se.

Sådan fungerer forslagene

De foreslåede farver bevarer farvetone og kroma fra din farve i OKLCH-rummet og ændrer kun lysstyrken, mørkere eller lysere, indtil målforholdet er nået. Værktøjet vælger derefter den af de to retninger, der visuelt ligger tættest på din oprindelige farve, målt i OKLab. Resultatet kontrolleres igen efter afrunding til en HEX-kode, så det virkelig består. Hvis ingen lysstyrke kan nå målet (for eksempel 7:1 mod en mellemgrå), siger værktøjet det.

Om APCA

APCA (Accessible Perceptual Contrast Algorithm) er en nyere kontrastmodel, som overvejes til en fremtidig WCAG 3. Den tager højde for skriftvægt, størrelse og polaritet (mørkt på lyst i forhold til lyst på mørkt). Den er stadig et udkast og ikke et lovkrav eller normativt krav, så værktøjet rapporterer WCAG 2.x-resultater, som fortsat er referencen for den europæiske tilgængelighedsstandard EN 301 549, Section 508 og de fleste love.

Ofte stillede spørgsmål

Hvilket kontrastforhold skal jeg bruge til brødtekst?

Mindst 4,5:1 for niveau AA, som er det niveau, de fleste love og politikker kræver. Sigt efter 7:1 (AAA) til længere læsning eller til brugere med nedsat syn.

Består hvid tekst på min virksomhedsfarve?

Angiv hvid som tekstfarve og din virksomhedsfarve som baggrund. Mange blå, orange og grønne mellemtoner når kun 3:1: det er fint til store overskrifter og knapper med store tekster, men ikke til lille tekst. Brug den foreslåede baggrundsfarve, hvis du har brug for AA til normal tekst.

Hvorfor ændrer rækkefølgen af farverne ikke forholdet?

Formlen dividerer altid den lyseste luminans med den mørkeste, så mørkt på lyst og lyst på mørkt giver samme forhold. Den oplevede kontrast kan stadig afvige lidt, og det er et af de problemer, APCA forsøger at løse.

Er 4,49:1 tæt nok på til at bestå?

Nej. WCAG’s tærskler er strenge minimumskrav: 4,49:1 består ikke AA for normal tekst. Brug forslaget for at få en farve, der faktisk består.

Virker kontrastchecken til pladsholdertekst eller deaktiveret tekst?

Pladsholdertekst skal opfylde det samme minimum på 4,5:1, når den formidler information. Deaktiverede kontroller er undtaget fra kontrastkrav, men læselige deaktiverede tilstande hjælper alligevel brugerne.