Kleurcontrast toegankelijkheid en webdesign

Kleur en kleurcontrast is een inherent onderdeel van design. Zelfs met de beste digitale ontwerptools binnen handbereik is het bekend dat ontwerpers het kiezen van een tint of hexcode lastig vinden in de hoop een bepaalde stemming of boodschap over te brengen in een ontwerp. Misschien kun je je hierin vinden.

Maar als je kleur bekijkt door de lens van toegankelijkheid, wordt een potentieel palet een beetje meer verfijnd en opzettelijk, waardoor kleurkeuzes veel gemakkelijker worden.

Webtoegankelijkheid is nooit een sexy onderwerp geweest. Op het meest fundamentele niveau gaat ontwerpen voor toegankelijkheid over het creëren van ervaringen waar zoveel mogelijk mensen van kunnen genieten.

WCAG-richtlijnen kleurcontrast: De perfecte verhouding

Veel moderne UX- en UI-ontwerppraktijken voldoen niet aan de Web Content Accessibility Guidelines (WCAG) WCAG 2.0 Level AA-richtlijnen worden beschouwd als de gouden standaard voor webtoegankelijkheidsnaleving in Nederland en daarbuiten.

Richtlijnen contrastverhouding voor tekst en afbeeldingen

Wat het kleurcontrast betreft, stellen de richtlijnen dat tekst en afbeeldingen van tekst een contrastverhouding van ten minste 4,5:1 moeten hebben.

Er zijn enkele uitzonderingen op deze regel, waaronder:

• Grote tekst (gedefinieerd als 14 punts en vetgedrukt of groter, of 18 punts of groter) moet een contrastverhouding van ten minste 3:1 hebben.
• Icons, buttons, grafieken en andere grafische objecten die voor hun begrip afhankelijk zijn van kleur, moeten ook voldoende contrast hebben, namelijk een contrast ratio van 3:1. Dus iets minder dan 4,5:1. Meer info:
  https://knowbility.org/blog/2018/WCAG21-1411Contrast
• Incidentele tekst, of afbeeldingen van tekst, die pure decoratie zijn en geen gebruikersdoel dienen, hoeven niet te voldoen aan de eisen voor kleurcontrast.
• Merklogo’s hoeven niet aan de eisen inzake kleurcontrast te voldoen.

WCAG AAA

Het laatste gedeelte van de WCAG bestaat uit de 23 extra richtlijnen van het niveau AAA. De contrastverhouding tussen tekst en achtergrond is minimaal 7:1

Wanneer kleurcontrast een beter ontwerp oplevert

Richtlijnen voor kleurcontrasten kunnen zowel voor bedrijven als voor ontwerpers als een kolfje naar de hand lijken te zijn. Deze richtlijnen dwingen bedrijven om hun gebruik van populaire paletten en unieke merkkleuren in vraag te stellen en aan te passen.

Slack, een van de meest gebruikte messenger platforms in Amerika, stelde een paar jaar geleden zijn hele benadering van kleur ter discussie. Hubert Florin, een UX-designer bij Slack, onderzocht de beslissing van het bedrijf om het kleurenpalet te verfijnen en alleen kleuren op te nemen die voldoen aan de toegankelijkheidsnormen.

donkere lichte kleuren verminderen voor contrast

In 2016 gebruikte Slack meer dan 130 verschillende kleuren, waarvan 32 verschillende tinten blauw. Het werd niet meteen als een probleem gezien totdat men zich toegankelijkheid ging bezighouden. Om de toegankelijkheidsnormen in te voeren, moest men meer controle krijgen over onze kleuren. In een verrassend snel proces, slaagden de ontwerpers erin om die kleuren terug te brengen tot 18. Dit kleinere palet was veel gemakkelijker te beheren voor zowel ontwerpers als ingenieurs.

Voor kleurenoptimalisatie

Na kleurenoptimalisatie

Als ik een website maak ga ik altijd zo te werk. Ik maak altijd eerst een kleurenpalet. Alleen die kleuren ga ik dan gebruiken. Enkele voorbeelden en handleidingen vind je hieronder:

Info kleurcontrast slack

Is voldoen aan kleurcontrast WCAG richtlijnen verplicht?

Overheidsinstanties en hun contractanten zijn verplicht te voldoen aan de WCAG Level 2.0 webtoegankelijkheidsnormen. Voor de meeste particuliere bedrijven is het echter technisch gezien geen wettelijke verplichting om aan de normen te voldoen.

Een blinde man klaagde Dominos Pizza Ltd. aan nadat hij met behulp van schermleestechnologie geen pizza kon bestellen op de website en app van het bedrijf. Sindsdien nemen meer bedrijven in Amerika de naleving van webtoegankelijkheid serieus. In andere delen van de wereld is het voldoen aan de WCAG-richtlijnen een overheidsmandaat.

Een blinde vrouw heeft Beyoncé aangeklaagd. Ze beweerde dat de website van de zangeres niet goed toegankelijk is voor blinden en slechtzienden.
Lees meer

Meer informatie WCAG richtlijnen

Meer informatie over WCAG richtlijnen en Europese regelgeving:

Photoshop kan kleurenblindheid soft-proof maken

Er zijn hulpmiddelen die je kunt gebruiken om een beter idee te krijgen van hoe je ontwerpen eruit zouden zien voor een kleurenblinde gebruiker.

Als je vertrouwd bent met Adobe-producten, is er een snelle manier waarop je dit in Photoshop kunt controleren met behulp van wat bekend staat als soft-proofing. Sommige kleurenblinde gebruikers hebben een verminderde gevoeligheid voor rood (protanopia of protanomalie genoemd), terwijl anderen een verminderde gevoeligheid voor groen hebben (deuteranopia of deuteranomalie genoemd).

Voorbeelden tabel kleurcontrast grijswaarden

Ik heb wat voorbeelden gemaakt voor tekst en grijswaarden voor het beste kleurcontrast:

WIT / LICHTGRIJS	DONKERGRIJS	WCAG AA / AAA
#FFF	#767676	4.54:1
#FFF	#595959	7:1
#F9F9F9	#737373	4.5:1
#F9F9F9	#555555	7.08:1
#F2F2F2	#6e6e6e	4.55:1
#F2F2F2	#515151	7.09:1
#eee	#6b6b6b	4.59:1
#eee	#4F4F4F	7.05:1
#e8e8e8	#686868	4.54:1
#e8e8e8	#4C4C4C	7:1

Conclusies over kleurcontrast

De meeste kleuren moeten voldoen aan een kleurcontrastverhouding van 4,5:1. Als je er een gewoonte van kunt maken om achtergrond- en voorgrondkleuren te kiezen die aan deze minimale verhouding voldoen, maak je vanzelf ontwerpen die beter zichtbaar zijn voor een breder.

Kleurcontrast checken

Kleurcontrast is belangrijk om te voldoen aan de WCAG voorwaarden.