Beregne Fargekontrastforhold (WCAG AA/AAA)
Fargekontrastforhold måler hvor mye en tekstfarge skiller seg ut fra bakgrunnen, uttrykt som et tall mellom 1:1 (identiske farger) og 21:1 (ren svart på ren hvit). WCAG 2.1 setter minimumsverdier for at tekst skal regnes som lesbar: 4,5:1 for normal tekst på AA-nivå, grensen som de fleste tilgjengelighetsrevisjoner og lovkrav legger til grunn.
Formelen
Forholdet kommer fra hver farges relative luminans, ikke fra hvordan fargen “ser ut” på skjermen. Fire steg omdanner en hex-kode til en luminansverdi:
- Del opp hex-koden i R, G, B og del hver verdi på 255, slik at hver kanal havner mellom 0 og 1.
- Lineariser hver kanal. Skjermer oversetter ikke fargeverdier til lysstyrke lineært, så hver kanal gammakorrigeres: er verdien ≤ 0,03928, del på 12,92; ellers bruk
((verdi + 0,055) / 1,055) ^ 2,4. - Vekt og summer kanalene til relativ luminans:
L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Grønt får størst vekt fordi øyet er mest følsomt for det; blått får minst. - Del den lyseste luminansen på den mørkeste, begge pluss 0,05:
(L_lys + 0,05) / (L_mørk + 0,05).
Det siste + 0,05 gjør en forskjell: det hindrer forholdet i å skyte mot uendelig når en av fargene nærmer seg svart, og det er grunnen til at ren svart på ren hvit stopper nøyaktig på 21:1 i stedet for et mye større tall.
Regneeksempel: #767676 på hvitt
Dette grå-på-hvitt-paret dukker ofte opp i WCAG-dokumentasjon fordi det ligger nøyaktig på en grenseverdi, noe som gjør det til et godt eksempel å regne gjennom for hånd.
Steg 1. #767676 i RGB er 118, 118, 118. Delt på 255 gir det 0,4627 for hver kanal.
Steg 2. 0,4627 er over 0,03928, så lineariser med gammaformelen: ((0,4627 + 0,055) / 1,055) ^ 2,4 = 0,1810. Alle tre kanalene er like her, så denne verdien gjelder for R, G og B samtidig.
Steg 3. Luminans: L = 0,2126 × 0,1810 + 0,7152 × 0,1810 + 0,0722 × 0,1810 = 0,1810. Hvitt har luminans 1,0 (hver kanal lineariseres til nøyaktig 1).
Steg 4. Forhold: (1,0 + 0,05) / (0,1810 + 0,05) = 1,05 / 0,2310 = 4,545, avrundet til 4,54:1.
Det havner rett over 4,5:1-grensen for AA normal tekst, og rett over 4,5:1-grensen for AAA stor tekst også, men godt under de 7:1 som AAA krever for normal tekst. Én hex-verdi, tre forskjellige utfall avhengig av tekststørrelse og hvilket nivå man sikter mot.
Hvordan vanlige fargepar faktisk gjør det
| 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 | Stryker | Stryker | Stryker | Stryker |
#767676 på #FFFFFF | 4,54:1 | Består | Stryker | Består | Består |
#2563EB på #FFFFFF | 5,17:1 | Består | Stryker | Består | Består |
#333333 på #FFFFFF | 12,63:1 | Består | Består | Består | Består |
To ting peker seg ut i tabellen. For det første består en middels mettet blåfarge som #2563EB (en vanlig knapp- og lenkefarge) AA for brødtekst, men stryker fullstendig på AAA, så et nettsted som sikter mot AAA for lenker trenger en mørkere tone. For det andre stryker den populære lysegrå placeholder-teksten rundt #AAAAAA på alle fire grensene, inkludert 3:1-minimumet for stor tekst, noe som forklarer hvorfor “diskré” grå tekst på hvitt er et av de vanligste funnene i tilgjengelighetsrevisjoner.
Sjekk dine egne farger
Skriv inn to hex-verdier under for å se nøyaktig forhold og hvilke WCAG-nivåer de består, direkte, uten opplasting eller tur til en server.
Høvdingens kjære squaw får litt pizza i Mexico by
Høvdingens kjære squaw får litt pizza i Mexico by
Vanlige feil
Glemme at stor tekst har en lavere grense. WCAG definerer “stor tekst” som 18pt (24px) i normal vekt, eller 14pt (18,66px) i fet skrift og over. En overskrift på 24px trenger bare 3:1, ikke 4,5:1, så et designsystem som bruker samme kontrastregel på alle tekststørrelser ender opp med å stryke overskrifter som allerede er innenfor kravet.
Teste tekstkontrast, men glemme UI-komponenter. WCAG 1.4.11 setter et eget minimum på 3:1 for elementer som ikke er tekst, som knapperammer, konturer på skjemafelt og ikoner som formidler betydning på egen hånd. En knapp med perfekt 7:1 tekstkontrast, men med en ramme som flyter sammen med bakgrunnen, kan likevel stryke i en revisjon.
Sjekke kontrast mot feil bakgrunn. Tekst over et bilde, en gradient eller et halvtransparent lag har ikke én bakgrunnsfarge, men mange. Forholdet gjelder bare for det eksakte punktet som ble målt; en gradient som er lys øverst og mørk nederst må sjekkes i det verste punktet, ikke gjennomsnittet.
Anta at merkevarefarger er unntatt. En logo som ordmerke er unntatt kontrastkravene, men brødtekst og UI-tekst satt i merkevarefargen er det ikke. Mange merkevareblå og merkevarerøde toner som fungerer fint som logoaksent, består ikke 4,5:1 når de brukes som 16px avsnittstekst på hvitt.
Ofte stilte spørsmål
Hva er forskjellen på AA og AAA? AA er standarden de fleste lovpålagte tilgjengelighetskrav (ADA i USA, EN 301 549 i EU) viser til, og det de fleste revisjoner sjekker mot. AAA er strengere og rettet først og fremst mot innhold laget for brukere med nedsatt syn; WCAG selv påpeker at AAA ikke er oppnåelig for alle typer innhold, så de fleste organisasjoner sikter mot AA gjennomgående fremfor AAA overalt.
Tar fargekontrastforholdet hensyn til fargeblindhet? Nei. Kontrastforholdet måler luminans (lysstyrke), ikke fargetone, så det hjelper indirekte mange former for fargeblindhet ved at det ikke er avhengig av å skille bestemte farger. Men det erstatter ikke en egen sjekk for fargeblindhet: to farger kan ha utmerket kontrast og likevel være vanskelige å skille for noen med rød-grønn fargeblindhet, hvis forskjellen mellom dem stort sett ligger i fargetonen og ikke lysheten.
Hvorfor blir ren svart på hvit nøyaktig 21:1 og ikke et rundere tall?
Luminansen for svart er 0, og for hvit er den 1. Settes disse verdiene inn i forholdsformelen blir det (1 + 0,05) / (0 + 0,05) = 1,05 / 0,05 = 21. Det er nøyaktig 21:1 på grunn av hvordan konstanten +0,05 er valgt, ikke en tilfeldighet eller en avrunding.
Trenger et mørkt tema separate kontrastsjekker? Ja. Å bytte ut en lys bakgrunn med en mørk bevarer ikke forholdet: hvit tekst på merkevareblått og merkevareblå tekst på nesten svart er to forskjellige luminanspar med to forskjellige forhold. Hvert tema trenger derfor sin egen gjennomgang i sjekkeren, i stedet for å anta at resultatet fra lys modus fortsatt gjelder.