De basis van kleurharmonie: complementair, analogisch en triadisch
Ontdek de drie fundamentele kleuromschema’s die je helpen harmonische paletten te bouwen…
Contrastverhouding en WCAG: Toegankelijkheid in je palet
Begrijp waarom contrastverhouding 4.5:1 het verschil maakt — en hoe je je kleurkeuzes daaraan aanpast zonder compromissen.
Waarom contrast ertoe doet
Je hebt waarschijnlijk al gezien: een mooie paarse knop op een donkerblauwe achtergrond. Ziet er elegant uit totdat iemand het niet kan lezen. Dat’s niet design, dat’s frustratie.
Contrast is niet over schoonheid — het gaat over inclusiviteit. Een website moet leesbaar zijn voor iedereen: mensen met dyslexie, astigmatisme, kleurenblindheid, of gewoon iemand die op hun telefoon in het zonlicht werkt.
WCAG 2.1 stelt voor normale tekst een minimumverhouding van 4.5:1 voor. Dat’s niet willekeurig — het’s gebaseerd op onderzoek naar menselijke waarneming.
Contrastverhouding begrijpen
Contrast wordt berekend door de lichtheid van twee kleuren te vergelijken. Je krijgt een getal tussen 1:1 (geen contrast) en 21:1 (maximum contrast, zwart op wit).
4.5:1 is geen willekeurige grens. Onderzoek toont aan dat dit niveau geschikt is voor mensen met matige visusschwakte. Grote tekst (18pt+) kan werken met 3:1, maar standaardtekst? Je hebt 4.5:1 nodig.
- Normale tekst: minimum 4.5:1
- Grote tekst (18pt+): minimum 3:1
- Grafische elementen: minimum 3:1
- AAA niveau: 7:1 (premium toegankelijkheid)
Praktisch: je palet checken
Je hoeft niet handmatig alles uit te rekenen. Er zijn gratis tools die je helpen. Maar je moet wel begrijpen wat ze meten.
Neem je huisstijl. Lichaam-tekst is meestal donker op licht, dat’s makkelijk. Maar wat met je accent-kleur? Die leuke oranje knop? Als die oranje #FF8C00 is en je achtergrond wit (#FFFFFF), heb je ongeveer 5.2:1. Dat voldoet. Maar op je donkerder secundaire achtergrond (#F5F5DC) zakt het naar 3.8:1. Te laag.
Dit is waar veel designers struikelen. Ze kiezen een palet zonder alle combinaties te checken. Knop op zes verschillende achtergronden? Negen combinaties om te testen.
Tools om je palet te valideren
WebAIM Contrast Checker
Voer twee hex-codes in, krijg je verhouding. Simpel, snel, betrouwbaar. Dit is de standaard.
Coolors Contrast Checker
Ingebouwd in Coolors. Je genereert een palet en ziet direct welke combinaties voldoen. Handig voor ontwerp.
Colour Contrast Analyser (CCA)
Desktop-app van PACIELLO GROUP. Je klikt op kleuren in je design, het berekent live contrast. Beste voor designwerk.
WCAG Contrast Validator (Browser Extension)
Browser-extensie. Scan je live website, zie meteen welke elementen niet voldoen. Perfect voor testing.
Tip: Niet alle tools zijn even nauwkeurig. WebAIM en CCA zijn de meest betrouwbaar. Controleer altijd met minimaal twee tools voordat je zegt “dit voldoet”.
Drie strategieën voor een toegankelijk palet
1. Donkere tekst op lichte achtergronden
Dit is het makkelijkst. Bijna elke donkere kleur werkt op wit of zeer licht. #333 op #FFFFFF? 12.6:1. Je bent goed. Maar niet al te licht grijs — #999 op wit is slechts 5.9:1. Nog steeds goed, maar je hebt weinig marge.
2. Lichte tekst op donkere achtergronden
Harder, omdat je accent-kleuren moeilijker kunnen zijn. Een helder geel (#FFFF00) op zwart? 19.6:1. Geweldig. Maar pastel-geel (#FFFACD) op zwart? Slechts 6.7:1. Nog steeds goed, maar je merkt het verschil.
3. Test alle combinaties vroeg
Niet na het ontwerp. Maak een eenvoudige matrix: vijf achtergrondkleuren vijf tekstkleuren = 25 combinaties. Test ze allemaal. Dit geeft je vrijheid in design zonder verassingen later.
Veelgemaakte fouten
Fout: Licht grijs op wit
#D3D3D3 op #FFFFFF is slechts 1.8:1. Onleesbaar. Veel designers doen dit voor “subtiele” designelementen. Subtiel betekent niet onzichtbaar.
Fout: Accent-kleuren als tekst
Je accent-oranje ziet er mooi uit als knopachtergrond. Maar witte tekst op oranje? 4.1:1 als je niet uitkijkt. Je hebt donkere tekst nodig, niet licht.
Fout: Niet testen op apparaten
Je monitor heeft hoge helderheid. Je telefoon misschien niet. Wat 4.5:1 lijkt op je scherm kan 4.2:1 zijn op iemand anders. Test op verschillende apparaten.
Fout: Aannemen dat WCAG AA genoeg is
AA (4.5:1) is wettelijk minimum in veel landen. AAA (7:1) is beter. Als je kan, ga je naar AAA. Je sluit meer mensen niet uit.
Praktijkvoorbeeld: Nederlandse overheid
De Nederlandse overheid heeft een heldere huisstijl: donkerblauw (#003399) en wit. Donkerblauw op wit? 8.6:1. Meer dan voldoende. Maar ze moeten ook op mobiel werken, in zonlicht. Wit tekst op dat donkerblauw? Ook 8.6:1. Geen problemen.
Ze hebben groen (#228B22) voor succesmeldingen. Groen op wit is slechts 2.4:1 — te laag! Dus gebruiken ze een donkerder groen (#165B33) voor tekst. 8.3:1. Perfect.
Dat’s geen toeval. Dat’s planning. Ze testeten het. En daardoor werkt hun website voor iedereen — niet alleen voor mensen met perfecte ogen.
Samenvatting: contrast is niet optioneel
Je palet hoeft niet saai te zijn om toegankelijk te zijn. Maar je moet weten welke combinaties werken. 4.5:1 is niet een getal dat je ignoreert — het’s het minimale niveau waarop normaal tekst voor de meeste mensen leesbaar is.
Test je kleuren. Gebruik tools. Denk niet “mijn design ziet er goed uit” — denk “kan iedereen dit lezen?” Dat verschil maakt je website beter. Voor iedereen.
Controle checklist:
- Normale tekst: 4.5:1 minimum gecontroleerd?
- Alle achtergrond/tekst combinaties getest?
- Grote tekst: 3:1 minimum gecontroleerd?
- Knop/link kleuren: 4.5:1 minimum gecontroleerd?
- Op telefoon in zonlicht getest?
Disclaimer: Deze artikel biedt informatief materiaal over WCAG contrastrichtlijnen en best practices voor kleurontwerp. De richtlijnen en voorbeelden zijn gebaseerd op WCAG 2.1 standaarden, maar regelgeving varieert per land en industrie. Dit is geen juridisch advies. Voor specifieke toegankelijkheidseisen voor je project, raadpleeg je altijd WCAG richtlijnen direct of een toegankelijkheidsspecialist. De gegeven percentages en verhoudingen zijn ter illustratie en kunnen afhankelijk zijn van je specifieke scherm en apparaat.
Gerelateerde artikelen
