spring naar de tekst
toolsside

Contrast

Veelmensen en bedrijven bouwen zelf een webiste in bijvoorbeeld Wordpress of een ander CMS (content management system). Dat kan natuurlijk ook heel makkelijk. Vaak zie je echter wel dat er weinig rekening wordt gehouden met de leesbaarheid van de teksten. En dat is uiteindelijk waar het allemaal om draait bij een website: informatie overbrengen. Eigenlijk bedoel ik hier met leesbaarheid contrast. Dus zijn teksten leesbaar tegenover een bepaalde achtergrond. Een voorbeeld is witte tekst op een gele achtergrond. Misschien ziet dit er mooi uit maar voor de meeste mensen is het onleesbaar. Zelfs mensen met prima ogen hebben hier moeite mee en zullen dan ook afhaken. Dus denk na over je kleurgebruik en over het contrast daarvan.

Dit is een voorbeeld van een witte tekst op een gele achtergrond

Let ook op met tekst over afbeeldingen.

voorbeeld van teksten over een afbeedling

Als je afbeelding veel lichte kleuren heeft en je zet daar bijvoorbeeld witte tekst overheen dan is dit lastig leesbaar. Je kunt de tekst natuurlijk weglaten of ergens anders plaatsen, je kunt de kleur van de tekst aanpassen of je zet de tekst op een gekleurde achtergrond over de afbeelding heen.

Een en ander gaat ook vaak mis in combinatie met de afmetingen van de tekst. Als je tekst te klein is en als ook het contrast niet goed is dan wordt het meteen onleesbaar. Je kunt in sommige gevallen wel een slechter contrast gebruiken als je tekst dan maar groot genoeg is.

Er zijn op internet vele tools te vinden om je contrasten te testen. Ik gebruik vaak: Colorshark. Je kunt hier de kleur van je achtergrond en van je teksten invoeren. Een melding FAIL of PASS vertelt je of je contrasten goed zijn. Als het contrast niet goed is dan vertelt de site je wat voor opties je hebt om wel een goed contrast te krijgen. Met een sliders kun je tekstkleur aanpassen of de achtergrondkleur. Net zo lang tot je een PASS krijgt. Als je een FAIL krijgt dan moet je deze combinatie niet gebruiken. Als je AA ziet met Large er naast dan kan het wel maar dan moeten de teksten minimaal 24 pixels of 19 pixels Bold zijn. Als je alleen AA ziet dan kun je de kleuren gebruiken. Als je AAA krijgt dan heb je de hoogste contrastverhouding die mogelijk is.

In de WCAG (Web Content Accessibility Guidelines) zijn er drie niveaus van toegankelijkheid. A , AA en AAA. Wil je je site zo toegankelijk mogelijk maken dan moet je er voor zorgen dat je aan A en aan AA voldoet. Aan AAA voldoen is heel moeilijk en wordt zelfs door het W3C (uitgever van de WCAG) afgeraden.

Maak er een gewoonte van om de kleuren van je tekst en achtergronden te testen voordat je deze gaat gebruiken in je site. Gepubliceerd op 25 maart 2020 door Renee de Kruijf