Voldoende kleurcontrast

Een hoog contrast van tekst ten opzichte van de achtergrond zorgt ervoor dat kleurenblinden en slechtzienden de tekst makkelijk kunnen lezen. Veel mensen lezen ook op een mobiel toestel (smartphone of tablet) met een klein scherm onder slechte lichtomstandigheden. Contrast is daarom voor iedereen belangrijk.

Wat houdt voldoende kleurcontrast in?

Kleurcontrast is het helderheidsverschil tussen twee kleuren. WCAG 2.1 raadt een minimumwaarde van 4,5:1 aan voor teksten van gemiddelde grootte en 3,0:1 voor grote teksten (vanaf 18pt of 14pt vet).

Als voorbeeld een paragraaf die wel en niet slaagt voor de waarde 4,5:1.

Niet goed: het woord AnySurfer staat in blauw, contrast met zwarte achtergrond is 3.0:1

Goed: het woord AnySurfer staat in oranje, contrast met zwarte achtergrond is 8.4:1

Testmethodes

Kleurcontrasten kunt u objectief controleren met de gratis Colour Contrast Analyser. Met behulp van een pipet duidt u een voor- en een achtergrondkleur op het scherm aan. De contrastratio die u zo verkrijgt, moet minstens 4,5:1 zijn voor standaardtekst. Voor grote tekst (18 punten normaal of 14 vet) is een contrastratio van 3:1 voldoende.

Andere hulpmiddelen:

• Colour Contrast Analyzer Tool
• Tanaguru Contrast-Finder vindt correcte kleurcontrasten voor webtoegankelijkheid
• Google Chrome extension: Accessibility Developer Tools
• We are colorblind voorbeelden en oplossingen
• NoCoffee – Vision Simulator for Chrome

Contrast van niet-tekstuele content

Componenten van de gebruikersinterface zoals links en formulierelementen en andere grafische elementen zoals iconen of onderdelen van grafieken moeten voldoende zichtbaar en herkenbaar zijn. Dat betekent dat er een contrastverhouding nodig is van 3:1 tussen hun visuele weergave en de aangrenzende kleuren.

Bijvoorbeeld

• Zorg voor genoeg contrast tussen de binnenkant van een tekstveld en de rand of de achtergrondkleur. Hetzelfde geldt voor checkboxen en radioknoppen.
• Een icoon dat niet decoratief is (zoals een vergrootglas dat gebruikt wordt als zoekknop) moet voldoende contrast tonen (tussen vorm van vergrootglas en aangrenzende kleur).
• De grafische elementen die een status aangeven, zoals een vinkje in een checkbox of een outline rond een link moeten voldoendecontrast hebben met aangrenzende kleuren.
• De verschillende gebieden van een taartdiagram moeten elk voldoende contrast hebben met aangrenzende kleuren: als elk gebied een rand heeft, moet je contrast meten met de rand, als er geen rand is, moet je contrast meten tussen twee aangrenzende gebieden.
• Hover en active states hoeven geen contrast van 3:1 te tonen tegenover de default state, maar de component moet in deze statussen steeds voldoende contrast tonen met aangrenzende kleuren.
• Als er enkel een kleurverschil is tussen twee statussen van een component, dan moet er ook een contrast van 3:1 zijn tussen de twee kleuren (bijvoorbeeld als je geen vinkje gebruikt maar gewoon de kleur van een checkbox verandert als het aangevinkt is)

Kleurenblindheid en contrastratio's

Kleurenblindheid is een afwijking in hoe iemand kleur waarneemt. Het oog neemt kleuren waar op basis van de basiskleuren rood, groen en blauw. Als één of meerdere van deze waarnemingen niet of niet goed werkt, heb je een afwijkend kleurenzicht. Maar liefst 1 op de 12 mannen is kleurenblind, tegenover 1 op de 250 vrouwen. Een volledig onvermogen om kleur waar te nemen bestaat ook (achromatopsie), maar is zeldzaam.

Vanwege de vele soorten kleurstoornissen, vermijd u best volgende kleurencombinaties:

• Rood - groen
• Zwart - rood
• Wit - geel
• Groen - blauw

Je kan verschillende vormen van kleurenblindheid simuleren met de Colour Contrast Analyser.

Voorbeelden

Links in tekst

In onderstaande screenshot zien we rode links in doorlopende zwarte tekst.

Dezelfde paragraaf in grijswaarden geeft een beeld van hoe mensen die het verschil niet zien tussen zwart en rood dit ervaren.

Kleurrijke achtergrond

Een kleurrijke achtergrond heeft verschillende contrasten als gevolg. Pas op en zorg ervoor dat de contrast ratio bij elke combinatie voldoende is. Dit is soms onmogelijk. In deze gevallen raden we aan om toch voor een effen vlak te kiezen.

Niet-uniforme achtergronden kunnen ook voor leesmoeilijkheden zorgen bij gebruikers met dyslexie. Daarom kan u ze best vermijden.

In grijswaarden slaagt bijna geen enkele kleur voor de contrast ratio.

Meer informatie

• Atypical colour response is een artikel over kleurenblindheid.
• Vischeck's Daltonize is een programma waarmee u verschillende vormen van kleurenblindheid van simuleren.
• Een lijst met kleurcontrast hulpmiddelen.