Visual design
1.2 Kleur: Waar let je op bij het kiezen van kleuren?
Kleurgebruik en het contrast tussen kleuren.
Kleur is één van de belangrijke onderdelen van visual design. Kleur is bepalend voor zowel de look & feel als de gebruiksvriendelijkheid van een design. Als kleur consistent gehanteerd wordt in een design, versterkt het de herkenbaarheid van een ontwerp, huisstijl of merk.
In het begin van een ontwerpproces stel ik een kleurenschema samen. Bij dit schema vermeld ik de kleurwaardes en geef ik aan welke kleur op welke kleur gebruikt kan/mag worden en welke niet. Hiervoor gebruik ik een contrastchecker.
Een contrastchecker is een essentiële tool om een goed kleurschema te maken.
Als de contrastratio doorgestreept is, mag/kan de kleurencombinatie niet gebruikt worden.Voorbeeld 1: het contrast 21:1 is groter dan 4.5:1. De tekst is makkelijk te lezen.
Constratio kleuren & leesbaarheid
Teksten zijn goed leesbaar als de verhouding tussen de tesktkleur en achtergrondkleur minimaal 4.5:1 is. Echter om een tekst ook voor personen met leesblindheid makkelijk leesbaar te maken, is een contrastratio van minimaal 8:1 vereist.
Bij het eerste voorbeeld met de kleuren zwart #000000 en wit #ffffff is de contrastratio 21:1. De tekst “The five boxing wizards jump quickly” is makkelijk te lezen.
Om een ontwerp een bepaalde sfeer geven, worden er vaak andere kleuren gekozen dan zwart en wit. Het is belangrijk dat teksten in de gekozen kleuren leesbaar zijn. Bij het tweede voorbeeld is de tekst niet goed te lezen. De contrastratio – de verhouding tussen roze #c82865 en donkergroen #606034 – is slechts 1.22:1.
Voorbeeld 2: het contrast 1.22:1 is kleiner dan 4.5:1. De tekst is niet leesbaar.
Oefening 1.1a kleurcontrast controleren
Wat is de contrastratio volgens de tool?
Als je tekst in kleur x wilt plaatsen over kleur y dan moet de verhouding tussen de kleuren x en y minimaal een contrastratio van 4.5:1 hebben. Indien de contrastratio lager is, dan mogen de kleuren niet gebruikt worden.
Voorbeeld Vraag: Wat is het contrastratio tussen de kleuren kleuren grijs #888888 en lichtgrijs #f3f3f3?
Open de contrastchecker tool. Stap 1. Vul de eerste kleur in bij ‘Foreground Color’. Stap 2. Vul de tweede kleur in bij Background Color’.
Antwoord: Deze kleuren hebben een contrastratio 3.19:1. Het contrast is te laag. Uitleg: De waarde 3.19:1 is kleiner dan 4.5:1. Het contrast is dus te klein. Een tekst met de kleur #888888 op een achtergrond van #f3f3f3 is niet leesbaar.
Open de contrastchecker om de volgende vragen te beantwoorden.
Beantwoord de volgende vragen
Wat is het contrastratio tussen de kleuren wit #ffffff en groen #00c1a1?
Wat is het contrastratio tussen de kleuren grijs #6c6c6c en zwart #000000?
Wat is het contrastratio tussen de kleuren paars #f9dce8 en lichtroze #f9dae8 ?
Wat is het contrastratio tussen de kleuren grijs #2e2e2e en blauw #1da1f2?
Wat is het contrastratio tussen de kleuren oranje #f47521 en blauw #ededed?
Oefening 1.1b kleuren combineren
Welke kleurcombinatie is leesbaar voor iedereen?
Als je achtergrondkleur kiest bij een tekstkleur, is het belangrijk om rekening te houden met de leesbaarheid van de tekst. Voor personen met leesblindheid moet het contrast tussen de tekstkleur en de achtergrondkleur een contrastwaarde hebben van minimaal 8:1.
Voorbeeld Vraag: Welke kleur mag de achtergrond hebben bij een tekst met de kleur #d2cee7?
Open de contrastchecker tool. Stap 1. Vul de gegeven kleur in bij ‘Foreground Color’. Stap 2. Zoek zelf een kleur en vul deze in bij ‘Background Color’. Gebruik eventueel het schuifje om de kleur lichter of donkerder te maken.
Antwoord: Voor een website die ook geschikt moet zijn voor personen met leesblindheid kan een paarse kleur #d2cee7 niet op een achtergrond met de kleur #5d4c90 worden geplaatst. Uitleg: De contrastratio is 4.72:1 is hoger dan 4.5:1 maar voor personen met leesblindheid moet de tekst minimaal 8:1 zijn. De tekst is dus niet voor iedereen leesbaar. Tip: Gebruik deze kleurcombinatie niet voor een lange tekst die voor iedereen leesbaar moet zijn.
Beantwoord de volgende vragen
Als je een website wilt maken die ook geschikt is voor personen met leesblindheid:
Welke kleur mag de achtergrond hebben als de kleur van een tekst in oranje #df6300?
Welke kleur mag de achtergrond hebben als de kleur van de tekst in blauw #0000d1?
Welke kleur mag de achtergrond hebben als de kleur van de tekst in groen #00705e?
Welke kleur mag de achtergrond hebben als de kleur van de tekst in blauw #00b5b8?
Welke kleur mag de achtergrond hebben als de kleur van de tekst in grijs #757575?
