Audit House kleurcontrast checker
Omdat we gek zijn op tools en optimaliseren hebben we onze eigen kleurcontrast checker ontwikkeld. Deze tool gebruik je gewoon via de browser, je hoeft er geen apps voor te downloaden. Je kunt ervoor kiezen om de kleurcodes van de twee kleuren in te vullen of het pipetje gebruiken om de kleur eenvoudig te selecteren.
Zo zie je niet alleen direct of je kleurencombinatie voldoet aan 1.4.3 en 1.4.11, je krijgt ook suggesties voor andere kleuren die beter contrasteren. Ontzettend handig en gratis te gebruiken.
Color Contrast Analyser
Download en installeer de Color Contrast Analyser op je Mac of Windows computer. Vervolgens kun je met de twee pipetjes de voor- en achtergrondkleur selecteren. In het invoerveld kun je ook direct de HEX-code van de kleuren invullen.
Zo zie je direct de contrastverhouding en of deze voldoet aan de WCAG-criteria. In dit geval is de verhouding 6,5:1. Daarmee wordt voldaan aan WCAG niveau AA, maar niet aan niveau AAA. Niveau AA is opgenomen in de Nederlandse wetgeving als standaard.
Via Chrome’s DevTools
Een alternatieve manier om kleurcontrast te controleren is via de browser. Bijvoorbeeld via Chrome’s DevTools. In de browser zit namelijk een ingebouwde contrastchecker. Wanneer je een element inspecteert, zie je direct de contrastverhouding. Hier staat ook een vinkje, waarmee je direct ziet of je wel of niet voldoet aan succescriterium 1.4.3.
