Beregn Farvekontrastforhold (WCAG AA/AAA)

Farvekontrastforholdet måler, hvor meget en tekstfarve skiller sig ud fra sin baggrund, udtrykt som et tal mellem 1:1 (identiske farver) og 21:1 (ren sort på ren hvid). WCAG 2.1 sætter minimumsværdier for, at tekst regnes som læsbar: 4,5:1 for normal tekst på AA-niveau, grænsen som de fleste tilgængelighedsgennemgange og lovkrav lægger til grund.

Formlen

Forholdet kommer fra hver farves relative luminans, ikke fra hvordan farven “ser ud” på skærmen. Fire trin omdanner en hex-kode til en luminansværdi:

1. Del hex-koden op i R, G, B og divider hver værdi med 255, så hver kanal havner mellem 0 og 1.
2. Linearisér hver kanal. Skærme oversætter ikke farveværdier til lysstyrke lineært, så hver kanal gammakorrigeres: er værdien ≤ 0,03928, divider med 12,92; ellers anvend ((værdi + 0,055) / 1,055) ^ 2,4.
3. Vægt og summér kanalerne til relativ luminans: L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Grøn vejer tungest, fordi øjet er mest følsomt over for den; blå vejer mindst.
4. Del den lyseste luminans med den mørkeste, begge plus 0,05: (L_lys + 0,05) / (L_mørk + 0,05).

Det sidste + 0,05 gør en forskel: det forhindrer forholdet i at skyde mod uendeligt, når en af farverne er tæt på sort, og det er grunden til, at ren sort på ren hvid stopper nøjagtigt ved 21:1 i stedet for et langt større tal.

Regneeksempel: #767676 på hvid

Dette grå-på-hvid-par dukker ofte op i WCAG-dokumentation, fordi det ligger lige på en grænseværdi, hvilket gør det til et godt eksempel at regne igennem i hånden.

Trin 1. #767676 i RGB er 118, 118, 118. Divideret med 255 giver det 0,4627 for hver kanal.

Trin 2. 0,4627 er over 0,03928, så der lineariseres med gammaformlen: ((0,4627 + 0,055) / 1,055) ^ 2,4 = 0,1810. Alle tre kanaler er ens her, så værdien gælder for R, G og B samtidig.

Trin 3. Luminans: L = 0,2126 × 0,1810 + 0,7152 × 0,1810 + 0,0722 × 0,1810 = 0,1810. Hvid har luminans 1,0 (hver kanal lineariseres til nøjagtig 1).

Trin 4. Forhold: (1,0 + 0,05) / (0,1810 + 0,05) = 1,05 / 0,2310 = 4,545, afrundet til 4,54:1.

Det lander lige over 4,5:1-grænsen for AA normal tekst, og lige over 4,5:1-grænsen for AAA stor tekst også, men et godt stykke under de 7:1, som AAA kræver for normal tekst. Én hex-værdi, tre forskellige udfald afhængigt af tekststørrelse og hvilket niveau man sigter efter.

Sådan klarer almindelige farvepar sig i praksis

Par	Forhold	AA Normal (4,5:1)	AAA Normal (7:1)	AA Stor (3:1)	AAA Stor (4,5:1)
#AAAAAA på #FFFFFF	2,32:1	Dumper	Dumper	Dumper	Dumper
#767676 på #FFFFFF	4,54:1	Består	Dumper	Består	Består
#2563EB på #FFFFFF	5,17:1	Består	Dumper	Består	Består
#333333 på #FFFFFF	12,63:1	Består	Består	Består	Består

To ting springer i øjnene i tabellen. For det første består en mellemmættet blå som #2563EB (en almindelig knap- og linkfarve) AA for brødtekst, men dumper helt på AAA, så et site, der sigter efter AAA til links, har brug for en mørkere nuance. For det andet dumper den populære lysegrå placeholder-tekst omkring #AAAAAA på samtlige fire grænser, inklusive 3:1-minimumet for stor tekst, hvilket forklarer, hvorfor “diskret” grå tekst på hvid er et af de mest almindelige fund i tilgængelighedsgennemgange.

Tjek dine egne farver

Indtast to hex-værdier nedenfor for at se det præcise forhold og hvilke WCAG-niveauer de består, direkte, uden upload eller tur til en server.

Farvekontrast-tjek

Gratis, ingen tilmelding, virker på alle enheder.

Åbn hele værktøjet

Almindelige fejl

Glemme at stor tekst har en lavere grænse. WCAG definerer “stor tekst” som 18pt (24px) i normal vægt, eller 14pt (18,66px) i fed og derover. En overskrift på 24px kræver kun 3:1, ikke 4,5:1, så et designsystem, der bruger samme kontrastregel på alle tekststørrelser, ender med at dumpe overskrifter, der allerede overholder kravet.

Teste tekstkontrast, men glemme UI-komponenter. WCAG 1.4.11 fastsætter et separat minimum på 3:1 for ikke-tekstuelle elementer som knapkanter, omrids på formularfelter og ikoner, der formidler betydning på egen hånd. En knap med perfekt 7:1 tekstkontrast, men en kant der smelter sammen med baggrunden, kan stadig dumpe en gennemgang.

Tjekke kontrast mod den forkerte baggrund. Tekst oven på et foto, en gradient eller et halvgennemsigtigt lag har ikke én baggrundsfarve, men mange. Forholdet gælder kun for det præcise punkt, der er målt; en gradient, der er lys foroven og mørk forneden, skal tjekkes i det værste punkt, ikke gennemsnittet.

Antage at brandfarver er undtaget. Et logo som ordmærke er undtaget kontrastkravene, men brødtekst og UI-tekst sat i en brandfarve er det ikke. Mange brandblå og brandrøde nuancer, der fungerer fint som logoaccent, består ikke 4,5:1, når de bruges som 16px afsnitstekst på hvid.

Ofte stillede spørgsmål

Hvad er forskellen på AA og AAA? AA er standarden, som de fleste lovpligtige tilgængelighedskrav (ADA i USA, EN 301 549 i EU) henviser til, og det, de fleste gennemgange tjekker op imod. AAA er strengere og rettet primært mod indhold til brugere med nedsat syn; WCAG selv påpeger, at AAA ikke er opnåeligt for alle typer indhold, så de fleste organisationer sigter efter AA bredt frem for AAA overalt.

Tager farvekontrastforholdet højde for farveblindhed? Nej. Kontrastforholdet måler luminans (lysstyrke), ikke farvetone, så det hjælper indirekte med mange former for farveblindhed, fordi det ikke afhænger af at kunne skelne bestemte farver. Men det erstatter ikke et separat farveblindhedstjek: to farver kan have fremragende kontrast og stadig være svære at skelne for en person med rød-grøn farveblindhed, hvis forskellen mellem dem mest ligger i farvetonen og ikke i lysheden.

Hvorfor giver ren sort på hvid nøjagtig 21:1 og ikke et rundere tal? Luminansen for sort er 0, og for hvid er den 1. Sættes disse værdier ind i forholdsformlen, giver det (1 + 0,05) / (0 + 0,05) = 1,05 / 0,05 = 21. Det er nøjagtig 21:1 på grund af, hvordan konstanten +0,05 er valgt, ikke et tilfælde eller en afrunding.

Kræver et mørkt tema separate kontroltjek? Ja. At udskifte en lys baggrund med en mørk bevarer ikke forholdet: hvid tekst på din brandblå og brandblå tekst på næsten sort er to forskellige luminanspar med to forskellige forhold. Hvert tema skal derfor igennem tjekkeren for sig selv, i stedet for at man antager, at resultatet fra det lyse tema stadig gælder.