Kontrastsjekk
Velg tekstfarge og bakgrunn, så regnes kontrastforholdet ut og prøves mot kravene i WCAG.
Kontrastforhold
16,69:1
Skalaen går fra 1:1 for to like farger til 21:1 for svart mot hvitt.
Slik ser det ut
Overskrift i stor tekst
Brødtekst i denne størrelsen er det som stiller størst krav til kontrasten, fordi bokstavene er tynne.
Krav etter WCAG
- Brødtekst, AAUnder 18 punkt, eller under 14 punkt halvfet · 4,5:1Oppfyller
- Brødtekst, AAAUnder 18 punkt, eller under 14 punkt halvfet · 7:1Oppfyller
- Stor tekst, AAFra 18 punkt, eller 14 punkt halvfet · 3:1Oppfyller
- Stor tekst, AAAFra 18 punkt, eller 14 punkt halvfet · 4,5:1Oppfyller
- Grensesnitt og grafikk, AARammer, ikoner og annet som bærer mening · 3:1Oppfyller
Slik fungerer det
Kontrastforholdet måler forskjellen i relativ luminans mellom to farger. Det går fra 1:1, som er to like farger, til 21:1, som er svart mot hvitt.
WCAG krever minst 4,5:1 for brødtekst på nivå AA, og 7:1 på nivå AAA. For stor tekst – fra 18 punkt, eller 14 punkt halvfet – holder 3:1 og 4,5:1.
Grensesnittkomponenter og grafikk som bærer mening, trenger 3:1 mot omgivelsene. Det gjelder for eksempel rammen rundt et skrivefelt og ikoner som ikke har tekst ved siden av seg.
Forholdet regnes ut fra luminansen til fargene, ikke fra hvor ulike de ser ut. To farger med samme lyshet, men helt ulik kulør, som rødt (#ff0000) og grønt (#009400), får forholdet 1,00 og er uleselige selv om de ser ulike ut.
Kravene er et gulv, ikke et mål. Tekst som ligger akkurat på 4,5:1, er fortsatt anstrengende å lese i sollys eller på en billig skjerm.
Slik regner verktøyet
Hver kanal deles på 255 og gjøres lineær: verdier opp til 0,040 45 deles på 12,92, og større verdier v blir ((v + 0,055) / 1,055) opphøyd i 2,4. Den relative luminansen er 0,2126 R + 0,7152 G + 0,0722 B, og forholdet er (L1 + 0,05) / (L2 + 0,05) med den lyseste fargen som L1. Grensen 0,040 45 har stått i WCAG siden mai 2021; tidligere sto det 0,039 28, og W3C skriver at endringen ikke har noen praktisk betydning. For farger i heks gjør den ingen forskjell i det hele tatt, fordi ingen kanalverdi havner mellom grensene: 10/255 er 0,0392 og 11/255 er 0,0431.
Eksempel
#767676 mot hvitt: kanalen 118/255 = 0,463 blir 0,181 etter lineariseringen, og fordi alle tre kanalene er like, blir luminansen også 0,181. Forholdet blir (1 + 0,05) / (0,181 + 0,05) = 4,54, som oppfyller AA for brødtekst. Ett steg lysere, #777777, gir 4,478 og oppfyller det ikke. Den lyseste grå som oppfyller AAA, 7:1, mot hvitt er #595959 med 7,0047; neste steg, #5a5a5a, gir 6,897.
Ingen avrunding
W3Cs forklaring til suksesskriteriet 1.4.3 sier at forholdet ikke skal rundes av: 4,499:1 oppfyller ikke 4,5:1. Verktøyet vurderer den uavrundede verdien og kutter tallet i stedet for å runde det av. #0080aa mot hvitt gir 4,4986 og underkjennes for brødtekst. Avrundet ville det stått 4,50 ved siden av et underkjent resultat, så verktøyet viser 4,49:1, og #777777 vises som 4,47:1.
Stor tekst og tilsynets praksis
Grensen for stor tekst oppgis i punkter. Med 1 pt = 1,333 CSS-piksler svarer 18 punkter til omtrent 24 piksler og 14 punkter til omtrent 18,5 piksler, ifølge den samme forklaringen, som også advarer mot at tynne skrifttyper kan gjengis lysere enn fargen sin på grunn av kantutjevning. Verktøyet regner bare på heldekkende heksfarger, uten gjennomsiktighet og uten bilde bak.
Uu-tilsynet tester vanligvis tekst mot bakgrunnen i tekstens standardtilstand. Ved graderte farger gjelder punktet med den svakeste kontrasten, og i apper krever tilsynet 4,5:1 for all tekst, fordi skriftstørrelsen der ikke kan måles pålitelig. En egen høykontrastversjon godtar tilsynet ikke som løsning: kravet må være oppfylt i vanlig visning.