Kleurcontrastcontrole

Wat is Kleurcontrastcontrole?

De Kleurcontrastcontrole is een gratis online WCAG-contrastverhoudingscontrole voor ontwerpers, ontwikkelaars en toegankelijkheidstesters. De tool neemt een voorgrondkleur (tekst) en een achtergrondkleur, berekent de relatieve luminantie van elke kleur en geeft de contrastverhouding als een waarde van 1:1 tot 21:1. Vervolgens vertelt hij je of die verhouding voldoet aan WCAG 2.1 niveau AA (4.5:1 normaal, 3:1 groot) en niveau AAA (7:1 normaal, 4.5:1 groot), en geeft hij de twee kleuren weer in een live voorbeeld met voorbeeldtekst zodat je de leesbaarheid in één oogopslag kunt beoordelen. Gebruik hem om te controleren of bodytekst, knoppen, links en labels leesbaar zijn voordat je een ontwerp publiceert.

Kleurcontrastcontrole gebruiken

1. Typ of plak de voorgrondkleur (tekst) als HEX-waarde, of klik op de native kleurkiezer om er visueel een te kiezen.
2. Doe hetzelfde voor de achtergrondkleur waarop de tekst staat.
3. Lees de uitvoer van de contrastverhouding, weergegeven als een waarde zoals 4.5:1 (1:1 zijn identieke kleuren, 21:1 is puur zwart op wit).
4. Bekijk de AA- en AAA-badges voor normale tekst en voor grote tekst (18pt / 14pt vet en groter) om te zien welke niveaus slagen.
5. Bekijk het voorbeeld met voorbeeldtekst dat met je twee kleuren is weergegeven om te bevestigen dat de tekst comfortabel leesbaar is.
6. Pas een van beide kleuren aan totdat je het contrastniveau bereikt dat je ontwerp nodig heeft.

Voorbeelden

Voorgrond #595959, Achtergrond #ffffff

Verhouding 7.00:1 — slaagt voor AA en AAA voor normale en grote tekst

Voorgrond #999999, Achtergrond #ffffff

Verhouding 2.85:1 — zakt voor AA normaal en AAA, voldoet aan niets van wat voor bodytekst vereist is

Voorgrond #767676, Achtergrond #ffffff

Verhouding 4.54:1 — slaagt voor AA normaal en AA groot, maar zakt voor AAA normaal

Veelgestelde vragen

Welke contrastverhoudingen vereist WCAG?

WCAG 2.1 niveau AA vereist ten minste 4.5:1 voor normale tekst en 3:1 voor grote tekst. Niveau AAA is strenger: 7:1 voor normale tekst en 4.5:1 voor grote tekst. Deze controle toont een geslaagd/gezakt-badge voor elk van die vier drempelwaarden.

Wat telt als grote tekst?

WCAG definieert grote tekst als 18pt (ongeveer 24px) en groter, of 14pt (ongeveer 18.66px) en groter wanneer vet. Grote tekst heeft een lagere contrasteis omdat grotere lettertekens makkelijker te lezen zijn, en daarom kunnen de grote-tekst-badges slagen terwijl die voor normale tekst dat niet doen.

Hoe wordt de contrastverhouding berekend?

Het gebruikt de officiële WCAG-formule: de relatieve luminantie van elke kleur wordt berekend uit de gelineariseerde sRGB-kanalen, en de verhouding is (lichter + 0.05) / (donkerder + 0.05). Het resultaat loopt van 1:1 (identieke kleuren) tot 21:1 (zwart op wit).

Ondersteunt het alfa, RGB of benoemde kleuren?

De invoer is alleen HEX (#rgb verkort of #rrggbb), met een native kleurkiezer voor elk veld. Het houdt geen rekening met alfa/dekking of gedeeltelijke transparantie — combineer halftransparante lagen eerst tot een effen kleur en controleer die vervolgens.

Worden mijn kleuren naar een server gestuurd?

Nee. De luminantie- en verhoudingsberekeningen draaien volledig in je browser met JavaScript — er worden geen kleuren geüpload en er wordt niets naar een server gestuurd, dus het werkt privé en zelfs offline zodra de pagina is geladen.