Go Toolstack

WCAG kleurcontrastcalculator

Evalueer tekst- en achtergrondkleuren volgens WCAG 2.1 richtlijnen met precieze contrastverhoudingen voor AA- en AAA-naleving.

WCAG kleurcontrastcalculator

Evalueer tekst- en achtergrondkleuren volgens WCAG 2.1 richtlijnen met precieze contrastverhoudingen voor AA- en AAA-naleving.

Hoe het werkt

1
Enter Query Details
Specify the parameters, location, or query data you want to look up.
2
Fetch or Validate Data
Retrieve or validate information securely within your session.
3
Inspect Detailed Results
Review schedules, reference figures, or comprehensive data tables.

Ontdek meer gratis browsergebaseerde tools

Hub Ontwikkelaarstools • Workflows en vergelijkingsgids

Ontdek alle ontwikkelaarstools tools, browserlimieten en de selectiegids.

Hub verkennen →
JSON-formatteerder en validator

Formatteer, minificeer en valideer JSON-gegevens met verliesvrije 64-bits BigInt-precisie en JSON Schema-regels (Draft-07 / 2020-12).
Base64-encoder en decoder

Codeer platte tekst direct naar Base64 of decodeer Base64-reeksen naar UTF-8 met ondersteuning voor URL-veilige varianten.
SQL-query formatteerder

Structureer en formatteer complexe SQL-query's met nette inspringing voor MySQL, PostgreSQL, SQLite, MS SQL en Oracle.

Gerelateerde bloghandleidingen

Technische gidsen, probleemoplossing en handleidingen voor best practices

Kennisbank & Handleiding

WCAG-kleurcontrastcontroleur: Toegankelijkheid voor tekst en achtergrond (AA & AAA)

Voldoende kleurcontrast tussen tekst en achtergrond is een fundamenteel vereiste voor webtoegankelijkheid (a11y) en de Europese Toegankelijkheidswet (European Accessibility Act). De Contrastcontroleur in GoToolstack berekent de exacte contrastverhouding volgens de officiële WCAG 2.1-richtlijnen.

Voer twee kleuren in (HEX of RGB) en zie direct of de combinatie voldoet aan de AA-norm (minimaal 4.5:1 voor normale tekst, 3:1 voor grote tekst) en de strengere AAA-norm (minimaal 7:1). De tool toont realtime voorbeelden van beide tekstformaten.

Kernarchitectuur & Wiskundige formule

Contrastverhouding = (L1 + 0.05) / (L2 + 0.05) ; waarbij L de relatieve luminantie is volgens sRGB

Wiskundige berekening van relatieve helderheid conform de officiële W3C WCAG-toegankelijkheidsspecificatie.

Tips en best practices

  • Streef minimaal naar WCAG AA (4.5:1) voor alle leestekst: Dit garandeert dat gebruikers met verminderd gezichtsvermogen of bij fel zonlicht de tekst moeiteloos kunnen lezen.
  • Let op knoppen en formuliervelden (3:1): Ook interactieve elementen en focus-randen moeten minimaal een contrastverhouding van 3:1 hebben ten opzichte van de achtergrond.
  • Gebruik niet uitsluitend kleur om informatie over te brengen: Combineer kleurverschillen altijd met iconen of tekstlabels (bijv. bij foutmeldingen).

Häufig Gestellte Fragen (FAQ)

Wat telt volgens de WCAG als 'grote tekst'?
Tekst van minimaal 18 pt (ongeveer 24 px) bij normaal gewicht, of minimaal 14 pt (ongeveer 18,5 px) bij een vet lettertype (bold).
Biedt de tool suggesties als het contrast onvoldoende is?
Ja, de tool toont direct hoe ver je de voorgrond- of achtergrondkleur moet verdonkeren of verlichten om de AA-grens te bereiken.