Naar de inhoud
TODO: PageHeader

Inhoudsopgave

import { Canvas } from “@site/src/components/Canvas/Canvas”; import { Guideline } from “@site/src/components/Guideline”; import FooterInfo from “@nl-design-system-unstable/documentation/richtlijnen/_footer_info.md”;

Kleurgebruik in tekst

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.

{() => ( <> Je kunt op eigen gelegenheid oversteken. Pas op! Dit is erg gevaarlijk )} {() => { const basisColorErrorBg1 = "#ce2c31"; 
  return (
    <>
      Je kunt op eigen gelegenheid oversteken.{" "}
      <span style={{ color: basisColorErrorBg1 }}>
        Pas op!
      </span>{" "}
      Dit is{" "}
      <span style={{ color: basisColorErrorBg1 }}>
        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.

{() => ( <>

Kaarten van Nederland

)} {() => ( <>

Kaarten van Nederland

)}

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.