%201-pichi.avif)
Hoe verbeter je de kleurcontrastratio’s op een website?
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).
