Show all

Contrast op je site: ik zie, ik zie… wat jij niet ziet!

Weet jij hoe het zit met de leesbaarheid van de teksten op je website of blog? Contrast speelt hierbij een belangrijke rol. Vandaar dat contrast onderdeel is van de webrichtlijnen en die zijn echt niet alleen handig voor mensen met een visuele beperking.

Contrast is het verschil tussen voorgrondkleur en achtergrond kleur. Bijvoorbeeld een zwarte letter op een witte achtergrond heeft een hoog contrast en is dus goed leesbaar. Een grijze letter op een witte achtergrond heeft een lager contrast en is daardoor minder goed leesbaar. Is het contrast tussen de achtergrondkleur en de letters te laag dan kan dit problemen geven voor de bezoekers van je site.

Leesbaarheid en gebruikersvriendelijkheid

Dat een (te) laag contrast een probleem is voor bezoekers die slechtziend of kleurenblind zijn is best logisch. Zij kunnen je tekst lastiger of niet lezen. Maar eigenlijk vind ik een laag contrast lastig voor al je bezoekers. Je tekst leest minder fijn en dus is je website minder gebruikersvriendelijk.

Mooie kleuren zijn belangrijk maar wat je te vertellen hebt is belangrijker. Door goed na te denken over de kleuren van je digitale huisstijl en hierbij rekening te houden met de contrastverhouding zorg je ervoor dat je pagina voor iedere bezoeker goed te lezen is. Je voorkomt dat een bezoeker afhaakt door iets wat makkelijk op te lossen is.

Contrast volgens de webrichtlijnen

Werk je voor een overheidsorganisatie dan ken je ze (hopelijk) al: de webrichtlijnen. Dit zijn regels voor kwaliteit en toegankelijkheid van websites. Ze worden soms ervaren als lastig en extra werk maar ik vind het een prettig hulpmiddel. Door het toepassen van de richtlijnen zorg je ervoor dat je website door een breed publiek te gebruiken is. Van bezoekers met brailleleesregel tot bezoekers met een smartphone. En ook Google houdt van toegankelijke websites. Als bonus wordt je website ook nog eens beter geïndexeerd. Kortom de moeite waard om je er eens in te verdiepen! 

Er zijn diverse regels en uitzonderingen over contrast. In de webrichtlijnen staat dat een contrastwaarde van ten minste 4,5:1 voor je lopende teksten prima is. Voor een grotere tekst, zoals koppen, kun je uit de voeten met minder contrast:

  • 3:1 voor grote letters zoals koppen (vanaf 18 pt)
  • 3:1 voor vette letters (vanaf 14 pt)

Help!

Ik kan me voorstellen dat deze contrastwaarden je niet zoveel zeggen. Gelukkig zijn er op internet diverse hulpmiddelen die je kunnen helpen.

Erg handig vind ik de contrast ratio tool van Lea Verou. Je geeft twee kleuren in, de achtergrondkleur en de kleur van je tekst. Je ziet de contrastwaarde en of je ‘slaagt’ met deze combinatie. De tekst- en achtergrondkleur verandert mee. Zo kun je zelf ook gelijk zien of de tekst goed leesbaar is.

Ook de contrastchecker  van WebAIM is handig. Het voordeel van deze tool vind ik dat je een kleur heel handig lichter en donkerder kunt maken terwijl het blijft passen in je kleurenpallet.

 

 

Meer weten of hulp nodig bij je website? Neem gerust contact met me op…

Foto: Dorien Hein van Tot Kijk Fotografie

1 Comment

  1. Sandra schreef:

    H E L P ! Mij zegt het inderdaad niets,
    gelukkig komen lezende lezers terug :))

    Vanzelfsprekend volg ik je hier en hoop
    ik op snel tijd voor een theetje. Tot gauw! X

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *

zeven + twee =