QuickATools

Developer-tools · Free browser tool

WCAG kleurcontrastcontrole

Controleer tekst-op-achtergrond kleurcontrastratio's in realtime. Verifieer WCAG 2.1 AA- en AAA-compliance direct voor toegankelijk webdesign.

Colors

Pick or type hex values for text and background.

#
#

Live preview

Sample heading

The quick brown fox jumps over the lazy dog. Body text should stay readable at this size for AA compliance (4.5:1).

Smaller supporting copy — check Normal Text AA/AAA below.

Contrast ratio

17.74:1

Range is 1:1 (identical) to 21:1 (black on white).

Text luminance
0.0092
rgb(17, 24, 39)
Background luminance
1.0000
rgb(255, 255, 255)

WCAG 2.1 compliance

Large text means at least 18pt (24px) regular or 14pt (18.66px) bold.

  • Normal text · AA

    Body copy under ~18pt / 14pt bold · ≥ 4.5:1

    Pass

  • Normal text · AAA

    Enhanced contrast for body copy · ≥ 7:1

    Pass

  • Large text · AA

    ≥18pt regular or ≥14pt bold · ≥ 3:1

    Pass

  • Large text · AAA

    Enhanced contrast for large text · ≥ 4.5:1

    Pass

Frequently Asked Questions

Welke contrastratio's eist WCAG 2.1 eigenlijk?

WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) eist een contrastratio van minstens 4.5:1 voor normale tekst en 3:1 voor large text op Level AA. Level AAA (1.4.6 Contrast Enhanced) verhoogt die floors naar 7:1 voor normale tekst en 4.5:1 voor large text. Ratio's worden berekend uit de relatieve luminantie van elke kleur en lopen van 1:1 (identieke kleuren) tot 21:1 (puur zwart op puur wit).

Wat is het praktische verschil tussen AA en AAA?

AA is het meest gangbare compliancedoel voor publieke websites, overheidsdiensten en commerciële producten — het balanceert leesbaarheid met ontwerpflexibiliteit. AAA is een strenger enhanced level wanneer je maximale leesbaarheid nodig hebt (bijvoorbeeld long-form reading experiences of publiek met significante low vision). AAA voor elk UI-element halen is vaak onpraktisch, dus mikken veel teams globaal op AA en AAA voor kritieke bodytekst.

Wat telt als "large text" onder WCAG?

Large text is gedefinieerd als minstens 18 point (typisch ~24px) regular weight, of minstens 14 point (typisch ~18.66px) bold. Headings en hero-copy kwalificeren vaak; bodyparagrafen meestal niet. Large text krijgt een lagere contrastdrempel omdat grotere glyphs leesbaar blijven bij zwakker contrast — maar je moet nog steeds de werkelijk gerenderde grootte in je CSS verifiëren, niet alleen het designbestand.

Waarom telt kleurcontrast zo zwaar voor toegankelijkheid?

Laag contrast is een van de meest voorkomende toegankelijkheidsfouten. Gebruikers met low vision, ouderen, mensen op dimme of zonovergoten schermen, en velen met kleurenblindheid vertrouwen allemaal op voldoende luminantieverschil — niet alleen hue — om tekst te lezen. Contrast vroeg checken voorkomt interfaces te shippen die er gepolijst uitzien onder ideale omstandigheden maar onbruikbaar worden voor een groot deel van echte bezoekers.

Tools die je ook nodig kunt hebben

Ontdek andere gratis browserutilities voor verkopers, creators en professionals.

Waarom kleurcontrast non-negotiable is voor toegankelijke interfaces

Barrier-free design is geen nice-to-have polishstap — het is hoe mensen met low vision, kleurenblindheid of hard outdoor glare je UI nog steeds lezen. WCAG 2.1 definieert minimale contrastratio's tussen tekst en achtergrond zodat content leesbaar blijft voor een veel breder bereik van gebruikers. Die drempels missen sluit mensen stil uit van formulieren, docs, dashboards en marketingpagina's die er voor designers op gekalibreerde monitors prima uitzien.

Overheidssites, enterprise-producten en veel globale consumer apps worden verwacht minstens WCAG AA te halen. Contrast in de browser checken — met dezelfde relatieve-luminantieformule die de specificatie gebruikt — laat je palettebeslissingen valideren voordat ze shippen, zonder brandkleuren naar een third-party service te uploaden. Wissel tekst en achtergrond, preview large vs normal text, en deel een palette-link met je team wanneer een combinatie slaagt.

AA eist 4.5:1 voor normale tekst en 3:1 voor large text; AAA verhoogt die bars naar 7:1 en 4.5:1. Large text betekent doorgaans 18pt (ongeveer 24px) regular of 14pt (ongeveer 18.66px) bold. Gebruik deze tool als snelle gate in designreviews, en bevestig daarna de uiteindelijke UI in context — iconen, gradients en overlays kunnen effectief contrast veranderen zelfs wanneer twee platte hexwaarden slagen.

Meer developer utilities op deze site: formpatronen valideren met de Regex Tester, auth tokens inspecteren in de JWT Decoder, design tokens als JSON opruimen met de JSON Formatter & Validator, of assets encoderen via Base64 Encode/Decode. Voor marketplace-productfoto's hergebruikt de Product Photo Background Checker dezelfde luminantierekensom tegen echte imagery.