De kleur van je tekst is heel belangrijk, maar ook de achtergrondkleur is een belangrijke factor. Ik schreef er in mijn Designtip over ontwerpen voor slechtzienden al over. Oranje tekst op een zwarte achtergrond is voor slechtzienden bijvoorbeeld heel slecht leesbaar. Mensen die echter niet in die categorie vallen hebben hier minder moeite mee. Bij rode tekst op een blauwe ondergrond, of omgekeerd, wordt het al voor meer mensen lastig. Hoe zit dit nu, waar komt dit door? Lees maar verder, want ik leg het je allemaal uit.
Klik om HTML aan te passen
Een website is er voor bedoeld om te communiceren met anderen. Maar als je publiek moeite heeft je teksten te lezen, is dat natuurlijk niet zo handig.Pas daarom op met teksten op gekleurde achtergronden. En uiteraard geldt dit niet alleen voor website, ook voor je huisstijl en drukwerk.
Waarom is bijvoorbeeld rode tekst op blauw, of omgekeerd, zo moeilijk te lezen? Het menselijk oog kan zich niet focussen op bepaalde tinten rood en blauw tegelijk. De tekst lijkt te dansen, waardoor het dus moeilijk wordt de teksten te lezen. Dat komt door chromostereopsis. Dit is het verschijnsel dat twee verschillend gekleurde, identieke vormen die op gelijke afstand bekeken worden, toch ieder een andere afstand lijken te hebben. Dit geldt met name voor de combinatie rood en blauw, waarbij rood dichterbij ervaren wordt dan blauw. (bron: TUDelft).
Waarom is bijvoorbeeld rode tekst op blauw, of omgekeerd, zo moeilijk te lezen? Het menselijk oog kan zich niet focussen op bepaalde tinten rood en blauw tegelijk. De tekst lijkt te dansen, waardoor het dus moeilijk wordt de teksten te lezen. Dat komt door chromostereopsis. Dit is het verschijnsel dat twee verschillend gekleurde, identieke vormen die op gelijke afstand bekeken worden, toch ieder een andere afstand lijken te hebben. Dit geldt met name voor de combinatie rood en blauw, waarbij rood dichterbij ervaren wordt dan blauw. (bron: TUDelft).
|
Hier word je toch doodmoe van? En dat komt echt niet door de rare woorden ;-). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis massa nisi, at tempus velit vulputate ac. Suspendisse tincidunt tortor sit amet hendrerit elementum. Curabitur congue condimentum eros, id consequat tellus feugiat ac. Mauris lectus tortor, laoreet ut iaculis nec, varius in velit.
|
Hier word je toch doodmoe van? En dat komt echt niet door de rare woorden ;-). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis massa nisi, at tempus velit vulputate ac. Suspendisse tincidunt tortor sit amet hendrerit elementum. Curabitur congue condimentum eros, id consequat tellus feugiat ac. Mauris lectus tortor, laoreet ut iaculis nec, varius in velit.
|
Contrast
Kies geen kleuren die te dicht bij elkaar liggen. Die hebben weinig contrast en zijn dus moeilijk leesbaar. Geel op groen of paars op blauw, geen goed idee. Ook geen geel op wit en geen andere lichte tinten op wit. Wit is al heel licht, dus teksten die ook veel licht reflecteren, lezen niet prettig.
Kies geen kleuren die te dicht bij elkaar liggen. Die hebben weinig contrast en zijn dus moeilijk leesbaar. Geel op groen of paars op blauw, geen goed idee. Ook geen geel op wit en geen andere lichte tinten op wit. Wit is al heel licht, dus teksten die ook veel licht reflecteren, lezen niet prettig.
|
NIET LEESBAAR
|
NIET LEESBAAR
|
NIET LEESBAAR
|
Zwart - wit
Zorg dus voor een goed contrast tussen letters en achtergrond. Zwart en wit zijn contrasterende kleuren, maar kunnen tóch vermoeiend zijn bij het lezen. Bezoekers lezen óf scannen je pagina. Tijdens het lezen nemen ze echt de tijd om de zinnen te lezen. Met scannen van een pagina wordt bedoeld dat ze vluchtig over je pagina kijken, op zoek naar trefwoorden die ze interessant vinden. Zo kunnen ze snel beoordelen of je pagina relevant is voor ze. Of je zwarte tekst op een lichte achtergrond moet gebruiken, of witte tekst op een zwarte achtergrond, is afhankelijk van lezen of scannen.
Wit reflecteert lichtstralen, terwijl zwart ze absorbeert. Als je dus witte tekst moet lezen, worden de lichtstralen over een klein gebied teruggekaatst naar je ogen, wat dus zorgt voor een onrustig beeld. Bij zwarte letters wordt er niets teruggekaatst, wat dus rustiger is. Daarom kun je broodtekst het beste zwart op wit plaatsen.
Zorg dus voor een goed contrast tussen letters en achtergrond. Zwart en wit zijn contrasterende kleuren, maar kunnen tóch vermoeiend zijn bij het lezen. Bezoekers lezen óf scannen je pagina. Tijdens het lezen nemen ze echt de tijd om de zinnen te lezen. Met scannen van een pagina wordt bedoeld dat ze vluchtig over je pagina kijken, op zoek naar trefwoorden die ze interessant vinden. Zo kunnen ze snel beoordelen of je pagina relevant is voor ze. Of je zwarte tekst op een lichte achtergrond moet gebruiken, of witte tekst op een zwarte achtergrond, is afhankelijk van lezen of scannen.
Wit reflecteert lichtstralen, terwijl zwart ze absorbeert. Als je dus witte tekst moet lezen, worden de lichtstralen over een klein gebied teruggekaatst naar je ogen, wat dus zorgt voor een onrustig beeld. Bij zwarte letters wordt er niets teruggekaatst, wat dus rustiger is. Daarom kun je broodtekst het beste zwart op wit plaatsen.
|
Deze tekst is beter leesbaar dan de witte tekst in het zwarte vlak. Als kun je er natuurlijk geen touw aan vastknopen ;-). Curabitur mollis massa nisi, at tempus velit vulputate ac. Suspendisse tincidunt tortor sit amet hendrerit elementum. Curabitur congue condimentum eros, id consequat tellus feugiat ac. Mauris lectus tortor, laoreet ut iaculis nec, varius in velit. Sed varius rutrum tortor pellentesque mollis.
|
Dit vlak valt beter op in je pagina, maar is vermoeiender om te lezen. Of komt dat door de rare woorden ;-). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis massa nisi, at tempus velit vulputate ac. Suspendisse tincidunt tortor sit amet hendrerit elementum. Curabitur congue condimentum eros, id consequat tellus feugiat ac. Mauris lectus tortor, laoreet ut iaculis nec, varius in velit.
|
Wil je toch echt een zwarte achtergrond gebruiken, kies dan voor dan grijze letters. Omdat grijs minder licht terugkaatst, is dat net wat rustiger voor je ogen.
Dit vlak valt beter op in je pagina, en is beter leesbaar dan de variant met witte tekst. Maar je kunt er natuurlijk nog steeds geen touw aan vast knopen ;-). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mollis massa nisi, at tempus velit vulputate ac. Suspendisse tincidunt tortor sit amet hendrerit elementum. Curabitur congue condimentum eros, id consequat tellus feugiat ac. Mauris lectus tortor, laoreet ut iaculis nec, varius in velit.
Wanneer kun je wel witte tekst op een zwarte ondergrond gebruiken? Dat is als de bezoekers je pagina scannen. Dan kijken ze vooral naar koppen, labels en knoppen. Om deze te benadrukken, kun je ze op een donkere ondergrond plaatsen. Doordat de witte tekst het licht reflecteert, valt het eerder op. Nu is het minder onrustig voor de ogen, omdat er niet zolang op dezelfde plek gefocust hoeft te worden. Witte tekst op een donkere achtergrond is dus een slimme manier om aandacht te vestigen op de dingen die je belangrijk vindt op je website.
|
KOOP NU!
|
BESTEL HIER!
|
SCHRIJF JE IN!
|
Tool
Wil je wat combinaties uitproberen, zonder dat je steeds je hele design om hoeft te gooien, kun je de Color Tool For Webmasters proberen.
Wil je wat combinaties uitproberen, zonder dat je steeds je hele design om hoeft te gooien, kun je de Color Tool For Webmasters proberen.
RSS-feed