Kleurcontrastchecker
Voer twee kleuren in en zie direct de WCAG-contrastverhouding met AA- en AAA-richtlijnen.
Voer voorgrond- en achtergrondkleuren in hex of RGB in om direct de WCAG-contrastverhouding te berekenen, AA/AAA-resultaten te zien, tekst te bekijken en optionele aanpassingsvoorstellen te krijgen.
Hoe u deze kleurcontrastchecker gebruikt
Typ of plak een voorgrond- en achtergrondkleur. De tool normaliseert geldige invoer naar hoofdletter-hex, berekent direct de WCAG-contrastverhouding en toont geslaagd/niet geslaagd voor AA- en AAA-drempels. Gebruik Correctie voorstellen, deel via URL of reset.
WCAG-contrastverhouding-drempels
WCAG 2.x vereist minimaal 4,5:1 voor normale tekst (AA), 3:1 voor grote tekst (AA), 7:1 voor normale tekst (AAA) en 4,5:1 voor grote tekst (AAA). Deze tool toont altijd alle vier resultaten.
Ondersteunde kleurformaten
Voer #RGB, #RRGGBB, rgb(r,g,b) of komma-gescheiden r,g,b in. Kanalen moeten gehele getallen 0–255 zijn. Alfa-transparantie, 8-cijferige hex, HSL/HSLA en CSS-kleurnamen worden in v1 niet ondersteund.
Wat geslaagd en niet geslaagd betekenen
Geslaagd betekent dat de berekende verhouding de drempel voor dat niveau haalt of overschrijdt. Niet geslaagd betekent het tegendeel. Labels en pictogrammen vergezellen de kleur zodat resultaten niet alleen via kleur begrijpelijk zijn.
Veelgestelde Vragen
Waarom worden alfa en verlopen niet ondersteund?
Versie 1 evalueert alleen volledig dekkende sRGB-kleuren. Alfa-menging en verlopen vereisen compositieregels die deze tool nog niet modelleert; rgba(), 8-cijferige hex en verloopanalyse vallen buiten de MVP.
Hoe wordt de contrastverhouding berekend?
De checker gebruikt de WCAG-formule voor relatieve luminantie bij dekkende sRGB: kanalen lineariseren, luminantie berekenen, dan (lichter + 0,05) / (donkerder + 0,05). Weergave op twee decimalen; drempelcontroles gebruiken de volledige waarde.
Wat doet Correctie voorstellen?
Het verplaatst de gekozen voorgrond- of achtergrondkleur deterministisch langs een helderheidspad naar zwart of wit tot het gekozen WCAG-niveau is bereikt, en geeft de dichtstbijzijnde conforme hex en resulterende verhouding terug indien beschikbaar.
Kan ik een specifiek kleurenpaar delen?
Ja. Geldige voorgrond-, achtergrond- en tekstgrootte-waarden synchroniseren naar URL-parameters (bijv. ?fg=000000&bg=FFFFFF&size=normal) om direct naar een resultaat te linken.
Slaat de pagina mijn kleuren op?
Berekeningen draaien volledig in uw browser. Het laatste geldige kleurenpaar kan voor gemak in localStorage op uw apparaat worden opgeslagen; gebruik Resetten om invoer, URL-parameters en opgeslagen staat te wissen.