Voer HEX-kleuren in of kies Pantone-kleuren voor voorgrond en achtergrond.
Bekijk de contrastverhouding en WCAG AA- of AAA-resultaten voor normale tekst, grote tekst en UI-componenten.
Gebruik het live voorbeeld, wissel kleuren, kopieer CSS of probeer toegankelijke Pantone-suggesties.

Gebruikssituaties voor de contrastchecker

Valideer merk-kleurparen voordat je ze in digitale layouts gebruikt.
Controleer knoppen, formulieren, navigatie en andere UI-componenten op leesbaar contrast.
Vergelijk Pantone-geïnspireerde paletten voordat je drukkleuren aanpast voor schermen.
Documenteer WCAG-contrastresultaten voor toegankelijkheidsreviews en designoverdracht.

Kleurcontrastchecker voor WCAG-, UI- en Pantone-workflows

Gebruik deze contrastchecker wanneer je moet bevestigen dat tekstkleur, achtergrond, knopstatus of merkpalet leesbaar is voordat het in een website, app, presentatie of designsysteem terechtkomt.

Lees het WCAG-contrastresultaat correct

De tool berekent de relatieve luminantie van beide kleuren en geeft de contrastverhouding terug die WCAG gebruikt. Normale bodytekst heeft meestal 4.5:1 nodig voor AA en 7:1 voor AAA, terwijl grote tekst en essentiële UI-componenten lagere drempels hebben.

Verbind Pantone-kleuren met digitale toegankelijkheid

Pantone-kleuren worden vaak gekozen voor merk en drukwerk, maar hun schermwaarden moeten nog steeds op toegankelijkheid worden gecontroleerd. Zoek Pantone-namen of HEX-waarden, bekijk het paar en vergelijk toegankelijke alternatieven voordat je kleuren overdraagt aan design of development.

Een praktische workflow voor ontwerpers en ontwikkelaars

Begin met de exacte HEX-waarden uit je designbestand, test voorgrond en achtergrond in beide richtingen, kopieer CSS of rapport en bewaar het goedgekeurde kleurenpaar bij de rest van je Pantone-palettendocumentatie.

Veelgestelde vragen over de contrastchecker

Wat meet deze contrastchecker?

Hij meet de luminantiecontrastverhouding tussen een voorgrondkleur en een achtergrondkleur en vergelijkt het resultaat met de WCAG-drempels.

Wat zijn de contrastvereisten voor WCAG AA en AAA?

WCAG AA vereist minimaal 4.5:1 voor normale tekst en 3:1 voor grote tekst of UI-componenten. WCAG AAA vereist 7:1 voor normale tekst en 4.5:1 voor grote tekst.

Kunnen Pantone-kleuren worden gecontroleerd op webtoegankelijkheid?

Ja. Pantone-referenties kunnen worden omgezet naar schermkleurwaarden en daarna worden gecontroleerd op digitaal contrast. Verifieer uiteindelijke kleuren altijd in het medium waarin ze verschijnen.

Contrastdisclaimer

Resultaten worden berekend uit digitale kleurwaarden en zijn bedoeld voor toegankelijkheidsplanning. Fysieke druk, materialen, licht en schermkalibratie kunnen de waargenomen contrastwaarde veranderen.