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.

Kleurcontrast berekenen volgens WCAG standaard

Je kan hieronder het kleurcontrast berekenen volgens WCAG standaard. Vul rechts je 2 kleurwaarden in en zie de score die erbij past:

See the Pen Understanding the Contrast Ratio by Stacie (@Metahari) on CodePen.

Nog een link om te controleren:

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

Beste Kleurcontrast gereedschappen

Er zijn een aantal betaalde en gratis tools die UX ontwerpers kunnen helpen bij het analyseren van de kleurenpaletten die je op dit moment gebruikt. De volgende gratis tools zijn een goede plek om te beginnen.

De volgende gratis hulpmiddelen zijn een goed vertrekpunt om te beginnen:

• WebAIM Contrast Checker – Een eenvoudig hulpmiddel van WebAIM, een non-profitorganisatie die uitgaat van het Centrum voor Personen met een Handicap van de Utah State University
• Colorzilla – Een Firefox-extensie die kleuren rechtstreeks van een website haalt
• WAVE (web evaluation accessibility tool) – Een standalone tool en een Chrome-extensie die kleurcontrast en alle andere WCAG-toegankelijkheidsrichtlijnen onderzoekt
• Google DevTools Lighthouse – Geweldig voor degenen die ook direct met code werken
• Color Contrast Analyser – Dit hulpmiddel van de Paciello Group, die gespecialiseerd is in toegankelijkheid, is downloadbare software voor Windows en Mac  
• Contrast Ratio – Een heel goed eenvoudig hulpmiddel van Lea Verou, een specialist in Mens-Computer Interactie. De beste contrast ratio checker die ik ben tegen gekomen.
• Success Criterion 1.4.3 – Contrast (minimum) – Meer informatie over WCAG's richtlijnen voor contrastverhoudingen en tegemoetkomen aan de standaarden en richtlijnen

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.

6 januari 2008 Geen reacties