Contrast Checker berekent de WCAG 2.1 contrastverhouding tussen twee kleuren en beoordeelt deze op basis van AA/AAA-drempels voor zowel normaal als grote tekst. Live preview toont tekst weergegeven in de gekozen kleuren, en een knop "pagina-achtergrond kiezen" neemt een sample van de huidige pagina.
Toegankelijkheid wordt steeds meer vereist — WCAG-conformiteit is een wettelijke vereiste in veel jurisdicties, en zelfs waar dit niet het geval is, duwt slecht contrast gebruikers weg. Contrast Checker vertelt u onmiddellijk of twee kleuren aan WCAG-normen voldoen. Kies een voorgrond en achtergrond via color picker of plak hex-waarden; het gereedschap berekent de contrastverhouding met behulp van de officiële WCAG-luminantieformule en beoordeelt deze op basis van vier drempels: AA normaal (≥4,5:1), AA groot (≥3:1), AAA normaal (≥7:1) en AAA groot (≥4,5:1). Elke drempel toont een duidelijk Pass/Fail badge. Een live preview geeft grote en normale tekst weer in de gekozen kleuren zodat u de werkelijke visuele impact kunt zien. Een handige knop neemt een sample van de berekende achtergrondkleur van de huidge pagina — nuttig bij het testen van real-world combinaties. Alles wordt lokaal in uw browser uitgevoerd, geen uploads.
Gebruikt de officiële WCAG-luminantieformule om contrastverhouding te berekenen. Het resultaat is exact en komt overeen met elke compatibele toegankelijkheidschecker.
Pass/fail voor AA normaal (≥4,5:1), AA groot (≥3:1), AAA normaal (≥7:1), AAA groot (≥4,5:1) — allemaal weergegeven als een raster.
Geeft werkelijke grote en normale tekst weer in uw gekozen kleuren zodat u de visuele impact naast de numerieke verhouding ziet.
Met één klik neemt u een sample van de berekende achtergrondkleur van de huidy pagina — nuttig voor het testen van real-world combinaties.
Typ een hex-waarde of gebruik de native color picker. Waarden worden bidirectioneel gesynchroniseerd wanneer u een van beide bewerkt.
Met één klik omwisselen kunt u voorgrond en achtergrond omzetten — nuttig bij het controleren van omgekeerde thema's of hover-statussen.
Voordat u een kleurenpalet finaliseert, controleert u elke tekstkleur tegen de achtergrond om WCAG AA-conformiteit te garanderen — voorkomt later herwerk.
Gebruik "pagina-achtergrond kiezen" op een live site, plak vervolgens de werkelijke tekstkleur — vind a11y-schendingen in minuten zonder Lighthouse te openen.
Wanneer een merk een kleur kiest die a11y kan missen, gebruikt u de checker om de dichtstbijzijnde conforme variant (donkerder/lichter tint) te vinden.
Verifieer dat hover/actief/uitgeschakelde statuskleuren nog steeds aan contrastvereisten voldoen, niet alleen de standaardwaarde.
Donkere thema's mislukken vaak contrast voor grijs-op-grijs tekst. Controleer uw donkerste grijzen tegen uw donkerste achtergronden om deze op te vangen.
Klik op het Contrast-pictogram in de DevSuite Pro dock. Een paneel verschijnt met voorgrond- en achtergrondkleurvelden.
Gebruik de color picker of plak een hex-waarde voor elk. Live preview wordt bijgewerkt als u kleuren wijzigt.
Het grote getal (bijv. 4,8:1) is de contrastverhouding. Hoger is beter. 3 is het absolute minimum; 4,5 is doel voor normale tekst.
Pass/fail badges voor AA en AAA, normale en grote tekstgrootten, tonen in één oogopslag waar uw combinatie voor kwalificeert.
Als het mislukt, pas kleuren aan. Donker voorgrond of licht achtergrond (of omgekeerd) totdat het doelniveau Slaagt.
Installeer DevSuite Pro gratis en ontgrendel 64+ ontwikkelaarstools voor uw browser.
