Kleurcontrastcontrole

Controleer je kleuren

Test kleurcombinaties om te zorgen dat ze voldoen aan de WCAG-toegankelijkheidsnormen voor tekstleesbaarheid.

1.00:1

Contrast

Niet geslaagd

Zeer slecht

Normale tekst

AA (4.5:1)

AAA (7:1)

Grote tekst

AA (3:1)

AAA (4.5:1)

Tekstkleur

Achtergrondkleur

Snelle oplossingen

Voorbeeldtitel

De snelle bruine vos springt over de luie hond

Voorbeeld van kleine tekst (12px)

Tekst

#ffffff

Achtergrond

#018786

WCAG-normen

Niveau AA

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

Niveau 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.

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

Veelgestelde vragen

Voor WCAG AA-naleving vereist normale tekst een minimale contrastverhouding van 4,5:1, terwijl grote tekst (18pt of 14pt vet) 3:1 vereist.

WCAG AAA vereist hogere contrastverhoudingen: 7:1 voor normale tekst en 4,5:1 voor grote tekst, tegenover 4,5:1 en 3:1 bij AA.

Gebruik onze functie voor automatisch corrigeren om tekst- of achtergrondkleuren aan te passen met behoud van je ontwerp, of pas kleuren handmatig aan met de HSL-schuifregelaars met visuele indicatoren die de optimale zones voor AA/AAA-naleving tonen.

De groene zones en AA/AAA-markeringen tonen de optimale bereiken om WCAG-naleving te halen. De richtingsaanwijzingen (Lichter/Donkerder) helpen je naar een beter contrast op basis van je huidige kleurcombinatie.

Ja, je kunt elke hexkleurcode invoeren of de kleurkiezer gebruiken om eigen kleuren te kiezen. De URL wordt automatisch bijgewerkt, zodat je specifieke kleurcombinaties kunt delen.