Hoe zorg je voor goed kleurcontrast?
Kleurcontrast gaat over het contrast tussen kleuren. En hoe goed het onderscheid tussen kleuren is. Vooral tussen een tekst op de voorgrond ten opzichte van kleur op de achtergrond, ook op afstand. En ook als je heel kleine letters gebruikt.
Uit de WebAIM report 2024 bleek dat bij 81% van alle websites wereldwijd kleurcontrast een probleem is. Dat hoeft niet zo te zijn bij jouw websites als je onderstaande tips volgt.
Denk: zwart op geel gaat goed, lichtroze op lichtgeel niet. Zorg je voor een goed contrast? Dan help je gebruikers die in fel licht of juist in (schemer)donker zitten te werken. Ook gebruikers met een bepaalde visuele beperking, zoals bijvoorbeeld kleurenblindheid, hebben goed contrast nodig.
Kleurcontrast kan je meten. Zorg voor een verhouding van minimaal 3:1 ten opzichte van de achtergrondkleur. Dat kan je nagaan via de Colour Contrast Checker. Op die site kan je snel de kleurcodes invoeren van de voor- en achtergrondkleur.
Probleem is dat je niet altijd weet, wat die kleurcodes zijn. In dat geval gebruik je de Colour Contrast Analyzer. Dat is een tool die je even moet downloaden. Vervolgens kan je die tool openen en dan kan je heel gemakkelijk met een icoontje van een pipetje de kleur pakken die je bedoelt.
Achtergrondkleur 'pakken':
En voorgrondkleur:
In dit voorbeeld van de gemeente Zaanstad (puur als voorbeeld omdat ik daar zelf woon), zie je dat het bij de kleinere lettertypes niet goed gaat qua contrast. Dus de hele kleine witte letters op de lichtblauwe achtergrond geeft onvoldoende contrast.
De eisen die de WCAG stelt aan het gebruik van kleuren heeft daarom gevolgen voor je huisstijl. In dit voorbeeld van Amsterdam zie je dat medewerkers advies krijgen over hoe je huisstijlkleuren combineert: Amsterdam / Stijlweb / Kleuren.
Maak er een gewoonte van om kleurcontrast consequent na te gaan. Zo krijg je een steeds beter gevoel van wat een goed contrast is. En geef je collega's tips over welke (huisstijl)kleuren ze wel en niet moeten combineren.
