Kleurgebruik
Kleurgebruik speelt een grote rol in hoe mensen content waarnemen. Niet iedereen ziet kleuren op dezelfde manier. Daarom is het belangrijk dat je informatie nooit alleen met kleur overbrengt, en dat tekst altijd goed leesbaar blijft tegen de achtergrond.
Als contentmaker heb je misschien geen invloed op het ontwerp of het kleurenschema van de website. Maar er zijn wel degelijk keuzes die je zelf maakt, bijvoorbeeld bij het toevoegen van tekst op een afbeelding, bij het kiezen van een grafiek of het instellen van een tekstkleur in het CMS.
Bewust omgaan met kleurcontrast
Zorg dat tekst altijd goed leesbaar is. Niet alleen voor mensen met een visuele beperking maar ook voor omstandigheden met weinig contrast, zoals fel zonlicht op een mobiel scherm.
Let op het volgende:
- gebruik een tekstkleur die duidelijk afsteekt tegen de achtergrond;
- zorg voor voldoende verschil in helderheid en kleur;
- vermijd lichte tekst op een lichte afbeelding of vlak.
Gebruik kleur altijd bewust. Kleur kan informatie verduidelijken, maar mag nooit de enige manier zijn om iets uit te leggen. Wil je kleur inzetten in je ontwerp of content? Lees dan meer over kleurgebruik met een doel en voldoende contrast volgens de richtlijnen.
Gebruik een contrastchecker
Het is vaak lastig om op het oog te beoordelen of tekst voldoende afsteekt tegen de achtergrond. Je kunt hiervoor een contrastchecker gebruiken. Daarmee controleer je of het kleurcontrast voldoet aan de toegankelijkheidsrichtlijnen.
Een eenvoudige tool is de contrastchecker op deze website. Je vult daar de kleur van je tekst en de achtergrond in, en je ziet meteen of het contrast voldoende is.
Tekstkleur in het CMS
Sommige CMS’en bieden de mogelijkheid om zelf tekstkleuren aan te passen. Gebruik die optie alleen als het echt nodig is. Kies dan voor een kleur met voldoende contrast ten opzichte van de achtergrond. Gebruik nooit kleur als enige manier om nadruk te geven.
Doen
Vette tekst gebruiken om tekst nadruk te geven
Je kunt op eigen gelegenheid oversteken. <strong>Pas op!</strong> Dit is <strong>erg gevaarlijk</strong>
Niet doen
Kleur gebruiken om tekst nadruk te geven
Je kunt op eigen gelegenheid oversteken. <span style="color:red">Pas op!</span> Dit is <span style="color:red">erg gevaarlijk</span>
Tekst op afbeeldingen
Gebruik geen complexe of drukke achtergrondafbeeldingen met tekst eroverheen. Is dat toch nodig? Controleer dan extra goed of de tekst nog leesbaar is.
Niet doen
Tekst over een complexe afbeelding of achtergrond plaatsen
Kaarten van Nederland
<div style="background:center center no-repeat url("https://raw.githubusercontent.com/nl-design-system/documentatie/assets/richtlijnen_content_afbeeldingen-Kaart.jpg")"><h2 style="padding:50px;color:white" class="utrecht-heading-2">Kaarten van Nederland</h2></div>
Doen
Kies een achtergrond die voldoende contrast biedt met de tekst
Kaarten van Nederland
<div style="background:center center no-repeat url("https://raw.githubusercontent.com/nl-design-system/documentatie/assets/richtlijnen_content_afbeeldingen-Kaart.jpg")"><h2 style="padding:50px;color:white;background-color:rgba(0,0,0,0.5)" class="utrecht-heading-2">Kaarten van Nederland</h2></div>
Meer over kleurgebruik in grafieken
Kleur speelt ook een belangrijke rol in grafieken en andere informatieve afbeeldingen. Hoe je die toegankelijk maakt, lees je in de richtlijnen voor grafieken.
Hoe te testen
De belangrijkste vuistregel bij gebruik van kleur:
-
Gebruik nooit alleen kleur om verschil te maken.
Gebruik je kleur om iets te benadrukken, zoals belangrijke woorden of het verschil tussen een goed en fout antwoord? Maak belangrijke tekst bijvoorbeeld vet en zorg dat je ook een ander signaal (zoals een icoon met alternatieve tekst, of een tekst) toevoegt.
Zo beoordeel je het contrast:
-
Lees de tekst op een mobiel scherm in fel licht.
Kun je alles nog goed lezen? Lichte tekst op een lichte achtergrond valt in zulke situaties vaak weg. -
Gebruik een contrastchecker.
Met een contrastchecker kun je exact bepalen of kleuren voldoende onderscheidend zijn ten opzichte van elkaar. -
Controleer of tekst leesbaar is op afbeeldingen.
Staat er tekst over een afbeelding of kleurvlak? Kijk dan of er genoeg contrast is, en of de tekst niet wegvalt.
Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
Over deze richtlijnen
Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.
We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.