Contrastchecker
Kies een voorgrond- en achtergrondkleur om de live contrastverhouding te zien en te controleren of deze voldoet aan de WCAG AA- en AAA-toegankelijkheidsrichtlijnen voor normale en grote tekst. Een live voorbeeld toont de combinatie in de praktijk.
Hoe het werkt
Kies je voorgrond- en achtergrondkleur met de kleurkiezers of door een hexcode te typen. De contrastverhouding wordt berekend uit de relatieve helderheid van beide kleuren en vergeleken met de WCAG-drempels voor normale tekst (4,5:1 voor AA, 7:1 voor AAA) en grote tekst (3:1 voor AA, 4,5:1 voor AAA).
Tip
Als een combinatie faalt, probeer dan de donkerdere kleur donkerder te maken of de lichtere lichter — zelfs kleine aanpassingen kunnen de verhouding over de volgende drempel tillen.
Wat telt als "grote tekst"?
WCAG definieert grote tekst als minstens 18pt (24px), of 14pt (~18,5px) vet — koppen en vergelijkbare opvallende tekst mogen de soepelere drempels voor grote tekst gebruiken.
Meer tools in deze categorie
Belichtingscalculator
Vind gelijkwaardige camerabelichtingen voor diafragma, sluitertijd en ISO.
Beeldverhouding-calculator
Schaal een afbeelding of video proportioneel en vind de vereenvoudigde verhouding.
CSS-verloopgenerator
Ontwerp een lineair of radiaal CSS-verloop en kopieer de gegenereerde code.
Kleurenpalet-generator
Zet elke basiskleur om in complementaire, analoge en triadische kleurenpaletten.
Kleurformaat-converter
Zet elke kleur direct om tussen HEX, RGB, HSL en CMYK, met een kopieerknop per formaat.
Typografie-schaalgenerator
Genereer een harmonieuze reeks lettergroottes op basis van een basisgrootte en een schaalverhouding, klaar om te kopiëren als CSS custom properties.