Beräkna Färgkontrastförhållande (WCAG AA/AAA)
Färgkontrastförhållandet mäter hur mycket en textfärg sticker ut mot sin bakgrund, som ett tal mellan 1:1 (identiska färger) och 21:1 (ren svart på ren vit). WCAG 2.1 sätter minimivärden för när text räknas som läsbar: 4,5:1 för normal text på AA-nivå, gränsen de flesta tillgänglighetsgranskningar och lagkrav utgår från.
Formeln
Förhållandet bygger på varje färgs relativa luminans, inte på hur färgen “ser ut” på skärmen. Fyra steg omvandlar en hexkod till ett luminansvärde:
- Dela upp hexkoden i R, G, B och dividera varje värde med 255, så att varje kanal hamnar mellan 0 och 1.
- Linjärisera varje kanal. Skärmar översätter inte färgvärden till ljusstyrka linjärt, så varje kanal gammakorrigeras: är värdet ≤ 0,03928 delas det med 12,92, annars används
((värde + 0,055) / 1,055) ^ 2,4. - Vikta och summera kanalerna till relativ luminans:
L = 0,2126 × R + 0,7152 × G + 0,0722 × B. Grönt väger tyngst eftersom ögat är mest känsligt för det; blått väger lättast. - Dela den ljusaste luminansen med den mörkaste, båda plus 0,05:
(L_ljus + 0,05) / (L_mörk + 0,05).
Det sista + 0,05 fyller en funktion: det hindrar förhållandet från att skjuta mot oändligheten när en av färgerna närmar sig svart, och det är därför ren svart på ren vit landar exakt på 21:1 i stället för ett mycket större tal.
Räkneexempel: #767676 på vit
Det här grå-på-vitt-paret dyker ofta upp i WCAG:s dokumentation eftersom det ligger precis på en gräns, vilket gör det till ett bra exempel att räkna igenom för hand.
Steg 1. #767676 i RGB är 118, 118, 118. Delat med 255 ger det 0,4627 per kanal.
Steg 2. 0,4627 ligger över 0,03928, så linjärisera med gammaformeln: ((0,4627 + 0,055) / 1,055) ^ 2,4 = 0,1810. Alla tre kanaler är lika här, så värdet gäller för R, G och B samtidigt.
Steg 3. Luminans: L = 0,2126 × 0,1810 + 0,7152 × 0,1810 + 0,0722 × 0,1810 = 0,1810. Vitts luminans är 1,0 (varje kanal linjäriseras till exakt 1).
Steg 4. Förhållande: (1,0 + 0,05) / (0,1810 + 0,05) = 1,05 / 0,2310 = 4,545, avrundat till 4,54:1.
Det landar precis över 4,5:1-gränsen för AA vid normal text, och precis över 4,5:1-gränsen för AAA vid stor text också, men gott och väl under de 7:1 som AAA kräver för normal text. Ett enda hexvärde, tre olika utfall beroende på textstorlek och vilken nivå man siktar på.
Hur vanliga färgpar faktiskt klarar sig
| Par | Förhållande | AA normal (4,5:1) | AAA normal (7:1) | AA stor (3:1) | AAA stor (4,5:1) |
|---|---|---|---|---|---|
#AAAAAA på #FFFFFF | 2,32:1 | Underkänt | Underkänt | Underkänt | Underkänt |
#767676 på #FFFFFF | 4,54:1 | Godkänt | Underkänt | Godkänt | Godkänt |
#2563EB på #FFFFFF | 5,17:1 | Godkänt | Underkänt | Godkänt | Godkänt |
#333333 på #FFFFFF | 12,63:1 | Godkänt | Godkänt | Godkänt | Godkänt |
Två saker sticker ut i tabellen. För det första klarar en medelmättad blå som #2563EB (en vanlig knapp- och länkfärg) AA för brödtext men blir helt underkänd på AAA, så en sajt som siktar på AAA för länkar behöver en mörkare nyans. För det andra blir den populära ljusgrå placeholder-färgen runt #AAAAAA underkänd på alla gränser, inklusive minimikravet på 3:1 för stor text, vilket förklarar varför “diskret” grå text på vitt är ett av de vanligaste fynden i tillgänglighetsgranskningar.
Testa dina egna färger
Skriv in två hexvärden nedan för att se det exakta förhållandet och vilka WCAG-nivåer de klarar, direkt i webbläsaren, utan uppladdning eller serveranrop.
Flygande bäckasiner söka hwila på mjuka tuvor
Flygande bäckasiner söka hwila på mjuka tuvor
Vanliga misstag
Glömma att stor text har en lägre gräns. WCAG definierar “stor text” som 18pt (24px) normal vikt eller 14pt (18,66px) fet och uppåt. En rubrik på 24px behöver bara 3:1, inte 4,5:1, så ett designsystem som tillämpar samma kontrastregel på all textstorlek underkänner rubriker som redan uppfyller kraven.
Testa textkontrast men inte kontrasten i UI-komponenter. WCAG 1.4.11 sätter ett separat minimum på 3:1 för icke-textuella element som knappramar, konturer runt formulärfält och ikoner som förmedlar betydelse på egen hand. En knapp med perfekt 7:1 i textkontrast kan ändå underkännas i en granskning om kanten flyter ihop med bakgrunden.
Kontrollera kontrast mot fel bakgrund. Text ovanpå ett foto, en gradient eller ett halvtransparent lager har inte en enda bakgrundsfärg, utan många. Förhållandet gäller bara den exakta punkt som mätts; en gradient som är ljus upptill och mörk nedtill måste kontrolleras i den sämsta punkten, inte i genomsnittet.
Anta att varumärkesfärger är undantagna. En logotyp är undantagen kontrastkraven, men brödtext och UI-text i en varumärkesfärg är det inte. Många varumärkesblåa och varumärkesröda nyanser som fungerar bra som logoaccent klarar inte 4,5:1 när de används som 16px styckestext på vitt.
Vanliga frågor
Vad är skillnaden mellan AA och AAA? AA är standarden som de flesta lagkrav på tillgänglighet hänvisar till (ADA i USA, EN 301 549 i EU), och det är vad de flesta granskningar kontrollerar mot. AAA är strängare och riktar sig främst till innehåll avsett specifikt för användare med nedsatt syn; WCAG påpekar själva att AAA inte är uppnåeligt för all typ av innehåll, så de flesta organisationer siktar brett på AA i stället för AAA överallt.
Tar kontrastförhållandet hänsyn till färgblindhet? Nej. Kontrastförhållande mäter luminans (ljusstyrka), inte nyans, så det hjälper på köpet många former av färgblindhet genom att inte vara beroende av att kunna skilja specifika färger åt. Men det ersätter inte en kontroll för färgblindhet: två färger kan ha utmärkt kontrast och ändå vara svåra att skilja åt för någon med röd-grön färgblindhet om de främst skiljer sig i nyans och inte i ljushet.
Varför blir ren svart på vit exakt 21:1 och inte ett rundare tal?
Luminansen för svart är 0 och för vit är den 1. Sätter man in de värdena i förhållandeformeln blir resultatet (1 + 0,05) / (0 + 0,05) = 1,05 / 0,05 = 21. Det landar exakt på 21:1 på grund av hur konstanten +0,05 är vald, inte av en slump eller avrundning.
Behöver ett mörkt tema separata kontrastkontroller? Ja. Att byta en ljus bakgrund mot en mörk bevarar inte förhållandet: vit text på din varumärkesblå och varumärkesblå text på nästan svart är två olika luminanspar med två olika förhållanden, så varje tema måste gå igenom kontrollen för sig i stället för att man antar att resultatet från det ljusa läget fortfarande gäller.