Instructie: hoe test ik kleurcontrast?

Type content: Instructies om je website toegankelijker te maken
Voor wie: Webredactie

Story By Julia Tol

mei 10 — 2025

Stap 1: Download en installeer de tool

Ga naar de officiële website: https://www.tpgi.com/color-contrast-checker/
Klik op “Download TPGi Colour Contrast Analyser” voor Windows of Mac, afhankelijk van jouw besturingssysteem.
Open het gedownloade bestand en volg de installatie-instructies.

Stap 2: Selecteer de kleuren

Open de tool. De tool verschijnt als een zwevend venster bovenop andere applicaties.
Klik op het pipet-icoon naast “Voorgrondkleur” en selecteer de tekstkleur op je scherm.
Klik vervolgens op het pipet-icoon naast “Achtergrondkleur” en selecteer de achtergrondkleur achter de tekst.
Bij gebruik van een afbeelding of verloopachtergrond, herhaal deze stappen op verschillende plekken om consistente contrastwaarden te controleren.

Stap 3: Controleer de contrastresultaten

De tool toont direct de contrastverhouding (bijvoorbeeld 4.5:1).
Onder het kopje “WCAG 2.1 resultaten” zie je of de combinatie voldoet aan:
- Normale tekst: minimaal 4,5:1 (niveau AA)
- Grote tekst: minimaal 3:1 (niveau AA)
- Informatieve elementen: minimaal 3:1 (niveau AA)

Deel dit bericht

By Julia Tol

Afgestudeerd webdeveloper in Zweden (2015). Sinds 2019 werkzaam als onderzoeker digitale toegankelijkheid bij Stichting Accessibility. Tussen 2020 en 2024 actief als zelfstandig auditor voor alle grote Nederlandse auditbureaus, gecombineerd met een rol als expert binnen DigiToegankelijk Top (2022–2025). Beschikt over ruim 13 jaar ervaring bij het Ministerie van Justitie en Veiligheid, het Ministerie van Binnenlandse Zaken en Koninkrijksrelaties. Sinds 2022 directeur van Proper Access, gespecialiseerd in digitale toegankelijkheid.