Kleur en Contrast – Richtlijnen voor Tekstweergave
Deze richtlijnen beschrijven hoe kleur en contrast worden toegepast binnen onze leeromgevingen, gebaseerd op het Hue Chroma Tone (HCT)-model. Dit model biedt een natuurlijke en intuïtieve benadering van kleurcontrast, waardoor toegankelijkheid en visuele consistentie eenvoudig beheerd kunnen worden, zonder dat ontwerpers handmatig moeten corrigeren.
1. Introductie tot kleurcontrast en het HCT-model
Contrast is het verschil in helderheid tussen een voorgrondkleur (zoals tekst) en een achtergrondkleur. Goed kleurcontrast is essentieel voor leesbaarheid, vooral voor gebruikers met visuele beperkingen. Ons kleurensysteem is opgebouwd rond het HCT-model (Hue Chroma Tone), dat speciaal is ontworpen om visuele consistentie en toegankelijkheid te verbeteren.
Wat maakt HCT uniek?
Hoewel HCT een nieuw model is, bouwt het voort op bestaande kleurwetenschappen en maakt het gebruik van beproefde kleurmodellen:
- Lab (ook wel LCH genoemd): Dit model beschrijft kleuren op basis van helderheid (lightness), zuiverheid (chroma), en kleurtint (hue).
- CAM16: Dit model biedt perceptueel nauwkeurige metingen voor kleurtint en kleurintensiteit. HCT neemt de tint (hue) en kleurzuiverheid (chroma) uit CAM16 over, wat betekent dat de kleurperceptie voor gebruikers betrouwbaarder is en minder afhankelijk van omgevingsverlichting.
Het HCT-model maakt het mogelijk om contrast op een directe, visuele manier te beheren door:
- Lichtheidswaarde (tone), die gebaseerd is op Lab* en het meten van contrast vergemakkelijkt.
- Tint (hue) en zuiverheid (chroma), die overgenomen zijn van CAM16 voor betere perceptuele consistentie.
Met deze aanpak hebben we een systeem dat de toegankelijkheidseisen direct integreert. Ontwerpers hoeven zich dus minder bezig te houden met het corrigeren van contrast of kleurverschillen, omdat HCT consistent werkt met hoe kleuren door gebruikers worden waargenomen.
2. Waarom kiezen we voor het HCT-model?
HCT biedt ontwerpers voor het eerst een kleurensysteem dat aansluit op hoe gebruikers kleuren echt zien, rekening houdend met contrast, lichtintensiteit en kleurnauwkeurigheid. Onze keuze voor HCT is gebaseerd op:
- Betrouwbaar contrastbeheer: Door het gebruik van de lichtheidswaarde (tone) uit Lab* kunnen we eenvoudig voldoen aan toegankelijkheidsnormen zonder handmatige aanpassingen.
- Visuele consistentie over verschillende kleuren heen: HCT houdt kleurnuances consistent, zelfs bij het aanpassen van tinten en verzadiging. Dit zorgt voor een intuïtieve kleurervaring.
- Direct geïntegreerde toegankelijkheidsnormen: HCT maakt het mogelijk om contrastcontrole en toegankelijkheidseisen al in het ontwerp op te nemen, wat leidt tot een betere gebruikerservaring.
Het HCT-model elimineert enkele beperkingen van oudere kleurmodellen, zoals Lab*, die vaak onbetrouwbaar bleken in ontwerppraktijken vanwege inconsistente perceptie.
3. Color Roles in ons ontwerp
Om kleurgebruik in onze interfaces overzichtelijk te maken, hebben we het kleurensysteem onderverdeeld in specifieke Color Roles, elk met een eigen functie en betekenis in de interface. Deze Color Roles helpen ons om kleurgebruik consistent en duidelijk te houden:
- Primair: De merk- of platformkleur, prominent aanwezig in belangrijke knoppen of headers.
- Secundair: Een ondersteunende kleur, die de hiërarchie versterkt zonder af te leiden.
- Tertiair: Een aanvullende kleur, vaak gebruikt voor subtiele accenten of achtergrondelementen.
- Achtergrond: De kleur op de achtergrond van een scherm of sectie waarop de voorgrondkleur afsteekt.
- Oppervlaktekleuren: Kleuren die visuele indelingen en onderbrekingen creëren.
- Waarschuwing en succes: Kleuren die de aandacht trekken voor meldingen zoals fout- of succesberichten.
- Outline: Randkleuren die subtiele omkadering bieden zonder af te leiden van de kerninhoud.
De Color Roles zijn specifiek afgestemd op de eigenschappen van het HCT-model om overal consistent te voldoen aan contrastvereisten.
4. Richtlijnen voor tekstcontrast
Om onze leeromgevingen zo leesbaar mogelijk te maken, volgen we enkele belangrijke contrastregels:
- Standaard tekstcontrast:
- Voor reguliere tekst (12-16 pt) geldt een minimaal contrast van 4.5:1.
- Voor grote tekst (boven de 16 pt) is een contrastverhouding van minimaal 3:1 vereist.
- Contrast voor primaire elementen:
- Knoppen, links en belangrijke informatiedelen krijgen een hoger contrast, zodat ze goed opvallen.
- Aanpassing per thema:
- Voor lichte thema's wordt donkere tekst gebruikt op een lichte achtergrond.
- Voor donkere thema's gebruiken we lichte tekst op een donkere achtergrond.
Doordat de Color Roles op het HCT-model zijn gebaseerd, blijft het contrast consistent in zowel lichte als donkere thema’s, zonder dat handmatige correcties nodig zijn.
5. Toegankelijkheidseisen en WCAG-normen
We voldoen aan de WCAG (Web Content Accessibility Guidelines) 2.2 AA-normen, waaronder:
Doordat HCT geïntegreerde contrastcontrole biedt, voldoen onze kleuren vanzelf aan de contrastvereisten, wat de toegankelijkheid en het gebruiksgemak voor een brede doelgroep waarborgt.
6. Praktische tips voor designers
Bij het toepassen van deze richtlijnen, helpen de volgende tips om kleur en contrast op een effectieve manier te gebruiken:
- Ontwerp eerst in grijstinten: Begin met een grijswaardenontwerp om de hiërarchie duidelijk te maken zonder afhankelijk te zijn van kleur.
- Beperk het kleurenpalet: Een kleiner kleurenpalet creëert visuele rust en maakt de interface beter leesbaar.
- Gebruik kleur volgens de context: Stem contrastregels af op de context van de interface, zoals veel tekst versus veel iconen of knoppen.
- Gebruik enkel de vastgelegde color roles: Gebruik alleen de gedefinieerde Color Roles om consistentie en toegankelijkheid te waarborgen. Deze kleuren zijn geoptimaliseerd voor contrast en visuele duidelijkheid.
- Test met gebruikers: Test de kleurkeuzes met gebruikers die mogelijk visuele beperkingen ervaren om de toegankelijkheid te garanderen.
7. Praktische tips voor developers
- Houd je aan de Color Roles: Gebruik de gedefinieerde Color Roles in de code, zoals
primary,secondary-containerofsurface, om consistentie te waarborgen en de contrastvereisten te voldoen. Deze classes stellen je in staat zowel achtergrond- als voorgrondkleuren in te stellen, waarbij de juiste contrastverhouding automatisch behouden blijft. - Gebruik de HCT-contrastchecker: Maak gebruik van de ingebouwde tools voor het controleren van kleurcontrast op basis van het HCT-model, zodat de toegankelijkheid automatisch gewaarborgd blijft.
- Test op verschillende apparaten: Controleer de kleuren en contrasten op diverse schermen en apparaten om consistentie te waarborgen. Vergeet niet te testen op oudere toestellen of onder slechte weergaveomstandigheden om de leesbaarheid overal te garanderen.
8. De wiskunde achter contrastratio
De WCAG-richtlijnen gebruiken een specifieke wiskundige formule om contrastratio te berekenen. Laten we dit stap voor stap doornemen.
Wat is contrastratio en waarom is het belangrijk?
Contrastratio is een numerieke waarde die het verschil in helderheid tussen twee kleuren uitdrukt. Een hogere contrastratio betekent dat kleuren gemakkelijker van elkaar te onderscheiden zijn, wat essentieel is voor:
- Leesbaarheid van tekst
- Zichtbaarheid van interface-elementen
- Toegankelijkheid voor mensen met visuele beperkingen
- Bruikbaarheid in verschillende lichtomstandigheden
De WCAG-standaard (Web Content Accessibility Guidelines) definieert minimumwaarden voor contrastratio om ervoor te zorgen dat content leesbaar is voor een zo breed mogelijk publiek.
De basisprincipes van contrastratio
Stap 1: Begrijpen wat relatieve luminantie is
Relatieve luminantie is een maat voor de waargenomen helderheid van een kleur. Het menselijk oog is niet even gevoelig voor alle kleuren:
- We zijn het meest gevoelig voor groen
- Daarna rood
- En het minst gevoelig voor blauw
Dit verklaart waarom een felgroen en een felrood met dezelfde RGB-intensiteit verschillend in helderheid worden ervaren.
Stap 2: Van RGB naar relatieve luminantie
De berekening van relatieve luminantie verloopt als volgt:
RGB-waarden normaliseren:
De RGB-waarden (0-255) worden omgezet naar een schaal van 0 tot 1:
Bijvoorbeeld: RGB(255, 128, 0) wordt (1, 0,502, 0)
Gamma-correctie toepassen:
Beeldschermen geven kleuren niet lineair weer zoals onze ogen ze waarnemen. De gamma-correctie compenseert dit:
Deze stap corrigeert voor de niet-lineaire weergave van kleuren op beeldschermen versus de menselijke perceptie.
Gewogen luminantie berekenen:
De drie waarden worden gecombineerd met verschillende gewichten:
Groen (G) krijgt het zwaarste gewicht (0,7152), omdat het menselijk oog het meest gevoelig is voor groen licht.
Stap 3: Contrastratio berekenen
Met de relatieve luminantie van beide kleuren wordt de contrastratio berekend:
Waarbij:
- L₁ is de relatieve luminantie van de lichtere kleur (de hogere waarde)
- L₂ is de relatieve luminantie van de donkerdere kleur (de lagere waarde)
De constante 0,05 is toegevoegd om rekening te houden met de omgevingsverlichting en om te voorkomen dat de ratio oneindig wordt als een van de kleuren zuiver zwart is (luminantie = 0).
Praktische interpretatie van contrastratio
De contrastratio varieert van 1:1 (geen contrast, identieke kleuren) tot 21:1 (maximaal contrast, zoals zwart op wit). De WCAG-richtlijnen specificeren:
- 4,5:1 - Minimumratio voor normale tekst (AA-niveau)
- 3:1 - Minimumratio voor grote tekst (AA-niveau)
- 7:1 - Verbeterde ratio voor normale tekst (AAA-niveau)
- 4,5:1 - Verbeterde ratio voor grote tekst (AAA-niveau)
Visuele voorbeelden van contrastratio
Concrete voorbeelden:
- Zwart (#000000) op wit (#FFFFFF): Contrastratio = 21:1 (maximaal contrast)
- Donkergrijs (#595959) op wit (#FFFFFF): Contrastratio ≈ 7:1 (voldoet aan AAA-niveau)
- Middengrijs (#767676) op wit (#FFFFFF): Contrastratio ≈ 4,5:1 (voldoet aan AA-niveau)
- Lichtgrijs (#AAAAAA) op wit (#FFFFFF): Contrastratio ≈ 2,1:1 (voldoet niet aan WCAG-richtlijnen)
Contrastratio in relatie tot het HCT-model
Het HCT-model (Hue-Chroma-Tone) maakt het beheren van contrast eenvoudiger omdat:
- De Tone-component (T) direct gerelateerd is aan de luminantie van een kleur
- Door Tone-waarden aan te passen, kunnen we eenvoudig het contrast beheren terwijl we de kleurtint (Hue) en kleurverzadiging (Chroma) behouden
- Dit maakt het mogelijk om toegankelijke kleurpaletten te creëren die visueel consistent zijn
Praktische tools voor contrastratio
Handige hulpmiddelen voor het werken met contrastratio:
- Contrast checkers: Tools zoals de WebAIM Contrast Checker of de Contrast Checker van Adobe
- Design tools: Figma, Sketch en Adobe XD hebben ingebouwde contrastcheckers
- Browser-extensies: Chrome en Firefox hebben extensies die contrastratio controleren
- Code-bibliotheken: Er zijn diverse bibliotheken beschikbaar die contrastratio berekenen
Waarom is dit belangrijk?
De aandacht voor contrastratio heeft meerdere voordelen:
- Wettelijke vereisten: In veel landen zijn er wettelijke vereisten voor toegankelijkheid van digitale producten
- Inclusiviteit: Ongeveer 1 op de 12 mannen en 1 op de 200 vrouwen heeft een vorm van kleurenblindheid
- Gebruikerservaring: Goed contrast verbetert de gebruikerservaring voor iedereen
- Merkperceptie: Toegankelijke ontwerpen verbeteren de perceptie van een merk als inclusief en gebruikersgericht
Hoe het HCT-model helpt bij het voldoen aan contrastvereisten
Het HCT-model vereenvoudigt het proces van het creëren van toegankelijke ontwerpen door:
- Intuïtieve controle: Door de Tone-component aan te passen, beïnvloedt men direct het contrast
- Consistentie: Het model zorgt ervoor dat kleuren consistent worden waargenomen, ongeacht de omgevingsverlichting
- Automatisering: Systemen gebaseerd op HCT kunnen automatisch kleuren aanpassen om aan contrastvereisten te voldoen
- Voorspelbaarheid: De impact van kleurveranderingen op contrast is beter voorspelbaar