Kleurcontrast en leesbaarheid checker

Leesbaarheid is het luminantieverschil tussen de tekstkleur en de achtergrondkleur. Hoe groter het verschil, hoe makkelijker de tekst te lezen is. Te laag contrast maakt inhoud moeilijk leesbaar – vooral voor mensen met een visuele beperking, ouderen of bij moeilijke lichtomstandigheden (bijv. op een telefoon in direct zonlicht).

Volgens de Wereldgezondheidsorganisatie (WHO) hebben ongeveer 2,2 miljard mensen wereldwijd een vorm van visuele beperking. Daarnaast hebben miljoenen kleurenblindheid (ongeveer 8% van de mannen en 0,5% van de vrouwen) en velen ervaren leeftijdsgerelateerde achteruitgang van het gezichtsvermogen.

De tool berekent de contrastverhouding met de formule uit WCAG 2.1 (Web Content Accessibility Guidelines) – internationale richtlijnen voor digitale toegankelijkheid. Het resultaat maakt een objectieve beoordeling mogelijk of kleuren leesbaar genoeg zijn, ongeacht monitorinstellingen of individuele kleurwaarneming.

De tool toont de contrastverhouding op een schaal van 1:1 (geen contrast) tot 21:1 (maximaal contrast – zwart op wit). Het resultaat wordt vergeleken met drempels gedefinieerd in de WCAG-standaard:

• Normale tekst – vereist minimaal 4,5:1 voor Niveau AA (minimumstandaard) of 7:1 voor Niveau AAA (verbeterde standaard). Geldt voor tekst onder 18pt (24px) of onder 14pt (18,5px) vet.
• Grote / vette tekst – vereist minimaal 3:1 voor Niveau AA of 4,5:1 voor Niveau AAA. Geldt voor tekst vanaf 18pt (24px) of vanaf 14pt (18,5px) vet – koppen, knoppen, accentueringen.
• Pictogrammen en UI-elementen – vereisen minimaal 3:1 voor Niveau AA. Geldt voor pictogrammen, knoppen, formuliervelden en andere interface-elementen die informatie overbrengen.

Niveau AA is het minimum dat vereist wordt door digitale toegankelijkheidsregelgeving in veel landen, waaronder de EU-richtlijn Webtoegankelijkheid. Niveau AAA biedt betere leesbaarheid maar is niet altijd praktisch haalbaar voor alle elementen.

Als het contrast te laag is, hoeft u niet door trial-and-error naar de juiste kleur te zoeken. De Afstemmen-functie vindt automatisch een tekstkleurvariant die voldoet aan de geselecteerde contrastdrempel.

Hoe afstemming werkt:

1. Selecteer het afstemmingsdoel uit de lijst – bijv. AA voor normale tekst of AAA voor grote tekst.
2. Klik op de knop Afstemmen.
3. De tool doorzoekt lichtheidsvarianten van de tekstkleur en stelt de dichtstbijzijnde voor die voldoet aan de eisen.
4. De voorgestelde kleur kan naar het klembord worden gekopieerd of direct worden ingesteld als de nieuwe tekstkleur.

Het algoritme behoudt de tint en verzadiging van de oorspronkelijke kleur en wijzigt alleen de lichtheid. De voorgestelde kleur blijft consistent met de visuele identiteit terwijl het voldoet aan de toegankelijkheidsstandaard.

Ik zie een foutmelding over het kleurformaat

Controleer het kleurformaat. De HEX-code moet beginnen met # en 3 of 6 tekens bevatten (bijv. #fff of #ffffff). Controleer bij het RGB-formaat of de waarden gescheiden zijn door komma's en binnen het bereik 0-255 vallen.

De functie Aanpassen vindt geen geschikte kleur

Wanneer de achtergrond en tekst een vergelijkbare helderheid hebben in dezelfde tint, kan het algoritme geen variant vinden die aan de vereisten voldoet zonder de tint te wijzigen. Overweeg in dat geval de achtergrondkleur te wijzigen of een geheel andere tekstkleur te kiezen.

De kleur in de kleurkiezer komt niet overeen met de ingevoerde code

De kleurkiezer in de browser ondersteunt alleen het HEX-formaat zonder transparantie. Als u een kleur invoert in RGBA- of HSLA-formaat met transparantie, toont de kleurkiezer alleen het kleurgedeelte (zonder alpha). De contrastberekeningen houden nog steeds rekening met de transparantie.

Kleurenblindheid treft ongeveer 8% van de mannen en 0,5% van de vrouwen. Mensen met kleurenblindheid kunnen moeite hebben om bepaalde kleurparen te onderscheiden, zelfs als het luminantiecontrast voldoende is.

Meest voorkomende typen kleurenblindheid:

• Deuteranopie – moeite met het onderscheiden van groen en rood (meest voorkomende vorm)
• Protanopie – moeite met het zien van rood
• Tritanopie – moeite met het zien van blauw en geel (zeldzaam)

Deze tool controleert luminantiecontrast, wat belangrijk is voor alle gebruikers. Bij het ontwerpen is het echter ook verstandig om problematische kleurcombinaties te vermijden (bijv. rode tekst op groene achtergrond) en niet uitsluitend op kleur te vertrouwen om informatie over te brengen – gebruik ook vormen, pictogrammen en tekst.