Ontwikkelaar🔒 Draait in je browser

Kleurcontrastchecker

WCAG AA/AAA-kleurcontrastnaleving controleren

Tekstkleur

Achtergrondkleur

Voorbeeld Titeltekst

Zo ziet bodytekst eruit met deze kleuren.

En dit is kleine tekst ter referentie.

Contrastverhouding

21.00:1

WCAG AA

Normale tekst✓ Geslaagd

Grote tekst (18px+)✓ Geslaagd

UI-componenten✓ Geslaagd

WCAG AAA

Normale tekst✓ Geslaagd

Grote tekst (18px+)✓ Geslaagd

Over Kleurcontrastchecker

De Kleurcontrastchecker evalueert de contrastverhouding tussen twee kleuren op basis van de WCAG 2.1-richtlijnen. Het vertelt u of uw kleurencombinaties voldoen aan de AA- of AAA-toegankelijkheidsnormen voor normale tekst, grote tekst en UI-componenten. Alles draait in uw browser.

Veelgestelde vragen

Wat is een goede contrastverhouding?

WCAG AA vereist een minimale verhouding van 4,5:1 voor normale tekst en 3:1 voor grote tekst (18px+ of 14px+ vet). WCAG AAA vereist 7:1 voor normale tekst en 4,5:1 voor grote tekst. Hogere verhoudingen betekenen betere leesbaarheid.

Wat is het verschil tussen AA en AAA?

AA is de minimaal aanbevolen standaard voor de meeste webinhoud. AAA is een strengere standaard die betere leesbaarheid biedt voor gebruikers met visuele beperkingen. Voldoen aan AAA is ideaal, maar niet altijd vereist.

Hoe wordt de contrastverhouding berekend?

De contrastverhouding wordt berekend op basis van de relatieve luminantie van elke kleur zoals gedefinieerd door WCAG 2.1. De formule vergelijkt de lichtere en donkerdere kleuren op een schaal van 1:1 (geen contrast) tot 21:1 (maximaal contrast, zwart op wit).

Veelgestelde vragen

Wat is een goede contrastverhouding?

Wat is het verschil tussen AA en AAA?

Hoe wordt de contrastverhouding berekend?