De TPGi Color Contrast Checker is een gratis tool om te controleren of de kleuren op je website genoeg contrast hebben volgens de WCAG-richtlijnen.
Dit is belangrijk voor mensen met een visuele beperking, zoals kleurenblindheid of slechtziendheid.
Stap voor stap uitleg:
Download en installeer de tool
Ga naar: https://www.tpgi.com/color-contrast-checker/
Start het programma “Colour Contrast Analyser”.
Kies je voorgrond- en achtergrondkleur
Klik op de pipet onder “Voorgrondkleur”.
- Open deze tool naast je webpagina of een document.
Pak met de pipet de kleur van je scherm of document.
Herhaal dit voor “Achtergrondkleur”.
Lees de resultaten
De tool laat automatisch het contrast zien als een ratio (zoals 4.5:1).
Er staat ook of de combinatie slaagt of faalt voor succescriteria 1.4.3 en 1.4.11:
Normale tekst (kleine tekst)
Grote tekst (minstens 18pt of 14pt vetgedrukt)
AA- en AAA-niveau van WCAG
Pas kleuren aan indien nodig
Mag je geen tool installeren?
Maar wat als je deze tool niet kunt gebruiken? Bijvoorbeeld omdat je binnen je organisatie geen programma’s mag downloaden.
Er is een alternatieve methode. Volg deze stappen:
Ga naar WebAIM’s Contrast Checker.
Verklein je browser tot de helft van je schermgrootte door je muis over de linker rand te bewegen totdat je een icoon met twee pijlen ziet. Sleep naar rechts totdat je op de helft van je scherm komt.
Klik op het vierkantje onder het label “Color Picker” in het kader onder “Foreground”. Er verschijnt een nieuw venster met een pipet. Gebruik dit pipet om de kleur van de tekst op je website of document te selecteren.
Doe hetzelfde voor de achtergrondkleur met het tweede pipet onder “Background”.
Hoe analyseer je het resultaat?
- Grote tekst (24 px of font-weight: normal / 400) moet een minimale contrastverhouding van 3,0:1 hebben.
- Tekst kleiner dan 18.7 px of font-weight: bold / 700 vereist een minimale contrastverhouding van 4,5:1.
Zorg ervoor dat alle informatieve elementen op je website of in je document een minimale contrastverhouding van 3,0:1 hebben.