Kleurcontrastcontrole

Maak uw tekst voor iedereen leesbaar

Controleer de contrastverhouding tussen een tekst- en achtergrondkleur aan de hand van WCAG AA- en AAA-standaarden, met een live preview en hex- of RGB-invoer.

Tekst met laag contrast is een van de meest voorkomende problemen met de toegankelijkheid. Deze checker berekent de exacte contrastverhouding tussen uw tekst- en achtergrondkleuren met behulp van de officiële WCAG-formule voor relatieve helderheid en vertelt u vervolgens of deze voldoet aan AA (4,5:1 voor normale tekst, 3:1 voor grote tekst) en de strengere AAA (7:1 en 4,5:1). Een live voorbeeld toont echte tekst in de door u gekozen kleuren.

Functies

WCAG AA & AAA geslaagd/mislukt resultaten
Live berekening van de contrastverhouding
Hex- en RGB-ingang met kleurkiezers
Live tekstvoorbeeld in uw kleuren
Normale en grote tekstdrempels
Wordt lokaal uitgevoerd in uw browser

Hoe Kleurcontrastcontrole te gebruiken

1
Kies de tekstkleur
Kies of typ de voorgrondkleur.
2
Kies de achtergrond
Kies of typ de achtergrondkleur.
3
Lees de verhouding
Bekijk de contrastverhouding en AA/AAA-resultaten.
4
Aanpassen
Pas de kleuren aan totdat ze voorbijgaan.

Veelvoorkomende gebruiksscenario's

Controleer of de UI-tekst voldoet aan de WCAG-toegankelijkheid
Controleer het knop- en linkcontrast
Controleer een merkkleurenpalet
Corrigeer de marketingkopie met laag contrast

Gedetailleerde gids

Voer kleuren in zoals jij dat wilt

Gebruik de kleurkiezers of typ hexadecimale codes en rgb()-waarden rechtstreeks, de tool parseert beide. Wanneer u een van de kleuren aanpast, worden de verhouding en de badges voor geslaagd/mislukt onmiddellijk bijgewerkt, zodat u een tint kunt verschuiven totdat deze voldoet. Alles draait lokaal, waardoor het een snelle metgezel is bij het ontwerpen van de gebruikersinterface, thema's en marketingpagina's.

Wat de WCAG-contrastniveaus betekenen

WCAG 2 meet het contrast in een verhouding van 1:1 (geen contrast) tot 21:1 (zwart op wit). Niveau AA, de gebruikelijke juridische en industriële basislijn, vereist minimaal 4,5:1 voor normale tekst en 3:1 voor grote tekst, wat betekent 24px normaal of ongeveer 18,66px vet en hoger. Niveau AAA verhoogt deze naar 7:1 en 4,5:1. Onderdelen van de gebruikersinterface, zoals invoerranden, focusringen en pictogrammen die betekenis dragen, hebben een verhouding van minimaal 3:1 nodig ten opzichte van hun omgeving. De verhouding wordt berekend op basis van de relatieve helderheid van elke kleur, dus twee kleuren die er verschillend uitzien, kunnen nog steeds mislukken als ze even helder zijn, wat gebruikelijk is bij rood op groen.

Een defect kleurenpaar repareren

Wanneer een paar mislukt, verander dan de lichtheid in plaats van de tint: maak de tekst donkerder of maak de achtergrond lichter in kleine stappen totdat de verhouding voorbij is, en de kleur zal nog steeds aanvoelen als uw merk. Merkkleuren in de middentonen, zoals medium oranje of groenblauw, kunnen bij AA vaak geen witte tekst dragen. Gebruik in dat geval de merkkleur voor grote koppen, randen of achtergronden en zet de hoofdtekst in een donkerdere tint. Test ook tijdelijke tekst en uitgeschakelde statussen, aangezien deze vaak te zwak zijn. Houd er rekening mee dat de verhouding geen rekening houdt met dunne lettertypen of tekst op afbeeldingen, dus laat in die gevallen extra marge over.

Veelgestelde vragen

Welke contrastverhouding heb ik nodig om voor WCAG te slagen?

Voor AA heeft normale tekst 4,5:1 nodig en grote tekst 3:1. Voor de strengere AAA heeft normale tekst 7:1 nodig en grote tekst 4,5:1. Grote tekst is ongeveer 18pt of 14pt vetgedrukt.

Hoe wordt de contrastverhouding berekend?

Het gebruikt de WCAG-formule voor relatieve luminantie voor beide kleuren en deelt vervolgens de lichtere luminantie (plus 0,05) door de donkerdere (plus 0,05), wat een waarde oplevert van 1:1 tot 21:1.

Kan ik zowel RGB als hex invoeren?

Ja: typ hexadecimale codes zoals #1e293b of rgb(30, 41, 59), of gebruik de kleurkiezers. Beide formaten worden onmiddellijk geparseerd.

Is het gratis?

Ja, volledig gratis, zonder aanmelding, volledig in uw browser.

Hoe controleer ik of twee kleuren samen toegankelijk zijn?

Voer de hexadecimale waarden voor tekst en achtergrond in; de checker berekent de contrastverhouding en laat zien of deze voldoet aan WCAG AA en AAA voor normale en grote tekst.

Waarom is kleurcontrast belangrijk voor de toegankelijkheid?

Een laag contrast maakt tekst moeilijk leesbaar voor mensen met slechtziendheid of kleurenblindheid. Door aan de WCAG-ratio's te voldoen, blijft de inhoud voor iedereen leesbaar en is dit een algemene toegankelijkheids- en SEO-vereiste.

Maak uw tekst voor iedereen leesbaar

Functies

Hoe Kleurcontrastcontrole te gebruiken

Kies de tekstkleur

Kies de achtergrond

Lees de verhouding

Aanpassen

Veelvoorkomende gebruiksscenario's