Hoe controleer ik of mijn tekst- en achtergrondkleuren aan WCAG voldoen?

Voer hexadecimale codes in bij Tekstkleur en Achtergrondkleur, of gebruik de kleurkiezers. De Contrastverhouding verschijnt met Geslaagd of Onvoldoende voor AA en AAA normale en grote tekst, plus UI-componenten.

Welke contrastverhouding vereist WCAG AA?

AA vereist 4,5:1 voor normale tekst en 3:1 voor grote tekst. AAA vereist 7:1 voor normale tekst en 4,5:1 voor grote tekst. UI-componenten en grafische objecten vereisen 3:1.

Wat telt als grote tekst?

De tool beschouwt 18pt (24px) reguliere tekst of 14pt (18,66px) vette tekst als groot. Kleinere tekst moet aan de hogere drempels voor normale tekst voldoen.

Mijn kleuren voldoen niet aan AA. Hoe los ik dat op?

Gebruik de suggesties Tekstkleur corrigeren of Achtergrond corrigeren met één klik. Ze passen de lichtheid aan terwijl dezelfde tint behouden blijft, totdat het paar 4,5:1 bereikt.

Welke kleurformaten accepteert de tool en kan ik van het scherm kiezen?

De tool accepteert hexadecimale waarden van 3 en 6 cijfers, zoals #abc of #1e293b. Een knop Kleur van het scherm kiezen verschijnt in browsers die de EyeDropper API ondersteunen, zoals Chromium.

Ja. Elke tool is gratis te gebruiken, zonder account en zonder creditcard. Het werk gebeurt op jouw apparaat in plaats van op onze servers, en daarom is het gratis te gebruiken.

Ja. Het werkt in actuele mobiele browsers op iOS en Android, zonder iets te installeren.

🌓

Gratis WCAG-kleurcontrastcontrole

Controleer of twee kleuren voldoen aan de WCAG AA- en AAA-contrastnormen voor toegankelijkheid. Livevoorvertoning op meerdere tekstgroottes met automatische suggesties wanneer het contrast te laag is.

Draait in je browserGeen aanmelding, geen pop-upsGeen aanmelding vereistVoor altijd gratis

Werkt offline na het laden

Tekstkleur

Achtergrondkleur

Grote koptekst

Middelgrote broodtekst (18px) voor lezen en inhoud.

Normale broodtekst (16px) voor alinea's.

Kleine broodtekst (14px) voor bijschriften en metadata.

14,63:1

Contrastverhouding

✓WCAG AA — Normale tekst

Vereist 4.5:1 · Je hebt 14,63:1

✓WCAG AA — Grote tekst

Vereist 3.0:1 · Je hebt 14,63:1

✓WCAG AAA — Normale tekst

Vereist 7.0:1 · Je hebt 14,63:1

✓WCAG AAA — Grote tekst

Vereist 4.5:1 · Je hebt 14,63:1

✓UI-componenten / grafische objecten

Vereist 3.0:1 · Je hebt 14,63:1

Snelle presets

Gebaseerd op WCAG 2.1 contrastrichtlijnen. Grote tekst = 18pt (24px) normaal of 14pt (18,66px) vet. HEX-codes worden bidirectioneel bijgewerkt: typ een HEX of kies een kleur, beide invoervelden blijven gesynchroniseerd.

Veelvoorkomend gebruik

Audit webpagina's voor WCAG-complianceVerifieer dat tekstkleuren van uw site voldoen aan WCAG AA- of AAA-contraststandaarden voor toegankelijkheid.
Verifieer merkkleurkombinatiesTest merkkleurenpaletcombinaties om ervoor te zorgen dat ze werken voor toegankelijke UI-ontwerp.
Test Dark Mode-kleurenpalettenLichte tekst op donkere achtergronden kan nog steeds mislukken op contrast - controleer uw dark mode-paletcombinaties hier.
Kleurkombinaties voor drukwerkPosters, borden en gedrukt materiaal hebben ook goed leesbare contrast nodig - vooral voor oudere lezers.
Ontwerp Toegankelijke KnopkleurenZorg ervoor dat CTA's, actiebuttonnen en koppelingen WCAG tegen hun achtergronden doorstaan.

Hoe het werkt

Contrastcontrole draait volledig in je browser met het algoritme voor relatieve luminantie van WCAG 2.1 — geen bibliotheek, geen server, alleen zelfgeschreven wiskunde die de specificatie precies volgt. Elk resultaat wordt in realtime bijgewerkt terwijl je typt of een kleur kiest.

1
Hexinvoer en normalisatie
Zowel hexwaarden van 3 cijfers (#abc) als van 6 cijfers (#aabbcc) worden geaccepteerd en genormaliseerd tot volledige RGB-drietallen. Ongeldige invoer wordt direct geweigerd in plaats van stilzwijgend zwart te worden, zodat er een rode rand verschijnt in plaats van een misleidend geslaagd resultaat.
2
WCAG-luminantieberekening
Elke kleur wordt omgezet naar relatieve luminantie met de WCAG 2.1-formule: sRGB-kanaalwaarden worden gelineariseerd met een stuksgewijze gammacorrectie (delen door 12,92 onder 0,03928, tot de macht 2,4 daarboven) en daarna gewogen als 0.2126R + 0.7152G + 0.0722B.
3
Contrastverhouding en nalevingscontroles
De contrastverhouding wordt berekend als (lichter + 0,05) / (donkerder + 0,05) en getoetst aan alle vijf WCAG-drempels: AA normale tekst (4.5:1), AA grote tekst (3:1), AAA normale tekst (7:1), AAA grote tekst (4.5:1) en UI-componenten (3:1). Resultaten worden bij elke toetsaanslag bijgewerkt.
4
Correctievoorstellen die de tint behouden
Als het paar niet voldoet aan WCAG AA, doorzoekt de tool de HSL-lichtheidsruimte — stapsgewijs vanaf de oorspronkelijke lichtheid in beide richtingen — om van elke kleur de dichtstbijzijnde variant te vinden die 4.5:1 haalt met dezelfde tint en verzadiging. De EyeDropper API (Chromium) is ook beschikbaar om elke kleur direct van je scherm te nemen.

Gerelateerde tools

👁️

Kleurenblindheidsimulator

Bekijk hoe je ontwerp eruitziet voor mensen met kleurvisiestoornissen. Simuleert protanopie, deuteranopie, tritanopie, achromatopsie en mildere afwijkingen.

Probeer hetBestanden blijven lokaal

📐

Wat is mijn schermresolutie

Zie je schermresolutie in CSS- en echte pixels, venstergrootte, pixelverhouding, kleurdiepte, HDR, aanraakondersteuning en verversingssnelheid, en kopieer alles.

Probeer het

🖥️

Dode-pixeltest

Controleer je scherm op dode of vastzittende pixels met volledig scherm zwart, wit, rood, groen, blauw en grijs, plus een optionele vastzittende-pixelhersteller.