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

#FFFFFF

#ffffff

Achtergrondkleur

#546E7A

#546e7a

Snelle oplossingen

Voorbeeldtitel

De snelle bruine vos springt over de luie hond

Voorbeeld van kleine tekst (12px)

Tekst

#ffffff

Achtergrond

#546e7a

WCAG-normen

Level AA

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

Level AAA

Verhoogde 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 WCAG-normen.

Kleurcontrastcontrole

Bereken de contrastverhouding van tekst- en achtergrondkleuren.

Kies een kleur met behulp van de color picker voor tekst- en achtergrondkleur of voer een kleur in RGB hexadecimaal formaat in (bijv. #259 of #2596BE). Je kunt de schuifregelaar aanpassen om een kleur te selecteren. De Web Content Accessibility Guidelines (WCAG) heeft een specifieke richtlijn om te helpen bepalen of tekst leesbaar is voor ziende gebruikers. Dit criterium gebruikt een bepaald algoritme om kleurencombinaties in vergelijkbare verhoudingen in kaart te brengen. Volgens deze formule stelt WCAG dat een 4.5:1 kleurcontrast ratio met tekst en zijn achtergrond voldoende is voor normale tekst, en grote tekst (18+ pt normaal, of 14+ pt vet) een minimum contrastverhouding van 3:1 moet hebben.

Belangrijkste kenmerken

• Realtime contrastverhouding berekening
• WCAG AA & AAA nalevingscontrole
• HSL schuifregelaars voor verfijning
• Meerdere voorbeeldformaten

Geavanceerde tools

• Automatisch kleuren corrigeren
• Tekst- en achtergrondvoorbeelden
• Kleurnaam detectie
• Resultaten exporteren