5 onmisbare tools voor toegankelijk kleurgebruik
Als ik het met andere ontwerpers heb over toegankelijk kleurgebruik, dan is het bezwaar vaak dat ze zich te beperkt voelen in hun creativiteit. Op één of andere manier lijkt het blijkbaar alsof voldoende kleurcontrast gebruiken, neerkomt op alles zwart-wit maken.
Natuurlijk ligt het allemaal wel wat genuanceerder. Gelukkig maar. Je kunt genoeg doen met kleur zonder dat de toegankelijkheid in het gedrang komt, zolang je maar wat algemene uitgangspunten aanhoudt.
Hoe zat het ook alweer?
Ik ga hier uit van de gangbare standaard op het gebied van toegankelijkheid op het web, WCAG 2.1 (Web Content Accessibility Guideline). Hierin staan een aantal richtlijnen voor kleurgebruik, waaronder richtlijn 1.4.3:
“Contrast ratio between text and background is at least 4,5:1.”
Voldoende kleurcontrast tussen de tekst en de achtergrond dus. De contrastwaarde wordt uitgedrukt in een getal tussen 1 en 21, waarbij een contrastratio van 4,5 als ondergrens wordt aangehouden voor standaard tekst. Voor grotere tekst ligt de grens zelfs iets lager, voor vette tekst met een tekstgrootte vanaf ongeveer 18 pixels en alle tekst met een tekstgrootte vanaf 24 pixels ligt de ondergrens op 3.
Hoe ziet dat er uit? In dit voorbeeld staan drie verschillende kleurcontrasten en omdat de tekst groot genoeg is, mogen we hier een minimale contrastwaarde van 3 aanhouden:
Zoals je ziet kun je zeker met grotere teksten nog veel kanten op. Lichtgrijze tekst op witte achtergrond is misschien een slecht idee, maar dat betekent ook niet dat alles zwart-wit moet zijn.
Onmisbare tools
De volgende tools gebruik ik zelf regelmatig om te zorgen dat de interfaces die ik ontwerp voldoende kleurcontrast bevatten.
Accessible color palette builder
Als je werkt met een huisstijlhandboek met verschillende kleuren, kan het handig zijn om te weten welke combinaties je wel en niet kunt gebruiken. Met deze tool kun je alle kleuren die je wilt / kunt / mag gebruiken instellen en de website geeft vervolgens een matrix terug van alle combinaties van kleuren die een minimale contrastwaarde van 4,5 hebben.
› Accessible Color Palette Builder
Contrast Ratio
Deze tool gebruik ik bijna dagelijks. Het is de makkelijkste manier om even snel twee kleuren te checken, een kwestie van twee kleurwaarden invullen en de website geeft de contrastwaarde terug. Het mooie van deze tool is dat je ook nog eens direct het resultaat ziet van de kleurencombinatie.
Color Contrast Analyzer (Sketch Plugin)
Als je regelmatig in Sketch werkt, dan is deze plugin onmisbaar. Selecteer (bijvoorbeeld) een tekstlaag en een vlak en de plugin geeft je de contrastwaarde terug en of deze voldoet aan de WCAG 2.0 richtlijn.
› Color Contrast Analyzer (Sketch Plugin)
Colorsafe
Heb je inspiratie nodig? Colorsafe helpt je daar bij. Allereerst vul je de achtergrondkleur in die je wilt gebruiken en kies je wat voorkeuren voor de tekst (lettertype, grootte, gewicht) en de website genereert kleurenpaletten die je veilig kunt gebruiken. Je kunt eenvoudig door de kleurenpaletten heen klikken om te zien hoe dit er uit ziet op de gekozen achtergrondkleur.
Accessibility Developer Tools
Als de website eenmaal gebouwd wordt, vind ik het handig om Google Chrome er bij te pakken vanwege de Accessibility Developer Tools plugin.
Met deze plugin kun je een audit uitvoeren voor de toegankelijkheid van de pagina. Hiermee krijg je snel een overzicht van eventuele kleurcontrasten die te laag zijn, maar ook andere eventuele knelpunten komen hiermee naar voren.
› Accessibility Developer Tools (Google Chrome Plugin
Een mooi begin
In Nederland zijn ongeveer 1 miljoen mensen met een permanente visuele beperking, dat gaat van mensen die kleurenblind zijn tot volledig blind. En dan hebben we het nog niet over alle bezoekers die met hun telefoon in de zon zitten of die tools als F.lux geïnstalleerd hebben. Al deze mensen hebben baat bij toegankelijk kleurgebruik.
Hopelijk helpen deze tools je op weg.