Wat is een contrastchecker en waarom gebruiken?

Toegankelijkheid & bruikbaarheid

Voldoende contrast verbetert leesbaarheid voor iedereen — vooral voor gebruikers met verminderd zicht, kleurenzienstoornissen of op schermen van lage kwaliteit.

WCAG 2.1 vereisten

Controleer 1.4.3 Contrast (Minimum), 1.4.6 Contrast (Uitgebreid) en 1.4.11 Niet-tekstcontrast voor UI-componenten en grafiek.

EAA / EN 301 549

De Europese toegankelijkheidswet verwijst naar EN 301 549, die op zijn beurt naar WCAG verwijst — contrast is een sleutelonderdeel in het voldoen aan verplichtingen.

Merk & ontwerp kwaliteit

Toegankelijke kleurpaletten creëren robuuste, leesbare interfaces die werken in lichte/donkere thema’s en op verschillende apparaten.

WCAG 2.1 contrastdrempels (snel referentie)

Normale tekst
AA

Minimaal ratio: 4,5:1 (tekst onder 24 px normaal / 19 px vet).

Grote tekst
AA

Minimaal ratio: 3:1 (≥ 24 px normaal of ≥ 19 px vet).

UI-componenten & grafieken
1.4.11

Minimaal contrast ten opzichte van aangrenzende kleuren: 3:1 (focusringen, formulierinvoeren, iconen etc.).

Test de contrastchecker

Voer voor- en achtergrondkleuren in (HEX). De tool berekent de contrastverhouding en toont geslaagd/niet geslaagd voor WCAG-niveaus. Resultaten worden bijgewerkt terwijl je typt.

Color Contrast Checker

Example text preview
Contrast ratio: 8.67:1

Normal text

Contrast Ratio:8.67:1

Normal Text (WCAG AA)

Pass ≥ 4.5

AAA

Pass ≥ 7.0

Veelgestelde vragen

Veranderen de contrastverhoudingen in WCAG 2.1?
Nee, de contrastdrempels blijven hetzelfde in 2.1 (4,5:1 voor normale tekst, 3:1 voor grote tekst, 3:1 voor niet-tekst UI/grafiek).
Vereist EAA WCAG contrast?
Ja. EN 301 549 (benoemd door de EAA) integreert WCAG 2.1 vereisten, inclusief kleurcontrast voor tekst en niet-tekst.
Wat wordt beschouwd als “grote tekst”?
Minstens 18pt (24 px) normale stijl of 14pt (19 px) vet — wat voldoet aan de 3:1-drempel.

Maak contrastcontroles onderdeel van je workflow

Voer contrastcontroles uit tijdens designreviews en code-reviews. Combineer met automatische scantechnieken om problemen op grotere schaal te ontdekken.

Test de Accessibility ScannerHaal de gratis toegankelijkheid-widget