Kleurcontrast Checker
Controleer kleurcontrastverhoudingen voor WCAG 2.1-naleving. Valideer AA- en AAA-standaarden direct.
Wat is de WCAG-contrastverhouding?
De WCAG-contrastverhouding meet het luminantieverschil tussen voorgrond- en achtergrondkleuren. Van 1:1 tot 21:1.
Wat zijn de WCAG AA- en AAA-vereisten?
WCAG AA vereist minimaal 4.5:1 voor normale tekst en 3:1 voor grote tekst. AAA vereist 7:1 en 4.5:1.
Wat telt als grote tekst?
Grote tekst is gedefinieerd als 18pt (24px) of groter, of 14pt (18.66px) vet of groter.
Waarom is kleurcontrast belangrijk?
Goed contrast zorgt ervoor dat tekst leesbaar is voor mensen met visuele beperkingen en verbetert de leesbaarheid voor iedereen.
Hoe bereken ik de contrastverhouding?
Wordt berekend met relatieve luminantiewaarden. De formule is (L1 + 0.05) / (L2 + 0.05).
Wat is het minimumcontrast voor UI-elementen?
WCAG vereist minimaal 3:1 voor UI-componenten en grafische objecten.
Kan ik elke kleurcombinatie gebruiken?
Niet alle combinaties voldoen aan toegankelijkheidsstandaarden. Gebruik deze checker om te valideren.
Wat is relatieve luminantie?
Het is de waargenomen helderheid van een kleur, van 0 (zwart) tot 1 (wit). Berekend met de sRGB-kleurruimte.
Moet ik het contrast van afbeeldingen controleren?
Tekst in afbeeldingen moet aan dezelfde eisen voldoen. Voor decoratieve afbeeldingen geldt dit niet.
Welke tools helpen bij contrast?
Gebruik browser developer tools, design plugins of online checkers zoals deze.
Hoe Kleurcontrast Checker te gebruiken
Controleer meteen of tekst- en UI-contrast voldoet aan de AA- en AAA-drempels van WCAG 2.1, volledig in je browser. Vul twee kleuren in; de verhouding wordt lokaal berekend en verlaat je apparaat niet.
- Typ of plak je tekstkleur in het veld Foreground Color, in elk ondersteund formaat zoals HEX of RGB.
- Vul het veld Background Color met de kleur achter de tekst om de contrastverhouding te berekenen.
- Lees de berekende verhouding en de AA- en AAA-slagingsbadges voor gewone en grote tekst.
- Pas een van beide kleuren aan tot de verhouding boven 4,5:1 voor lopende tekst of 3:1 voor grote tekst en UI-componenten uitkomt.
- Wissel de waarden van Foreground Color en Background Color om de omgekeerde combinatie te testen, zoals lichte tekst op een donker thema.
AAA (7:1) is een mooi streven voor lange teksten, maar 4,5:1 (AA) is de ondergrens die de meeste toegankelijkheidsrichtlijnen eisen.
Gerelateerde tools
- Kleurkiezer Kies elke kleur van het scherm met de pipet. Kopieer HEX, RGB, HSL codes direct. Gratis online kleurkiezer tool.
- Kleurenpalet Generator Maak direct mooie, harmonieuze kleurenpaletten met onze gratis online generator. Ondersteunt monochromatische, analoge, complementaire, triadische, split-complementaire en tetradische modi. Pas kleuren aan met HSL-schuifregelaars, vergrendel favorieten en exporteer als CSS, Tailwind, JSON of SVG. 100% browser-gebaseerd, uw gegevens verlaten nooit uw apparaat.
- Kleurenblindheid Simulator Gratis online kleurenblindheid simulator. Test ontwerpen voor Protanopie, Deuteranopie, Tritanopie en andere typen. 100% privé, werkt in uw browser.
- GIF Frames Splitsen Extraheer en download afzonderlijke frames uit GIF-animaties als PNG of sprite-sheet. Gratis online tool met preview en ZIP-export.
- GIF Omkeren Keer de afspeelvolgorde van GIF-animaties gratis online om. Upload, bekijk en download direct.
- GIF Snelheidswijziger Wijzig de GIF-animatiesnelheid online. Versnel of vertraag GIF-bestanden direct.
- Video naar GIF Converteer video online naar geanimeerde GIF. Pas kwaliteit, framesnelheid en resolutie rechtstreeks in uw browser aan zonder te uploaden.
- Meme Maker Gratis online meme-maker. Voeg klassieke boven- en onderteksten toe aan elke afbeelding, sleep ze vrij en download je meme direct als PNG of JPEG.