Kontrastkontrol
Vælg tekstfarve og baggrund, så beregnes kontrastforholdet og prøves mod kravene i WCAG.
Kontrastforhold
16,69:1
Skalaen går fra 1:1 for to ens farver til 21:1 for sort mod hvidt.
Sådan ser det ud
Overskrift i stor tekst
Brødtekst i denne størrelse er det, der stiller de største krav til kontrasten, fordi bogstaverne er tynde.
Krav efter WCAG
- Brødtekst, AAUnder 18 punkt, eller under 14 punkt halvfed · 4,5:1Opfylder
- Brødtekst, AAAUnder 18 punkt, eller under 14 punkt halvfed · 7:1Opfylder
- Stor tekst, AAFra 18 punkt, eller 14 punkt halvfed · 3:1Opfylder
- Stor tekst, AAAFra 18 punkt, eller 14 punkt halvfed · 4,5:1Opfylder
- Grænseflade og grafik, AARammer, ikoner og andet, der bærer mening · 3:1Opfylder
Sådan virker det
Kontrastforholdet måler forskellen i relativ luminans mellem to farver. Det går fra 1:1, som er to ens farver, til 21:1, som er sort mod hvidt.
WCAG kræver mindst 4,5:1 for brødtekst på niveau AA og 7:1 på niveau AAA. For stor tekst – fra 18 punkt, eller 14 punkt halvfed – rækker 3:1 og 4,5:1.
Grænsefladekomponenter og grafik, der bærer mening, kræver 3:1 mod omgivelserne. Det gælder for eksempel rammen om et skrivefelt og ikoner, der ikke har tekst ved siden af sig.
Forholdet beregnes ud fra farvernes luminans, ikke ud fra hvor forskellige de ser ud. To farver med samme lyshed, men helt forskellig kulør, som rød (#ff0000) og grøn (#009400), får forholdet 1,00 og er ulæselige, selv om de ser forskellige ud.
Kravene er et gulv, ikke et mål. Tekst, der ligger lige præcis på 4,5:1, er stadig anstrengende at læse i sollys eller på en billig skærm.
Sådan regner værktøjet
Hver kanal deles med 255 og gøres lineær: værdier op til 0,04045 deles med 12,92, og større værdier v bliver ((v + 0,055) / 1,055) opløftet i 2,4. Den relative luminans er 0,2126 R + 0,7152 G + 0,0722 B, og forholdet er (L1 + 0,05) / (L2 + 0,05) med den lyseste farve som L1. Grænsen 0,04045 har stået i WCAG siden maj 2021; tidligere stod der 0,03928, og W3C skriver, at ændringen ikke har praktisk betydning. For farver i hex gør den slet ingen forskel, fordi ingen kanalværdi havner mellem grænserne: 10/255 er 0,0392, og 11/255 er 0,0431.
Eksempel
#767676 mod hvid: kanalen 118/255 = 0,463 bliver 0,181 efter lineariseringen, og fordi alle tre kanaler er ens, bliver luminansen også 0,181. Forholdet bliver (1 + 0,05) / (0,181 + 0,05) = 4,54, som opfylder AA for brødtekst. Et trin lysere, #777777, giver 4,478 og opfylder det ikke. Den lyseste grå, der opfylder AAA, 7:1, mod hvid er #595959 med 7,0047; næste trin, #5a5a5a, giver 6,897.
Ingen afrunding
W3C’s forklaring til succeskriterium 1.4.3 siger, at forholdet ikke må rundes af: 4,499:1 opfylder ikke 4,5:1. Værktøjet bedømmer på den uafrundede værdi og skærer tallet af i stedet for at runde det. #0080aa mod hvid giver 4,4986 og afvises for brødtekst. Afrundet havde der stået 4,50 ved siden af et underkendt resultat, så værktøjet viser 4,49:1, og #777777 vises som 4,47:1. Samme forklaring advarer om, at tynde skrifttyper kan gengives lysere end deres farve på grund af kantudjævning, så tekst, der opfylder kravet, alligevel kan have lav kontrast i praksis.
Kravet i Danmark
Webtilgængelighedsloven gælder som udgangspunkt alle myndigheders og offentligretlige organers websteder og mobilapplikationer. De anses for at opfylde lovens krav, hvis de følger den harmoniserede europæiske standard for tilgængelighed, og ifølge Digitaliseringsstyrelsens gennemgang kræver standardens punkt 9.1.4.3, at en webside opfylder WCAG 2.1’s succeskriterium 1.4.3 om kontrast. Værktøjet regner kun på helt dækkende hexfarver, uden gennemsigtighed og uden billede bagved.