Contrastcontrole
Kies een tekstkleur en een achtergrond, dan wordt de contrastverhouding berekend en aan de WCAG getoetst.
Contrastverhouding
16,69:1
De schaal loopt van 1:1 bij twee gelijke kleuren tot 21:1 bij zwart op wit.
Zo ziet het eruit
Kop in grote tekst
Lopende tekst in deze grootte stelt de hoogste eisen aan het contrast, omdat de letters dun zijn.
Eisen volgens de WCAG
- Lopende tekst, AAOnder 18 punt, of onder 14 punt halfvet · 4,5:1Voldoet
- Lopende tekst, AAAOnder 18 punt, of onder 14 punt halfvet · 7:1Voldoet
- Grote tekst, AAVanaf 18 punt, of 14 punt halfvet · 3:1Voldoet
- Grote tekst, AAAVanaf 18 punt, of 14 punt halfvet · 4,5:1Voldoet
- Bedieningselementen en grafiek, AARanden, pictogrammen en ander materiaal dat betekenis draagt · 3:1Voldoet
Zo werkt het
De contrastverhouding meet het verschil in relatieve luminantie tussen twee kleuren. Ze loopt van 1:1 bij twee gelijke kleuren tot 21:1 bij zwart op wit.
De WCAG vraagt voor lopende tekst minstens 4,5:1 op niveau AA en 7:1 op niveau AAA. Voor grote tekst – vanaf 18 punt of 14 punt halfvet – volstaan 3:1 en 4,5:1.
Bedieningselementen en grafiek die betekenis draagt, hebben 3:1 tegenover hun omgeving nodig. Dat geldt bijvoorbeeld voor de rand van een invoerveld en voor pictogrammen zonder tekst ernaast.
De verhouding wordt uit de luminantie van de kleuren berekend, niet uit hoe verschillend ze eruitzien. Twee kleuren met dezelfde lichtheid maar een heel andere tint, bijvoorbeeld rood (#ff0000) en groen (#009400), krijgen verhouding 1,00 en zijn onleesbaar, ook al zien ze er verschillend uit.
De eisen zijn een ondergrens, geen doel. Tekst die precies op 4,5:1 uitkomt, is in de zon of op een goedkoop scherm nog altijd vermoeiend om te lezen.
Zo rekent de tool
Elk kanaal wordt door 255 gedeeld en lineair gemaakt: waarden tot en met 0,04045 worden door 12,92 gedeeld, en grotere waarden v worden ((v + 0,055) / 1,055) tot de macht 2,4. De relatieve luminantie is 0,2126 R + 0,7152 G + 0,0722 B, en de verhouding is (L1 + 0,05) / (L2 + 0,05), met de lichtste kleur als L1. De grens 0,04045 staat sinds mei 2021 in de WCAG; daarvoor was het 0,03928, en volgens het W3C heeft die wijziging geen praktisch gevolg. Voor hexkleuren maakt het helemaal niets uit, omdat geen enkele kanaalwaarde ertussen valt: 10/255 is 0,0392 en 11/255 is 0,0431.
Rekenvoorbeeld
#767676 op wit: het kanaal 118/255 = 0,463 wordt na het lineair maken 0,181, en omdat alle drie de kanalen gelijk zijn, is de luminantie ook 0,181. De verhouding is (1 + 0,05) / (0,181 + 0,05) = 4,54, en dat voldoet aan AA voor lopende tekst. Een stap lichter, #777777, geeft 4,478 en voldoet niet. Het lichtste grijs dat op wit aan AAA voldoet, 7:1, is #595959 met 7,0047; de volgende stap, #5a5a5a, geeft 6,897.
Geen afronding
De uitleg van het W3C bij succescriterium 1.4.3 zegt dat de verhouding niet mag worden afgerond: 4,499:1 voldoet niet aan 4,5:1. De tool oordeelt op de onafgeronde waarde en kapt het getal af in plaats van het af te ronden. #0080aa op wit geeft 4,4986 en voldoet niet voor lopende tekst. Afgerond zou er 4,50 naast een afkeuring staan, dus de tool toont 4,49:1, en #777777 verschijnt als 4,47:1.
Voor Nederlandse overheidsinstanties heeft de grens ook een wettelijke kant. Het Besluit digitale toegankelijkheid overheid verplicht hen hun websites en apps toegankelijker te maken volgens een Europese norm die WCAG 2.1 op niveau A en AA voorschrijft, en succescriterium 1.4.3 hoort bij niveau AA. In een toegankelijkheidsverklaring melden ze in hoeverre hun site of app aan die eisen voldoet.
Grote tekst en dunne letters
De grens voor grote tekst wordt in punten opgegeven. Met 1 pt = 1,333 CSS-pixels is 18 punt ongeveer 24 pixels en 14 punt ongeveer 18,5 pixels, volgens dezelfde uitleg. Die waarschuwt ook dat dunne letters door anti-aliasing lichter kunnen worden weergegeven dan hun kleur, zodat tekst die aan de verhouding voldoet, in de praktijk toch weinig contrast kan hebben. De tool rekent alleen met volle hexkleuren, zonder transparantie en zonder afbeelding erachter.