Kontrastkontroll
Välj textfärg och bakgrund, så räknas kontrastkvoten ut och prövas mot kraven i WCAG.
Kontrastkvot
16,69:1
Skalan går från 1:1 för två identiska färger till 21:1 för svart mot vitt.
Så ser det ut
Rubrik i stor text
Brödtext i den här storleken är det som ställer högst krav på kontrasten, eftersom bokstäverna är tunna.
Krav enligt WCAG
- Brödtext, AAUnder 18 punkter, eller under 14 punkter fet · 4,5:1Klarar
- Brödtext, AAAUnder 18 punkter, eller under 14 punkter fet · 7:1Klarar
- Stor text, AAFrån 18 punkter, eller 14 punkter fet · 3:1Klarar
- Stor text, AAAFrån 18 punkter, eller 14 punkter fet · 4,5:1Klarar
- Gränssnitt och grafik, AARamar, ikoner och annat som bär betydelse · 3:1Klarar
Så fungerar det
Kontrastkvoten mäter skillnaden i relativ luminans mellan två färger. Den går från 1:1, som är två identiska färger, till 21:1, som är svart mot vitt.
WCAG kräver minst 4,5:1 för brödtext på nivå AA, och 7:1 på nivå AAA. För stor text – från 18 punkter, eller 14 punkter fet – räcker 3:1 respektive 4,5:1.
Gränssnittskomponenter och grafik som bär betydelse behöver 3:1 mot sin omgivning. Det gäller till exempel ramen runt ett inmatningsfält och ikoner som inte har någon text bredvid sig.
Kvoten räknas på färgernas luminans, inte på hur olika de ser ut. Två färger med samma ljushet men helt olika nyans, som rött (#ff0000) och grönt (#009400), får kvoten 1,00 och är oläsliga trots att de ser olika ut.
Kraven är en golvnivå, inte ett mål. Text som ligger precis på 4,5:1 är fortfarande ansträngande att läsa i solljus eller på en billig skärm.
Så räknar verktyget
Varje kanal delas med 255 och görs linjär: värden upp till 0,04045 delas med 12,92, och större värden v blir ((v + 0,055) / 1,055) upphöjt till 2,4. Den relativa luminansen är 0,2126 R + 0,7152 G + 0,0722 B, och kvoten är (L1 + 0,05) / (L2 + 0,05) med den ljusare färgen som L1. Gränsen 0,04045 står i WCAG sedan maj 2021; tidigare stod 0,03928, och W3C skriver att bytet saknar praktisk betydelse. För färger i hex gör det ingen skillnad alls, eftersom inget kanalvärde hamnar mellan gränserna: 10/255 är 0,0392 och 11/255 är 0,0431.
Exempel
#767676 mot vitt: kanalen 118/255 = 0,463 blir 0,181 efter linjäriseringen, och eftersom alla tre kanalerna är lika blir luminansen också 0,181. Kvoten blir (1 + 0,05) / (0,181 + 0,05) = 4,54, som klarar AA för brödtext. Ett steg ljusare, #777777, ger 4,478 och klarar det inte. Den ljusaste grå som klarar AAA, 7:1, mot vitt är #595959 med 7,0047; nästa steg, #5a5a5a, ger 6,897.
Ingen avrundning
W3C:s förklaring till kriteriet 1.4.3 säger att kvoten inte ska avrundas: 4,499:1 klarar inte 4,5:1. Verktyget bedömer på det oavrundade värdet och kortar av talet i stället för att avrunda det. #0080aa mot vitt ger 4,4986 och underkänns för brödtext. Avrundat hade det stått 4,50 bredvid ett underkänt resultat, så verktyget visar 4,49:1, och #777777 visas som 4,47:1.
Stor text och tunna typsnitt
Gränsen för stor text anges i punkter. Med 1 pt = 1,333 CSS-pixlar motsvarar 18 punkter ungefär 24 pixlar och 14 punkter ungefär 18,5 pixlar, enligt samma förklaring. Den varnar också för att tunna typsnitt kan återges ljusare än sin färg på grund av kantutjämning, så att text som klarar kvoten ändå får låg kontrast i praktiken. Verktyget räknar bara på heltäckande hexfärger, utan genomskinlighet och utan bild bakom.