DevToolPal
NL

Kleurcontrastchecker (WCAG)

Controleer de WCAG 2.x-contrastverhouding van tekst- en achtergrondkleur, met AA- en AAA-resultaat voor normale tekst, grote tekst en UI, live voorbeeld en de dichtstbijzijnde kleur die slaagt.

Draait lokaal, wordt nooit geüpload

Kleuren

Tekstkleur
Achtergrondkleur

Transparante kleuren worden eerst gemengd: de tekst over de achtergrond, de achtergrond over wit.

Voorbeeld

Grote tekst

Lopende tekst moet voor iedereen goed leesbaar zijn, ook voor slechtzienden of bij een gedimd scherm.

Knop

Contrastverhouding

—

Dichtstbijzijnde kleuren die slagen

Wat het doet

De kleurcontrastchecker vertelt je of een tekstkleur leesbaar is op een achtergrondkleur volgens de Web Content Accessibility Guidelines (WCAG 2.x). Voer voor tekst en achtergrond een willekeurige CSS-kleur in — HEX, rgb(), hsl(), een kleurnaam of een transparante kleur — en je ziet de contrastverhouding, het resultaat voor elk AA- en AAA-criterium en een live voorbeeld. Slaagt het paar niet, dan stelt de tool de dichtstbijzijnde tekst- en achtergrondkleuren voor die wel slagen, in dezelfde tint. Alles draait in je browser.

Zo gebruik je het

  1. Typ of kies de Tekstkleur en de Achtergrondkleur. Omwisselen draait ze om.
  2. Lees de Contrastverhouding en de resultatenlijst voor normale tekst, grote tekst en UI-componenten.
  3. Slaagt een niveau niet, kijk dan bij Dichtstbijzijnde kleuren die slagen: elke suggestie toont de nieuwe kleur, de verhouding, een kopieerknop en Gebruiken.
  4. Zet APCA aan om ook het lichtheidscontrast (Lc) uit het WCAG 3-concept te zien.

Halfdoorzichtige kleuren worden vóór de controle gemengd: de tekst over de achtergrond en de achtergrond over wit.

Voorbeeld

#767676 on #ffffff  →  4.54:1  passes AA normal text
#777777 on #ffffff  →  4.47:1  fails AA normal text, passes AA large text
#000000 on #ffffff  →  21:1    the maximum

Zo wordt de verhouding berekend

De relatieve luminantie van elke kleur wordt berekend uit de sRGB-kanalen (gelineariseerd en gewogen met 21% rood, 72% groen en 7% blauw). De verhouding is (lichtere + 0,05) / (donkerdere + 0,05) en loopt van 1:1 voor identieke kleuren tot 21:1 voor zwart op wit. Alleen lichtheid telt, niet de tint: puur rood op puur groen oogt kleurrijk maar haalt maar ongeveer 1,3:1.

De suggesties veranderen alleen de lichtheid van de kleur (in HSL) en kiezen de richting — donkerder of lichter — die de kleinste verandering vraagt. Soms lukt het met geen enkele tint: op een middengrijze achtergrond haalt geen enkele tekstkleur 7:1.

Veelgestelde vragen

› Welke contrastverhouding heb ik nodig?

WCAG 2.x niveau AA vraagt minstens 4,5:1 voor normale tekst en 3:1 voor grote tekst en voor UI-componenten zoals veldranden, iconen en focusringen. Niveau AAA vraagt 7:1 voor normale tekst en 4,5:1 voor grote tekst. De meeste wetten en richtlijnen verwijzen naar niveau AA.

› Wat telt als grote tekst?

Tekst van minstens 24px (18pt) in normaal gewicht, of minstens 18,66px (14pt) vet. Alles wat kleiner is, is normale tekst en heeft de hogere verhouding nodig.

› Waarom is 4,49:1 niet geslaagd?

WCAG-drempels zijn exact: een verhouding van 4,499 haalt 4,5 niet. Deze checker kapt de getoonde verhouding daarom af in plaats van naar boven af te ronden, en beslist op de exacte waarde.

› Wat is APCA?

APCA (Accessible Perceptual Contrast Algorithm) is de contrastmethode die voor het WCAG 3-concept wordt voorgesteld. Ze geeft een lichtheidscontrast Lc dat afhangt van welke kleur de tekst is en past beter bij de donkere modus. Het is nog geen wettelijke norm en wordt hier alleen als extra houvast getoond.