Kleurcontrast

Lichtgrijs #999999 op wit heeft een contrastverhouding van 2.85:1, ver onder de 4.5:1 die WCAG 2.2 voor lopende tekst vraagt.

Waarom contrast telt

Tekst die bleek afsteekt tegen de achtergrond is moeilijk leesbaar voor slechtzienden, veel oudere lezers en iedereen die een telefoon in de zon gebruikt. WCAG 2.2 laat ‘bleek’ niet aan smaak over. Het meet de relatieve luminantie van beide kleuren, een getal van 0 voor zwart tot 1 voor wit, en vergelijkt ze met de contrastverhouding (L1 + 0.05) / (L2 + 0.05), waarbij L1 de lichtere kleur is. Het resultaat loopt van 1:1, een kleur op zichzelf, tot 21:1, zwart op wit. Bij kleurentheorie doorloop je de formule stap voor stap; hier gebruik je haar.

De vereiste getallen

Succescriterium 1.4.3 Contrast (minimum), niveau AA, vraagt minstens 4.5:1 voor normale tekst en 3:1 voor grote tekst, volgens WCAG minstens 18 punt of 14 punt vet. Criterium 1.4.6, niveau AAA, verhoogt dit naar 7:1 en 4.5:1. Criterium 1.4.11 Contrast van niet-tekstuele content vraagt 3:1 voor delen van bedieningselementen en afbeeldingen die mensen moeten zien, zoals een tekstveldrand of grafieklijnen. Logo's en tekst die puur decoratief is of bij een inactief bedieningselement hoort, zijn uitgezonderd.

Enkele waarden zijn het onthouden waard. Grijs #767676 geeft 4.54:1 op wit en wordt vaak genoemd als het lichtste neutrale grijs dat aan AA voldoet; #777777 geeft 4.48:1 en voldoet niet. Het donkerdere #595959 bereikt 7.00:1 en voldoet aan AAA. Verzadigde kleuren kunnen misleiden: zuiver rood #ff0000 op wit geeft maar 4.00:1, terwijl dieper rood #c01c28 6.11:1 bereikt. Placeholdertekst in formuliervelden gaat vaak mis doordat ontwerpers die bewust heel licht maken.

Kleuren in de praktijk controleren

Je hoeft de formule zelden met de hand uit te rekenen. Bij het inspecteren van een tekstelement toont de kleurkiezer in ontwikkelaarstools van grote browsers de contrastverhouding met de achtergrond, vaak met een lijn voor de AA- en AAA-grenzen. Twee gevallen vragen extra aandacht. Tekst op een foto of kleurverloop heeft geen enkele achtergrond, dus controleer tegen het lichtste deel eronder of zet er een effen vlak achter. Een site met een donker thema moet je tweemaal controleren, want een kleur die op wit voldoet kan op bijna-zwart falen: blauw #1a5fb4 geeft 6.29:1 op wit maar slechts 3.34:1 op zuiver zwart.

Nooit alleen kleur

Contrast tussen tekst en achtergrond is de helft van het verhaal. Criterium 1.4.1 Gebruik van kleur, niveau A, zegt dat kleur niet de enige manier mag zijn om informatie te tonen. Rood #c01c28 en blauw #1a5fb4 zijn beide goed leesbaar op wit, maar onderling is hun verhouding maar 1.03:1. In grijstinten of voor iemand die rood niet van blauw kan onderscheiden worden ze hetzelfde grijs. Een verplicht veld dat alleen een rood label heeft, of een link die alleen in kleur van de omringende tekst verschilt, vraagt dus een tweede aanwijzing: een woord, pictogram of onderstreping.