Hoe verbeter je de kleurcontrastratio’s op een website?

24/1/2023

Zoekmachines als Google en sociale media platformen als Facebook zijn onmisbaar geworden voor bedrijven die hun producten en diensten willen verkopen. Een professioneel ontworpen website is daarom cruciaal voor het behalen van succes op het internet. Maar een mooi uiterlijk is niet het enige wat telt: de toegankelijkheid van een website is minstens zo belangrijk. In dit artikel zullen we kijken naar drie belangrijke aspecten van website toegankelijkheid: kleurcontrastverhoudingen, leesbaarheid en conversies.

De kleurcontrastratio’s van teksten op je website

Laten we eerst kijken naar kleurcontrastverhoudingen. Dit verwijst naar de mate waarin de kleuren op een website contrasteren met elkaar. Een hoog contrast is belangrijk voor mensen met een visuele beperking, zoals mensen met een laag of slechtziendheid. Het is ook belangrijk voor mensen die de website bekijken op een kleine of slecht verlichte scherm, zoals een smartphone. Als de kleuren te weinig contrasteren, kan het moeilijk zijn om te lezen wat er op de website staat.

Welke kleurcombinaties je wilt vermijden

Gele tekst op een witte achtergrond.
Rode tekst op een roze achtergrond.
Donkergroene tekst op een donkerblauwe achtergrond.
Zwarte tekst op een donkergrijze achtergrond
Lichtblauwe tekst op een lichtgele achtergrond.
Zwarte tekst op een donkerpaarse achtergrond.
Witte tekst op een lichtgroene achtergrond.
Rode tekst op een oranje achtergrond.
Donkerblauwe tekst op een donkergroene achtergrond.
Zwarte tekst op een donkerrode achtergrond.

Verbeteren van de kleurcontrastratio’s

Er zijn verschillende manieren om de kleurcontrastverhoudingen op een website te verbeteren. Een van de belangrijkste is het kiezen van een goede kleurencombinatie. Zwarte tekst op een wit of lichtgele achtergrond is bijvoorbeeld een goede optie, omdat deze combinatie een hoog contrast heeft. Andere goede combinaties zijn donkerblauw op geel.

Online Controleren van de kleurcontrastratio

Gelukkig zijn er verschillende online tooltjes die de kleurcontrastratio kunnen controleren. Een paar voorbeelden zijn:

WebAIM's Color Contrast Checker: https://webaim.org/resources/contrastchecker/
The Paciello Group's Contrast Checker: https://contrast-ratio.com/
The Colorable Color Contrast Checker: https://colorable.jxnblk.com/

Deze tools laten je een achtergrond- en tekstkleur selecteren en geven vervolgens aan of de contrastratio voldoet aan de richtlijnen van de Web Content Accessibility Guidelines (WCAG).

Over de auteur

Steven Maas

Steven is eigenaar van Rootsteps, wordt enthousiast van nieuwe technieken, houdt zich bezig met klantcontact, content-creatie, user experience design en Search Engine Marketing.