What is the minimum contrast ratio for WCAG AA compliance?

For WCAG AA compliance, normal text requires a minimum contrast ratio of 4.5:1, while large text (18pt or 14pt bold) requires 3:1.

What is the difference between WCAG AA and AAA standards?

WCAG AAA requires higher contrast ratios: 7:1 for normal text and 4.5:1 for large text, compared to AA's 4.5:1 and 3:1 respectively.

How do I fix poor color contrast?

Use our automatic fix feature to adjust either text or background colors while maintaining your design intent, or manually adjust colors using HSL sliders with visual indicators showing optimal zones for AA/AAA compliance.

What are the visual indicators on the adjustment sliders?

The green zones and AA/AAA markers show optimal ranges for achieving WCAG compliance. The direction hints (Lighter/Darker) guide you toward better contrast based on your current color combination.

Can I test custom color combinations?

Yes, you can enter any hex color codes or use the color picker to select custom colors. The URL updates automatically so you can share specific color combinations.

Color Contrast Checker - WCAG AA & AAA Compliance Tool

1.00:1

Contrast

Fail

Zeer slecht

Normale tekst

AA (4.5:1)

✖

AAA (7:1)

✖

Grote tekst

AA (3:1)

✖

AAA (4.5:1)

✖

Tekstkleur

White

#ffffff

Achtergrondkleur

Black

#e24826

Snelle oplossingen

Voorbeeldtitel

De snelle bruine vos springt over de luie hond

Voorbeeld van kleine tekst (12px)

Tekst

#ffffff

Achtergrond

#e24826

WCAG-standaarden

Level AA

Minimale contrastverhouding van 4,5:1 voor normale tekst en 3:1 voor grote tekst. Vereist voor de meeste websites.

Level AAA

Verbeterde contrastverhouding van 7:1 voor normale tekst en 4,5:1 voor grote tekst. Aanbevolen voor optimale toegankelijkheid.

Onvoldoende contrast voor alle tekstgroottes: voldoet niet aan de WCAG-normen.

Kleurcontrastcontrole

Bereken de contrastverhouding van tekst- en achtergrondkleuren.

Kies een kleur met de pipet voor tekst en achtergrondkleur of voer een kleur in hexadecimale RGB-indeling in (bijvoorbeeld #259 of #2596BE). Je kunt de schuifregelaar aanpassen om de kleur te selecteren. De Web Content Accessibility Guidelines (WCAG) hebben een specifieke richtlijn om uit te zoeken of tekst leesbaar is voor ziende gebruikers. Dit criterium maakt gebruik van een bepaald algoritme om kleurencombinaties in vergelijkbare verhoudingen in kaart te brengen. Met behulp van deze formule stelt WCAG dat een kleurcontrastverhouding van 4,5:1 met tekst en achtergrond voldoende is voor normale tekst (body), en dat grote tekst (18+ pt normaal, of 14+ pt vet) ten minste een kleurcontrastverhouding van 3:1 moet hebben.

Belangrijkste kenmerken

• Realtime contrastverhoudingberekening
• WCAG AA & AAA-nalevingscontrole
• HSL-schuifregelaars voor fijnafstemming
• Meerdere voorbeeldformaten

Geavanceerde hulpmiddelen

• Automatische kleurcorrectie
• Tekst- en achtergrondvoorbeelden
• Kleurnaamdetectie
• Resultaten exporteren

ImageColorPicker.com

Kleurcontrast Controle