Color Contrast Checker

Controleer WCAG AA- en AAA-contrastverhouding tussen tekst- en achtergrondkleur

Probeer een voorbeeld

Voorgrondkleur (tekst)

Achtergrondkleur

Voorbeeld grote tekst (18px vet)

Voorbeeld normale tekst — zo ziet je bodytekst eruit tegen de gekozen achtergrondkleur.

Contrastverhouding

14.63:1

WCAG-conformiteit

Geslaagd

Normaal AA

Geslaagd

Normaal AAA

Geslaagd

Groot AA

Geslaagd

Groot AAA

WCAG AANormale tekst: 4.5:1, Grote tekst (18px+ of 14px vet): 3:1

WCAG AAANormale tekst: 7:1, Grote tekst (18px+ of 14px vet): 4.5:1

Wat is kleurcontrastcontrole?

Kleurcontrastcontrole meet het luminantieverschil tussen een voorgrondkleur (doorgaans tekst) en een achtergrondkleur, en drukt dit uit als een verhouding. Een verhouding van 1:1 betekent dat de kleuren identiek zijn; 21:1 is het maximum, wat zwart op wit (of omgekeerd) vertegenwoordigt. De Web Content Accessibility Guidelines (WCAG), gepubliceerd door het W3C, definiëren minimale contrastwaarden waaraan tekst moet voldoen, zodat mensen met slechtziendheid of kleurblindheid de tekst kunnen lezen.

De formule voor de contrastverhouding is afkomstig uit WCAG 2.x en maakt gebruik van relatieve luminantie: een maatstaf voor hoe helder een kleur aan het menselijk oog verschijnt. Relatieve luminantie wordt berekend door elk sRGB-kanaal te lineariseren (gamma verwijderen) en de kanalen te wegen met de ITU-R BT.709-coëfficiënten: 0,2126 voor rood, 0,7152 voor groen en 0,0722 voor blauw. Groen draagt het meeste bij omdat menselijke ogen het meest gevoelig zijn voor groen licht. De verhouding is vervolgens (L1 + 0,05) / (L2 + 0,05), waarbij L1 de luminantie van de lichtste kleur is.

WCAG definieert twee conformiteitsniveaus. Niveau AA vereist een contrastverhouding van minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst (18px of groter, of 14px vet). Niveau AAA verhoogt de lat naar respectievelijk 7:1 en 4,5:1. WCAG 2.1 introduceerde ook Succescriterium 1.4.11, dat een verhouding van 3:1 vereist voor niet-tekstuele UI-componenten zoals randen, iconen en focusindicatoren.

Waarom deze contrastchecker gebruiken?

Contrast beoordelen op het oog is onbetrouwbaar. Kleuren die op je gekalibreerde scherm duidelijk van elkaar te onderscheiden zijn, kunnen samenvloeien op een goedkoop laptopscherm, in direct zonlicht of voor iemand met deuteranopie. Een numerieke verhouding elimineert giswerk en geeft een duidelijk geslaagd/gezakt-oordeel op basis van de WCAG-norm.

Directe ratioberekening
Kies of typ twee kleuren en zie de contrastverhouding meteen bijwerken. Geen formulier om in te dienen, geen pagina opnieuw laden.
🔒
Privacy-first verwerking
De luminantieberekening verloopt volledig in je browser. Er verlaten geen kleurwaarden je machine, en er worden geen cookies of analysetools gebruikt om je keuzes bij te houden.
🎯
AA- en AAA-oordelen
De resultaten tonen geslaagd/gezakt voor WCAG AA en AAA, voor zowel normale als grote tekstgroottes, zodat je precies weet aan welke drempelwaarden je voldoet.
📋
Geen account vereist
Open de pagina en begin met testen. Geen registratie, geen limieten. De tool werkt offline zodra de pagina geladen is.

Gebruiksscenario's voor de contrastchecker

Frontend-ontwikkeling
Plak voor het uitleveren van een UI-wijziging de tekstkleur en achtergrond uit je CSS in de checker om te bevestigen dat het paar aan WCAG AA voldoet. Dit spoort contrastfouten op voordat ze de codereview of geautomatiseerde audits bereiken.
Design-overdracht
Ontwerpers kunnen elk kleurpaar in een Figma-bestand controleren voordat ze de specificaties overdragen aan engineers. Contrastproblemen op het designstadium oplossen is veel goedkoper dan na de implementatie.
Toegankelijkheidsaudit
QA-engineers die een WCAG-audit uitvoeren, kunnen specifieke kleurcombinaties die door geautomatiseerde tools als Lighthouse of axe zijn gemarkeerd, steekproefsgewijs controleren. De checker bevestigt de exacte verhouding en welke niveaus slagen of zakken.
Design-systeemtokens
Bij het definiëren van kleurtokens voor een design-systeem test je elk voor-/achtergrondstel om te garanderen dat het tokenpalet minimaal aan AA voldoet. Documenteer de verhoudingen naast de tokens zodat downstream-teams de keuzes kunnen vertrouwen.
E-mailtemplate testen
E-mailclients verwijderen CSS-functies zoals opacity en blend modes, waardoor de uiteindelijk weergegeven kleuren kunnen afwijken van je broncode. Test de definitieve voor- en achtergrondwaarden die de inbox bereiken om leesbaarheid te verifiëren.
Toegankelijkheidsnormen bestuderen
Studenten die WCAG leren, kunnen experimenteren met verschillende kleurparen en direct zien hoe de verhouding verandert. Door één kanaal tegelijk aan te passen bouw je een werkend begrip op van hoe luminantie samenhangt met waargenomen contrast.

WCAG-contrastvereisten

De onderstaande tabel geeft een overzicht van de minimale contrastwaarden die WCAG 2.1 vereist voor verschillende inhoudstypen en conformiteitsniveaus. Grote tekst is gedefinieerd als 18px (24 CSS-pixels) of groter bij normaal gewicht, of 14px (18,66 CSS-pixels) of groter bij vet gewicht.

NiveauMin. verhoudingVan toepassing opOpmerking
AA Normal text4.5 : 1Body text, paragraphs, labelsMinimum for most UI text
AA Large text3.0 : 1Text >= 18px, or >= 14px boldMinimum for headings
AA UI components3.0 : 1Borders, icons, focus indicatorsNon-text contrast (WCAG 1.4.11)
AAA Normal text7.0 : 1Body text at highest standardEnhanced readability
AAA Large text4.5 : 1Large text at highest standardEnhanced for headings

Luminantie, AA en AAA uitgelegd

De berekening van de contrastverhouding kent drie stappen: luminantie berekenen voor elke kleur, de verhouding afleiden en vergelijken met WCAG-drempelwaarden.

Relatieve luminantie
Een getal van 0 (zwart) tot 1 (wit) dat weergeeft hoe helder een kleur lijkt. Het houdt rekening met de niet-lineaire sRGB-gammacurve en de ongelijke gevoeligheid van het menselijk oog voor rood, groen en blauw. Puur groen (#00FF00) heeft een luminantie van 0,7152, terwijl puur blauw (#0000FF) slechts 0,0722 heeft.
WCAG AA
Het basistoegankelijkheidsniveau dat door de meeste wettelijke normen wordt vereist, waaronder de Europese Toegankelijkheidswet (EAA) en Section 508 in de Verenigde Staten. AA vereist een verhouding van 4,5:1 voor normale tekst en 3:1 voor grote tekst. De meeste design-systemen hanteren AA als minimum voor alle tekstelementen.
WCAG AAA
Het verbeterde niveau, bedoeld voor inhoud die leesbaar moet zijn voor het breedst mogelijke publiek, inclusief gebruikers met ernstige visuele beperkingen. AAA vereist 7:1 voor normale tekst en 4,5:1 voor grote tekst. Weinig volledige websites bereiken AAA op alle pagina's, maar kritische inhoud zoals juridische kennisgevingen en medische informatie richt zich er vaak op.

Codevoorbeelden

Bereken WCAG-contrastverhoudingen programmatisch. Elk voorbeeld implementeert de relatieve luminantieformule uit WCAG 2.x en de contrastverhoudingenberekening. Dezelfde zwart-op-wit en indigo-op-wit paren worden getest ter vergelijking.

JavaScript
// Calculate relative luminance per WCAG 2.x (sRGB)
function luminance(r, g, b) {
  const [rs, gs, bs] = [r, g, b].map(c => {
    c /= 255
    return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
  })
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
}

// Contrast ratio between two RGB colors
function contrastRatio(fg, bg) {
  const l1 = luminance(...fg)
  const l2 = luminance(...bg)
  const lighter = Math.max(l1, l2)
  const darker  = Math.min(l1, l2)
  return (lighter + 0.05) / (darker + 0.05)
}

contrastRatio([0, 0, 0], [255, 255, 255])  // -> 21.0
contrastRatio([99, 102, 241], [255, 255, 255]) // -> 3.95
contrastRatio([29, 78, 216], [255, 255, 255])  // -> 6.06 (AA pass)
Python
def luminance(r: int, g: int, b: int) -> float:
    """Relative luminance per WCAG 2.x, ITU-R BT.709 coefficients."""
    channels = []
    for c in (r, g, b):
        c /= 255
        channels.append(c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4)
    return 0.2126 * channels[0] + 0.7152 * channels[1] + 0.0722 * channels[2]

def contrast_ratio(fg: tuple, bg: tuple) -> float:
    l1 = luminance(*fg)
    l2 = luminance(*bg)
    lighter, darker = max(l1, l2), min(l1, l2)
    return (lighter + 0.05) / (darker + 0.05)

print(f"{contrast_ratio((0, 0, 0), (255, 255, 255)):.2f}")  # -> 21.00
print(f"{contrast_ratio((99, 102, 241), (255, 255, 255)):.2f}")  # -> 3.95

# Check WCAG AA for normal text
ratio = contrast_ratio((29, 78, 216), (255, 255, 255))
print(f"{ratio:.2f} — {'AA pass' if ratio >= 4.5 else 'AA fail'}")  # -> 6.06 — AA pass
Go
package main

import (
	"fmt"
	"math"
)

func linearize(c float64) float64 {
	c /= 255
	if c <= 0.04045 {
		return c / 12.92
	}
	return math.Pow((c+0.055)/1.055, 2.4)
}

func luminance(r, g, b int) float64 {
	return 0.2126*linearize(float64(r)) +
		0.7152*linearize(float64(g)) +
		0.0722*linearize(float64(b))
}

func contrastRatio(fgR, fgG, fgB, bgR, bgG, bgB int) float64 {
	l1 := luminance(fgR, fgG, fgB)
	l2 := luminance(bgR, bgG, bgB)
	lighter := math.Max(l1, l2)
	darker := math.Min(l1, l2)
	return (lighter + 0.05) / (darker + 0.05)
}

func main() {
	ratio := contrastRatio(0, 0, 0, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 21.00

	ratio = contrastRatio(29, 78, 216, 255, 255, 255)
	fmt.Printf("%.2f\n", ratio) // -> 6.06 (AA pass for normal text)
}
CSS
/* WCAG-safe color pairs — tested contrast ratios */

/* 12.63:1 — passes AAA normal text */
.high-contrast {
  color: #1e293b;          /* slate-800 */
  background: #f8fafc;     /* slate-50  */
}

/* 7.07:1 — passes AAA normal text */
.dark-theme-text {
  color: #e2e8f0;          /* slate-200 */
  background: #0f172a;     /* slate-900 */
}

/* 4.57:1 — passes AA normal, fails AAA */
.accent-on-white {
  color: #1d4ed8;          /* blue-700  */
  background: #ffffff;
}

/* 2.14:1 — fails AA for text, but passes 3:1 for large text */
.muted-heading {
  color: #94a3b8;          /* slate-400 */
  background: #ffffff;
}

Veelgestelde vragen

Wat is een goede contrastverhouding voor tekst?
Voor bodytekst op het web is een verhouding van minimaal 4,5:1 (WCAG AA) het streven. Verhoudingen boven 7:1 voldoen aan WCAG AAA en zijn aangenamer voor langdurig lezen. Zwart op wit geeft de maximale verhouding van 21:1, maar een zeer donkergrijs (#1e293b) op wit geeft nog steeds ongeveer 12,6:1, wat ruim boven AAA ligt.
Wat geldt als grote tekst in WCAG?
WCAG definieert grote tekst als 18px (24 CSS-pixels) bij normaal gewicht, of 14px (18,66 CSS-pixels) bij vet gewicht. Grote tekst heeft een lagere contrastdrempel omdat grotere lettervormen makkelijker waarneembaar zijn. In CSS is 1px gelijk aan 0,75pt, dus 18pt is gelijk aan 24px.
Is WCAG AA wettelijk verplicht?
In veel rechtsgebieden wel. De Europese Toegankelijkheidswet (EAA), die in juni 2025 van kracht wordt, verwijst naar WCAG 2.1 AA. Section 508 van de Amerikaanse Rehabilitation Act verplicht federale instanties aan WCAG 2.0 AA te voldoen. In de VS is de Americans with Disabilities Act (ADA) door rechtbanken geïnterpreteerd als van toepassing op toegankelijke websites, met WCAG AA als standaard. Canada, Australië en het Verenigd Koninkrijk hebben vergelijkbare verplichtingen.
Hoe wordt relatieve luminantie berekend?
Elke sRGB-kanaalwaarde (0–255) wordt gedeeld door 255 en vervolgens gelineariseerd: waarden op of onder 0,04045 worden gedeeld door 12,92, en waarden daarboven worden getransformeerd door ((c + 0,055) / 1,055) ^ 2,4. De drie gelineariseerde kanalen worden gewogen met de ITU-R BT.709-coëfficiënten (0,2126 R, 0,7152 G, 0,0722 B) en opgeteld. Het resultaat is een getal tussen 0 en 1.
Waarom gebruikt WCAG een offset van 0,05 in de contrastformule?
De offset van 0,05 voorkomt deling door nul wanneer een van de kleuren puur zwart is (luminantie = 0). Het houdt ook rekening met omgevingslicht en schermreflecties die de waargenomen luminantie van zelfs de donkerste pixels enigszins verhogen. Zonder deze offset zou zwart op elke donkere kleur een oneindige of misleidend hoge verhouding opleveren.
Kunnen twee kleuren AA halen maar toch moeilijk leesbaar zijn?
Ja. WCAG-contrastverhoudingen meten luminantieverschil, niet tintverschil. Een verzadigd rood op verzadigd groen kan technisch gezien de drempelwaarde halen, terwijl het voor sommige gebruikers — met name mensen met rood-groen kleurblindheid — onaangenaam te lezen is. Kleuren combineren die zowel in luminantie als tint verschillen levert doorgaans aangenamere resultaten op.
Wat is het verschil tussen WCAG 2.x-contrast en APCA?
WCAG 2.x gebruikt een eenvoudige luminantieverhouding die voor- en achtergrond symmetrisch behandelt. APCA (Advanced Perceptual Contrast Algorithm), voorgesteld voor WCAG 3.0, gebruikt een perceptueel helderheidsmodel dat rekening houdt met polariteit: donkere tekst op een lichte achtergrond heeft een andere waargenomen contrast dan lichte tekst op een donkere achtergrond bij hetzelfde luminantieverschil. APCA is nog een werkversie en heeft de WCAG 2.x-methode in geen enkele regelgeving vervangen.