Je hebt een hele mooie post gemaakt voor Instagram. De kleuren passen bij je merk. De tekst staat er goed op. Je plaatst het vol vertrouwen… en dan krijg je een berichtje: “Leuke post, maar ik kan de tekst niet zo goed lezen”.
Dat is zo’n moment waarop je denkt: huh?
Want op jouw scherm zag het er prima uit.
Dus. Hoe check je contrast, en hoe weet je of het goed zit voor posts én pdf’s?
Ik leg het je hieronder uit.
Wat is contrast eigenlijk?
Contrast is het verschil tussen twee kleuren.
Meestal gaat het daarbij om tekst en achtergrond.
Donkergrijze tekst op wit heeft een super hoog contrast en is makkelijk leesbaar.
Lichtgrijze tekst op wit ziet er misschien zacht en trendy uit, maar leest vaak lastig door het lage contrast.
Hoe groter het verschil tussen de twee kleuren, hoe beter het contrast.
En hoe beter mensen je tekst kunnen lezen.
Maar hoe kleiner het verschil, hoe sneller het misgaat. Vooral op mobiel.
Waarom contrast zo’n groot verschil maakt
Veel mensen lezen jouw content niet rustig achter een bureau, op een groot computerscherm.
Ze kijken op hun telefoon, buiten in de felle zon.
Even snel tussen afspraken door, in de auto op de parkeerplaats.
Of die bezoeker die zijn scherm op nachtmodus heeft staan (geel licht).
De vrouw die eigenlijk een leesbril nodig heeft maar die nog niet altijd opzet.
Als tekst niet meteen duidelijk is, dan stoppen mensen met lezen en scrollen door of klikken weg.
Dat is zonde voor jouw post… en ook bij pdf’s is het zonde. Zeker bij offertes, weggevers en e-books.
Die wil je dat mensen openen, lezen en bewaren.
Hoe check je contrast (de snelle uitleg)
- Pak je hex kleurcodes erbij
- De kleur van je tekst.
- De kleur van je achtergrond.
- Die twee kleuren zet je in een contrast checker.
- Daar komt een score uit.
- Die score vertelt je of het leesbaar genoeg is.
Welke contrast score is goed?
Er bestaat een standaard voor. Die staat beschreven in de WCAG (Web Content Accessibility Guidelines).
Je hoeft deze naam niet te onthouden. Je hoeft alleen te weten dat de score voor normale tekst minimaal 4,5 moet zijn.
Wat betekent die 4.5?
Dat is een contrastratio. Een getal dat aangeeft hoe groot het verschil is tussen twee kleuren.
- 4.5 is de minimale score voor normale tekst.
- 3.0 is genoeg voor grote titels (vanaf 24px).
- 7.0 is nog beter (voor extra goede leesbaarheid).
Is jouw score te laag? Maak dan je tekst donkerder of je achtergrond lichter.
Contrast checken met een gratis contrast checker
De favoriet die ik vaak zelf gebruik: Coolors Contrast Checker. Die werkt snel en is duidelijk.
Andere goede opties:
- WebAIM Contrast Checker
- Contrast Ratio
Gebruik de tool die jij fijn vindt. Als jij er snel mee kunt werken, is het goed.
Zo check je contrast stap voor stap
Stap 1. Pak je kleurcodes er bij
Elke kleur heeft een code. Dat heet een HEX-code. Het zijn zes letters en cijfers met een hekje ervoor.
Voorbeelden:
- #FFFFFF = wit
- #000000 = zwart
- #F5F5F5 = lichtgrijs
- #AA5222 = Rooij & Burg oranje
Waar vind je die codes?
Canva: klik op de kleur, je ziet de HEX-code.
Word: je ziet meestal RGB via Meer kleuren, Aangepast. Zet RGB om naar HEX.
Photoshop/Illustrator: in het kleurenpaneel staat de HEX-code.
Schrijf de volgende twee codes op:
- De kleur van je tekst.
- De kleur van je achtergrond.
Stap 2. Plak ze in de checker
Vul je tekstkleur in bij “Text color” en je achtergrondkleur bij “Background color”.
Je ziet meteen de score
Stap 3. Lees de score
Zie je 4.5 of hoger? Dan zit je goed voor gewone tekst.
Zie je lager dan 4.5? Dan is het verschil tussen de kleuren te klein voor veel mensen.
Tip: check gewone tekst altijd op 4.5.
Koppen mogen soms ook met score 3.0.
Maar bij twijfel kies ik zelf liever voor 4.5. Dan weet ik zeker dat het fijn leest.
Stap 4. Pas aan als dat nodig is
Stel, je score is te laag. Wat doe je dan?
Maak je tekstkleur donkerder. Of maak je achtergrond lichter.
Je hoeft soms maar een klein beetje te verschuiven.
Vaak zie je het verschil nauwelijks in je ontwerp, maar voor de leesbaarheid maakt het een wereld van verschil.
Voorbeeld:
Je hebt lichtgrijze tekst (#B0B0B0) op wit (#FFFFFF). Score: 2.1 (te laag).
Je maakt je tekst iets donkerder: #6B6B6B. Nieuwe score: 4.6 (goed!).
Het ziet er bijna hetzelfde uit, maar je tekst is nu wel leesbaar.
PS… je hoeft niet persé te gaan naar score ‘Super’ zoals Coolors aangeeft, ‘Good’ is ook goed.
Werk je met tekst op een foto?
Dan wordt het lastiger, omdat een foto niet overal dezelfde tint heeft.
Wat dan vaak wel goed werkt:
- een rustig, egaal kleurvlak achter je tekst,
- een lichte overlay die doorschijnend is over de foto,
- of je tekst in een blok zetten.
Hoe check je contrast in Canva
Canva laat je geen WCAG-score zien.
Je ziet dus niet automatisch of je op 4.5 zit.
Dit is de volgorde die ik zelf aanhoud:
- Kleuren kiezen.
- Contrast checken met een online tool.
- Ontwerp afmaken.
En check je ontwerp ook even op je telefoon.
Op laptop lijkt iets al snel prima. Op mobiel zie je het echte verschil.
Hoe check je contrast in een pdf
Bij een pdf geldt precies hetzelfde. Kleuren kiezen, contrast checken, vormgeven.
Het verschil is alleen dit: mensen lezen pdf’s vaak langer dan een post.
Denk aan:
- een weggever of e-book,
- een offerte,
- een prijslijst,
- een formulier.
Als je tekst te licht is, gaan mensen sneller scrollen, moeten ze meer zoeken en zullen ze eerder afhaken.
Mijn tip voor pdf’s:
Check contrast bij al je basis-onderdelen, zoals bodytekst, koppen en knoppen, kijk ook naar tekst in gekleurde vlakken en check je pdf op mobiel.
Gewoon even openen op je telefoon. Scroll er eens doorheen. Kun je alles makkelijk lezen?
Je hoeft niet elk detail te perfectioneren.
Je wil dat iemand kan lezen zonder te turen.
Veelgemaakte contrastfouten die ik vaak zie
- Lichtgrijs op wit
Ziet rustig en chique uit, maar leest vaak heel moeilijk. - Pastel op wit
Pastelkleuren zijn populair. Ze zijn zacht, vriendelijk en mooi voor sfeer, maar op een witte achtergrond vaak onleesbaar.
Gebruik liever de pastelkleur als achtergrond en een donkere kleur als tekst. - Tekst op een foto met veel details en verschillende kleuren
Soms is de tekst leesbaar, soms niet. Het wisselt per stuk van de foto.
Plaats een donker vlak achter je tekst, gebruik een effen gekleurde achtergrond of plaats de tekst onder de foto. - Dunne letters
Let op: ook als is je contrast goed, dunne letters zijn vaak moeilijker te lezen en vragen meer contrast dan je denkt.
Kies liever een lettertype met een ‘normaal’ gewicht.
Checken op leesbaarheid
Ik doe vaak deze simpele test:
Open je ontwerp op je telefoon. Kijk ernaar alsof je het voor het eerst ziet.
Moet je moeite doen om te lezen? Dan weet je genoeg.
Als jij al moet turen, doet je lezer dat ook. Maar die klikt dan weg.
Twijfel je? Pak de contrast checker erbij.
Dit klinkt als extra werk, maar het wordt snel een gewoonte.
En je doelgroep kan de content er direct beter door lezen.
Veelgestelde vragen over contrast checken
Welke contrast score is goed?
Voor normale tekst: 4.5 of hoger.
Voor grote koppen: 3.0 of hoger.
Wat is “grote tekst”?
Een duidelijke kop die echt groter is dan je gewone tekst.
Twijfel je? Houd 4.5 aan.
Welke contrast checker is gratis?
Coolors, WebAIM en Contrast Ratio zijn gratis en werken prima.
Hoe check je contrast in Canva?
Canva geeft geen score. Pak je kleurcodes en check ze in een contrast tool.
Moet ik dit altijd checken?
Als je wil dat mensen je content makkelijk kunnen lezen, dan wel.
Het hoeft allemaal niet zo lang te duren. Zeker wanneer je elke keer dezelfde kleuren gebruikt, zoals in je huisstijl, dan is het 1 keer goed meten en toepassen.
Kan ik mijn merkkleuren houden?
Meestal wel.
Vaak is een kleine aanpassing genoeg. Iets donkerder. Iets lichter. Of een vlak achter je tekst.
Tot slot
Als ik je nog één tip mag geven: check contrast voordat je alles helemaal afmaakt.
Dan hoef je achteraf niet te sleutelen.
Je content moet mooi zijn.
Je content moet ook leesbaar zijn.
En dat verschil voel je meteen. In je posts, en zeker in je pdf’s.
Wil je dit ook toepassen op je eigen pdf?
Schrijf je in voor mijn gratis mini-cursus “Maak je pdf leesbaar in 3 stappen”.
Je krijgt een aantal korte mails met praktische tips over onder andere lettergrootte, contrast en witruimte.
Dan kan iedereen voortaan jouw posts zonder contrast problemen lezen.
