Color Contrast Checker

Wat is een Kleurcontrast Checker?

Deze tool berekent de Contrast Ratio (contrastverhouding) tussen een voorgrondkleur (tekst) en een achtergrondkleur, en controleert vervolgens of de combinatie voldoet aan de WCAG 2.0-toegankelijkheidsrichtlijnen op AA- en AAA-niveau. Het simuleert ook kleurenblindheid, stelt oplossingen voor falende combinaties voor en exporteert code in meerdere formaten.

Hoe kleurcontrast controleren

Kleuren Kiezen

• Color A (voorgrond/tekst) en Color B (achtergrond) hebben beide een hex-invoerveld en een kleurenkiezer.
• Met de Shade Scale onder elke kleurenkiezer kunt u de helderheid fijn afstemmen. Klik op een tint om deze direct toe te passen.
• Het Color Wheel past de tint van Color A visueel aan. De complementaire kleur wordt eronder weergegeven – klik om deze als Color B toe te passen.
• Swap verwisselt Color A en Color B.

Wat de Resultaten Betekenen

Resultaat	Wat het toont
Contrast Ratio	De berekende verhouding (1:1 – 21:1). Hoger is beter.
A11y Score	Een toegankelijkheidsscore op 100 gebaseerd op de contrastverhouding.
WCAG AA / AAA	Geslaagd of gefaald voor Normal Text en Large Text op elk niveau.
Preview	Een live voorbeeld met een kop, alineatekst, knop, badge, invoerveld en kaart in uw kleuren.
Fix Suggestion	Wanneer het contrast niet voldoet aan AA, stelt een klikbare kaart de dichtstbijzijnde geldige tint voor, inclusief de verhouding. Klik om toe te passen.

WCAG-drempelwaarden

Niveau	Normal Text	Large Text
AA	Minimaal 4.5:1	Minimaal 3:1
AAA	Minimaal 7:1	Minimaal 4.5:1

• Normal text: kleiner dan 18pt (of kleiner dan 14pt vetgedrukt)
• Large text: 18pt en groter (of 14pt vetgedrukt en groter)

Extra Functies

• Undo / Redo – ga stapsgewijs door uw kleurwijzigingen.
• Share Result – kopieert een URL waarin de huidige kleuren zijn ingesloten. Iedereen die de link opent, ziet dezelfde combinatie.
• Pin – sla maximaal 8 kleurcombinaties op om ze zij aan zij te vergelijken. Klik op een vastgezette combinatie om deze opnieuw te laden.
• Brand Colors – 8 echte merkpaletten (Spotify, Slack, GitHub, enz.) met hun contrastverhoudingen. Klik op een merk om het te laden.
• A11y Check – simuliert 4 soorten kleurenblindheid (Protanopia, Deuteranopia, Tritanopia, Achromatopsia) met de effectieve contrastverhouding voor elke soort.
• Code Output – genereert kant-en-klare code in CSS, Tailwind 4, Tailwind 3, Flutter en React. Uitklapbare sectie, standaard geopend.
• Randomize / Clear All – genereer een willekeurige toegankelijke kleurcombinatie of herstel de standaardwaarden.

Goede Voorbeelden

Voorbeeld 1: Grijze Tekst op Wit – een Veelgemaakte Fout

Lichtgrijze tekst op een witte achtergrond ziet er subtiel uit, maar faalt voor toegankelijkheid.

• Color A: #999999, Color B: #ffffff
• Contrast Ratio: 2.85:1 – AA Gefaald
• De Fix Suggestion raadt tint 600 (#595959) aan voor een 4.9:1 – AA Geslaagd. Klik om toe te passen.

Voorbeeld 2: Een Merkpalet Controleren

Klik op Spotify in de sectie Brand Colors.

• Color A: #191414 (zwart), Color B: #1DB954 (groen)
• Contrast Ratio: 4.9:1 – AA Geslaagd, AAA Gefaald
• Zet dit paar vast (Pin), probeer vervolgens LinkedIn (#ffffff op #0A66C2, 4.7:1) en vergelijk.

Voorbeeld 3: Een Donkere Modus Ontwerpen

Een leesbare tekstkleur vinden voor een donkerblauwe (navy) achtergrond.

• Color A: #e0e0e0, Color B: #1a1a2e
• Contrast Ratio: 12.4:1 – AA en AAA Geslaagd
• Open A11y Check om te bevestigen dat alle 4 de soorten kleurenblindheid ook slagen.

Voorbeeld 4: Ontwikkelaarsworkflow – Code Exporteren

Nadat u een goede combinatie hebt gevonden, vouwt u Code Output uit en selecteert u uw framework:

• CSS: custom properties --fg en --bg
• Tailwind 4: arbitraire kleurwaarden
• React: inline style object

Kopieer het fragment rechtstreeks in uw project.

Belangrijke Tips

• Begin met Brand Colors. Als u een bestaand merk controleert, klik er dan op in de vooraf ingestelde lijst in plaats van de hex-waarden handmatig in te voeren.
• Gebruik de Fix Suggestion. Als het contrast te laag is, raad dan niet: klik op de suggestiekaart om automatisch naar de dichtstbijzijnde geldige tint te springen.
• Zet combinaties vast om te vergelijken (Pin). Bij het kiezen tussen verschillende kleuropties, zet u ze stuk voor stuk vast. U kunt ze dan opnieuw laden en naast elkaar vergelijken.
• Controleer ook op kleurenblindheid. Een combinatie die aan WCAG voldoet, kan nog steeds moeilijk te onderscheiden zijn voor kleurenblinde gebruikers. Open de sectie A11y Check om dit te verifiëren.
• Deel uw beslissing. Gebruik Share Result om de URL van de exacte kleurcombinatie naar een ontwerper of beoordelaar te sturen.

Formule

WCAG 2.0 definieert de Contrast Ratio met behulp van relatieve luminantie:

$CR = \frac{L_1 + 0.05}{L_2 + 0.05}$

Variabele	Betekenis
$CR$	Contrast Ratio
$L_1$	Relatieve luminantie van de lichtere kleur
$L_2$	Relatieve luminantie van de donkerdere kleur

Relatieve luminantie wordt berekend uit sRGB-waarden na linearisatie: $L = 0.2126R + 0.7152G + 0.0722B$

Veelgestelde Vragen

Moet ik streven naar AA of AAA?

AA is de minimale wettelijke norm in de meeste landen. AAA biedt betere leesbaarheid, maar is moeilijker te bereiken in alle ontwerpelementen. Een praktische aanpak: AA voor alineatekst, AAA voor cruciale informatie zoals waarschuwingen of foutmeldingen.

Garandeert naleving van WCAG toegankelijkheid voor kleurenblinde gebruikers?

De WCAG-contrastverhouding controleert luminantie, geen onderscheid in tint. Een combinatie kan slagen voor WCAG, maar er voor iemand met kleurenblindheid identiek uitzien. Gebruik de A11y Check-sectie om dit te verifiëren en vul kleuren altijd aan met pictogrammen of tekstlabels.

Welke codeformaten ondersteunt deze tool?

CSS custom properties, Tailwind CSS v3 en v4 (arbitraire waarden), Flutter Color()-objecten en React inline styles. Selecteer het formaat via de schakelaar in de sectie Code Output.

Kan ik mijn kleurcombinaties opslaan en delen?

Ja. Pin bewaart lokaal maximaal 8 combinaties ter vergelijking. Share Result kopieert een URL waarin de kleuren zijn ingesloten – iedereen die de link opent, ziet exact dezelfde combinatie.