Kleurcontrastcontrole

Gratis WCAG-kleurcontrastcontrole: test tekst- en achtergrondkleuren op AA- en AAA-compatibiliteit in uw browser. Voer hexadecimale of RGB-waarden in, bekijk de contrastverhouding en ben direct geslaagd/mislukt. Geen login, geen upload.

Wat meet deze kleurcontrastchecker?

Het berekent de WCAG 2.x-contrastverhouding tussen een voorgrondkleur (tekstkleur) en een achtergrondkleur met behulp van de relatieve luminantie van sRGB. U krijgt een numerieke verhouding (bijvoorbeeld 4,52:1) plus geslaagd/mislukt voor WCAG AA- en AAA-drempels voor normale tekst en grote tekst. Het is een ontwerp-QA-hulpmiddel, geen volledig geautomatiseerde toegankelijkheidsaudit van uw hele site.

Welke kleurformaten worden ondersteund?

Hex (#RGB, #RRGGBB, #RRGGBBAA), rgb() en rgba(). Plak merkpaletwaarden uit Figma-tokens, CSS-variabelen of ontwerpdocumenten. Een korte hex, zoals #fff, breidt uit naar #ffffff voordat de luminantie wordt berekend.

Wat is het verschil tussen WCAG AA en AAA?

AA is de gebruikelijke juridische en productbasislijn: 4,5:1 voor normale tekst, 3:1 voor grote tekst. AAA is strenger: 7:1 normaal, 4,5:1 groot. Veel marketingsites richten zich op AA voor bodycopy en AAA alleen voor hero-koppen of risicovolle gebruikersinterfaces. Deze tool laat beide zien, zodat je een verdedigbaar doelwit met design kunt kiezen.

Wat telt als grote tekst voor WCAG?

Grote tekst heeft een normale dikte van minimaal 18 punten (24 CSS px), of minimaal 14 punten vetgedrukt (ongeveer 18,66 CSS px). Knoppen, bijschriften en kleine lettertjes voldoen vaak niet aan de AA-norm, zelfs als de koppen passeren. Controleer elk formaat dat u verzendt, niet alleen het H1-staal.

Worden mijn merkkleuren geüpload?

Nee. Parseren en luminantieberekeningen worden volledig in uw browser uitgevoerd. Niet-uitgebrachte paletexperimenten en client-NDA-kleuren blijven op uw apparaat staan. Wis velden op gedeelde machines als u klaar bent.

Heeft transparantie invloed op de contrastverhouding?

rgba- en #RRGGBBAA-waarden worden geparseerd, maar het contrast wordt geëvalueerd op ondoorzichtige sRGB-kanalen: de checker maakt geen alfa-samengestelde tekst over fotografische achtergronden. Voor tekst op afbeeldingen proeft u de effectieve kleur achter de kopie of gebruikt u eerst een effen overlay en controleert u vervolgens opnieuw.

Is deze WCAG-contrastcontrole gratis?

Ja. Gratis zonder login voor de kernverhouding en het pass/fail-pad.

  • text-diff
  • word-counter
  • readability-checker
  • sentiment-analyzer