TL
Tool Lab
💰Donate
💰Donate

Kleurcontrast Checker

Controleer de kleurcontrastratio op basis van WCAG 2.1 toegankelijkheidsrichtlijnen. Directe AA/AAA-resultaten.

Voorgrondkleur
Achtergrondkleur

Grote tekst voorvertoning (18pt vet)

Normale tekst voorvertoning — The quick brown fox jumps over the lazy dog.

14.05:1contrastverhouding
AA — Normale tekst (≥ 4,5:1)Geslaagd
AA — Grote tekst (≥ 3:1)Geslaagd
AAA — Normale tekst (≥ 7:1)Geslaagd
AAA — Grote tekst (≥ 4,5:1)Geslaagd

Over deze tool

De kleurencontrast-checker berekent de contrastverhouding tussen een voorgrondkleur (tekst) en een achtergrondkleur met de WCAG 2.1 relatieve helderheidsformule.

WCAG 2.1 definieert twee niveaus: AA vereist 4,5:1 voor normale tekst en 3:1 voor grote tekst. AAA vereist 7:1 en 4,5:1.

Hoe te gebruiken

  1. Kies de voorgrond- en achtergrondkleur met de kleurenkiezers of typ hex-codes.
  2. De voorvertoning toont hoe tekst eruitziet bij normale en grote lettergroottes.
  3. De contrastverhouding en WCAG-resultaten worden direct bijgewerkt.
  4. Gebruik de voorbeeldparen om veelgebruikte toegankelijkheidspatronen te verkennen.

Gebruiksscenario's

UI-ontwerpers controleren of knoplabels en tekst voldoen aan WCAG-normen. Frontend-ontwikkelaars controleren tekst-achtergrondsamenstellingen in ontwerpsystemen.

Veelgestelde vragen

  • Wat telt als "grote tekst"? — WCAG definieert grote tekst als minimaal 18pt (24px) normaal, of 14pt (~18.67px) vet.
  • Ondersteunt het transparantie of rgba? — Nee, dit hulpmiddel werkt alleen met effen hex-kleuren.
  • Welk WCAG-niveau moet ik nastreven? — AA is het aanbevolen minimum voor de meeste openbare websites. AAA biedt betere leesbaarheid.
  • Is 4,5:1 altijd genoeg? — 4,5:1 voldoet aan WCAG AA, maar gebruikers met ernstigere visuele beperkingen kunnen baat hebben bij hogere verhoudingen.