- info@audithouse.nl
- 070 217 01 07
- Westeinde 81 2512 GV Den Haag
Test je kleurencombinaties voor optimale leesbaarheid. Gebruik de standaard WCAG 2.2 richtlijnen, of schakel om naar APCA (WCAG 3.0) voor een perceptueel nauwkeurigere contrastscore.
Body tekst (14px - 21px)
Koppen (24px+) of Vet (18px+)
Knoppen, iconen, randen
Digitale toegankelijkheid begint bij een goede leesbaarheid. Met de juiste kleurencombinaties zorg je ervoor dat jouw website, app of document bruikbaar is voor iedereen, inclusief mensen met een visuele beperking, kleurenblindheid of simpelweg vermoeide ogen. Onze geavanceerde Kleurcontrast Checker helpt je om direct te valideren of jouw ontwerp voldoet aan de (wettelijke) eisen voor webtoegankelijkheid. Uniek aan deze tool is dat je niet alleen kunt testen volgens de huidige standaard (WCAG 2.2), maar ook alvast kunt anticiperen op de toekomst met het nieuwe, perceptueel nauwkeurigere APCA-algoritme (voorloper van WCAG 3.0). Zo bouw je vandaag al aan de toegankelijkheidsstandaarden van morgen.
Het testen van je kleuren is eenvoudig. Voer de HEX-kleurcodes in via de kleurkiezer of typ ze handmatig in. De tool berekent razendsnel of je kleurencombinatie voldoende contrast biedt voor normale tekst, grote koppen en grafische elementen (zoals knoppen).
Kies je voor de WCAG 2.2 methode? Dan streef je voor normale tekst naar een minimale verhouding van 4.5:1 (Niveau AA) en bij voorkeur 7:1 (Niveau AAA).
Schakel je over naar de APCA methode? Dan toont de tool een zogeheten Lc-score (Lightness Contrast). Deze moderne methode houdt veel beter rekening met hoe het menselijk oog contrast daadwerkelijk waarneemt. Hoe hoger de Lc-score, hoe beter de leesbaarheid. Groene vinkjes betekenen dat je ontwerp ‘accessibility-proof’ is!
De huidige WCAG 2.2 standaard gebruikt een wiskundige formule op basis van pure luminantie. In de praktijk geeft dit soms onverwachte resultaten, vooral bij lichte tekst op een donkere achtergrond of felle kleuren. APCA (Accessible Perceptual Contrast Algorithm) is ontwikkeld voor de toekomstige WCAG 3.0 richtlijnen. Dit algoritme sluit veel beter aan bij de menselijke perceptie en houdt rekening met de lettergrootte en de dikte (weight) van het font. APCA geeft een veel realistischer beeld van de daadwerkelijke leesbaarheid.
Niveau AA is de wereldwijde basisstandaard voor webtoegankelijkheid en is in veel landen wettelijk verplicht voor (semi-)overheden en, met de komst van de Europese Toegankelijkheidsrichtlijn (European Accessibility Act), straks ook voor veel commerciële bedrijven en webshops. Niveau AAA is de allerstrengste norm en is met name bedoeld voor websites of applicaties die zich specifiek richten op ouderen of mensen met een visuele beperking. Het is vaak niet haalbaar (of vereist) om een hele website aan AAA te laten voldoen, maar voor belangrijke teksten is het zeker een mooi streven.
Nee, binnen de WCAG-richtlijnen zijn logo’s en merknamen expliciet vrijgesteld van de minimale contrastvereisten. Dit betekent dat je de huisstijlkleuren in het logo niet per se hoeft aan te passen. Voor andere grafische interface-elementen, zoals de randen van invoervelden, iconen en belangrijke ‘Call to Action’ knoppen, geldt wél een minimale contrastratio van 3:1 (Niveau AA).
Een goed kleurcontrast gaat veel verder dan alleen compliance en wetgeving; het verbetert de algehele gebruikerservaring (UX) aanzienlijk. Denk aan mensen die je website op hun smartphone bekijken in de felle buitenlucht of in een ruimte met weerspiegelend licht. Bovendien hechten zoekmachines zoals Google steeds meer waarde aan gebruiksvriendelijke en toegankelijke websites, wat betekent dat een toegankelijke website ook een positieve impact kan hebben op je vindbaarheid (SEO).
Als je combinatie niet de benodigde AA- of AAA-score behaalt, kun je twee dingen doen. Bij de WCAG 2.2 richtlijnen helpt het vaak al om de tekstkleur iets donkerder te maken, of de achtergrondkleur iets lichter (of vice versa). Daarnaast kun je de tekst groter of dikker maken (Bold). Grote en dikke teksten hebben namelijk een lagere contrastratio nodig om goed leesbaar te zijn. In onze tool zie je direct bij welke tekstgrootte je combinatie wel of niet wordt goedgekeurd.
Wil je sparren hoe we jouw organisatie het beste kunnen helpen? Plan een intakegesprek of vraag een offerte aan.
