Kleurcontrastcontrole

Controleer het voorgrond-/achtergrondcontrast ten opzichte van WCAG AA en AAA. Bekijk de verhoudingsupdate terwijl u kleuren kiest.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

Controleer het voorgrond-/achtergrondcontrast aan de hand van de WCAG AA- en AAA-richtlijnen.
Draait in uw browser
Gratis te gebruiken

Hoe te gebruiken

Kies tekst- (voorgrond) en achtergrondkleuren.
Lees de contrastverhouding en AA/AAA-resultaten af.
Pas aan totdat je je doelniveau hebt bereikt.

How this tool works

Kies tekst- (voorgrond) en achtergrondkleuren.
Lees de contrastverhouding en AA/AAA-resultaten af.
Pas aan totdat je je doelniveau hebt bereikt.

Recommended settings

Gebruik eerst de standaardopties en pas deze indien nodig aan

Supported formats

Text / on-page input

File size and limits

Zeer complexe voorvertoningen met meerdere lagen kunnen op oudere telefoons langzamer aanvoelen.

Privacy

Kleur- en CSS-generatoren draaien volledig in uw browser. Previews en conversies uploaden nooit uw stijlen.

Common use cases

Gebruik Color Contrast Checker wanneer u maar wilt: Controleer het contrast van de voorgrond/achtergrond aan de hand van de WCAG AA- en AAA-richtlijnen.

Troubleshooting

Het voorbeeld ziet er anders uit na het plakken

Controleer of er concurrerende CSS op uw pagina aanwezig is (resets, overgenomen kleuren). Kopieer de gegenereerde regel eerst naar een geïsoleerd stylesheet.

FAQ

Uploadt dit mijn CSS?

Nee. Generatoren en converters worden in uw browser uitgevoerd met live preview.

Heb ik een account nodig?

Nee. Open de tool, pas de besturingselementen aan en kopieer de CSS.