De wolken zijn wit, het gras is groen en het stoplicht is… blauw?! De wereld van kleur is complex en contextspecifiek. Zo kende het Japans historisch een ander onderscheid tussen groen en blauw, terwijl een Italiaan hemelsblauw, zeeblauw en donkerblauw als drie totaal verschillende kleuren ziet. In de bijna zeven jaar die ik in het kleurendomein heb gewerkt, ben ik anders gaan denken over hoe kleur werkt en hoe we het kunnen gebruiken. In deze blog deel ik wat ik de afgelopen zeven jaar heb geleerd.
De meeste ontwikkelaars zijn opgegroeid met hun RGB, #FF0000 voor rood en #FFFF00 voor geel. Deze kleuren worden direct vertaald naar hoe een pixel de kleur weergeeft. Dit was top, toen computers net opkwamen en processing power laag was, maar het heeft ook nadelen. Zo is het manipuleren lastig en kan een printer niets met RGB. Tijdens de conversie naar CMYK gaan de oorspronkelijke RGB-waarden onherroepelijk verloren, gezien de kleurruimtes van de twee niet geheel overlappen. Ook is dit formaat limiterend in een tijdperk van HDR-schermen.
Daarnaast is kleurgebruik cruciaal voor de toegankelijkheid van software. Goed kleurgebruik helpt hoofdpijn en vermoeidheid voorkomen, maar juist dat is binnen RGB lastig te sturen.
Kleur uitdrukken
Als we kleur willen gaan uitdrukken, gaan we op zoek naar elementen waarmee we de kleur kunnen reproduceren. De door ontwikkelaars vaak gebruikte RGB gebruikt de primaire kleuren van het additieve kleurenmodel, oftewel de primaire kleuren van licht. De hexadecimale nummers kunnen worden beschouwd als coördinaten, 256 waarden voor rood, groen en blauw.
De uitdaging met RGB ontstaat zodra we een kleur willen manipuleren. Zodra we een kleur iets lichter willen maken moeten we een nieuwe balans vinden tussen de drie kleurcomponenten. Daarom is het nuttig om het coördinatenstelsel voor kleuren anders in te delen. Een van de oudste manieren om dit te doen is het Lab-stelsel.
Lab kleuren
In het Lab-stelsel zetten we groen en rood (a) en geel en blauw (b) tegenover elkaar. Met deze twee coördinaten bepalen we de toon van de kleur, dus is de kleur paars, geel of een grijstint. De laatste waarde L staat voor Luminosity, vertaald zou dit de lichtheid/helderheid van de kleur zijn. Oftewel, is het een licht- of een heel donker- blauw?
Voor wie veel met fotografie heeft gewerkt, zal dit bekend voorkomen. De slider voor witbalans, die veel nabewerkingspakketten hebben, manipuleren de a en b van de kleuren in de foto. In front-end development kunnen deze kleuren ook gebruikt worden via de lab(l a b) functie.
Lab is ook nuttig voor het uitdrukken van verschil tussen twee kleuren. Doordat we kleur nu uitdrukken in een relatief uniforme ruimte is de afstand tussen twee punten in die ruimte een goede maat voor het verschil, dit heet een “delta E”. Specifiek wordt de “delta E” in de Lab kleurruimte een “delta Eab” genoemd.
Lab kent ook zijn beperkingen, zo is het lastig om een kleur minder intens te maken of een naastgelegen kleur te vinden. Om dit simpeler te maken is de LCH-kleurruimte gemaakt.
LCH kleuren
LCH is een alternatieve manier om coördinaten aan te geven in dezelfde ruimte als Lab. Hiermee bedoel ik dat de layout van de verschillende tinten behouden blijft, rood staat nog steeds tegenover groen en blauw nog steeds tegenover geel. Sterker nog, omhoog en omlaag is exact dezelfde waarde L (luminosity) en heeft dezelfde schaal. Waar de twee systemen verschillen, is hoe de tint van de kleur wordt aangeduid.
In LCH wordt uitgegaan van een circulaire kleurruimte. Simpel gezegd, het kleurenwiel. Hierbij zijn de coördinaten ten opzichte van het midden van de cirkel. Hierbij is C (chroma) de radius waarop de coördinaat ligt, Dit geeft de intensiteit van de kleur aan en kunnen we zien als een kleuraccuratere versie van saturatie. Hoe lager de chroma hoe grijzer de kleur.
De H (hue) is de tint van de kleur. De hue wordt aangegeven als de hoeveelheid graden van de top van de cirkel. LCH zien we vaak bij slimme verlichting, waarbij één van de bekendste merken zelfs zijn naam heeft te danken aan de hue-eigenschap.
LCH is ontzettend handig in software development door zijn manipuleerbaarheid. Op basis van een enkele kleur is de contrakleur te bepalen door aan de andere kant van de cirkel te kijken (hue+180 graden). Een kleur kunnen we grijzer maken door de chroma te verlagen en een kleur maken we lichter of donkerder door de luminosity aan te passen. In CSS kunnen we LCH gebruiken door de lch(l c h) functie te gebruiken.
Wil je weten hoe je kleuren manipuleert in CSS? Dit heb ik uitgelegd in onze recente blog Nieuwe functies in CSS: 4 features die jouw werk makkelijker maken die je kunt vinden op https://cloudrepublic.nl/nieuwe-functies-in-css-4-features-die-jouw-werk-makkelijker-maken/#relative-color-syntax
Kleurruimtes
Over hoe mensen kleuren zien, kunnen hele boekenseries over worden geschreven, en dat is dan ook meermaals gedaan. Maar de korte versie is dat de meeste mensen drie verschillende kleurreceptoren in hun ogen hebben. Dat zijn de korte, medium en lange receptoren (kegels). Hun namen komen van het deel van het spectrum waarop ze reageren. De korte kegel wordt vaak geassocieerd met blauw, de medium kegel met groen en de lange met rood. Door de overlap tussen de medium en lange kegels zien wij groen en geel het best. Daarnaast heeft de gemiddelde mens minder korte kegels waardoor we blauw licht slechter zien.
CIE-Lab en CIE-LCH
Om voor de perceptie van het menselijk zicht te corrigeren is in de jaren ‘70 de CIE-kleurruimte geïntroduceerd. Het doel van deze ruimte is om kleuren zo in te delen dat verandering in tint (hue) geen verandering in lichtheid (luminosity) of intensiteit (chroma) veroorzaakt. De originele CIE-kleurruimte was helaas erg slecht in blauwtinten, deze werden vaak paars. Mede om dit te verbeteren is in 1995 het model geüpdatet. Dit is dan ook de standaard kleurruimte die wordt gebruikt voor de lab() en lch() functies in CSS.
Sinds 1995 hebben we veel geleerd over hoe kleur werkt, en ook de beperkingen van het CIE-model ondervonden. Ondanks de correcties in 1995 blijven blauwtinten naar paars schuiven als de chroma wordt verlaagd. Daarnaast zijn kleuren met een hoge chroma vaak onnauwkeurig.
Oklab/Oklch
In 2020 is een nieuw model uitgekomen, de Ok-kleurruimte. Dit model adresseert een aantal beperkingen van het CIE-model. Zo zijn de kleuren uniformer verdeeld ten opzichte van het menselijk zicht, hierdoor lopen kleuren uniform in elkaar over. Daarnaast zijn de problemen met blauwtinten opgelost. Waardoor blauw niet meer naar paars schuift.
Ook is de kleurruimte uniformer, zowel in de verdeling over het kleurenwiel, waardoor bijvoorbeeld het lichtblauwe gebied kleiner wordt. Maar ook in de verdeling op de lichtheidas, waardoor in het gegeven voorbeeld de oranje kleur uniformer is.
Oklab en Oklch zijn beiden beschikbaar in CSS met de oklab() en oklch() functies.
Toegankelijkheid
Niet iedereen ziet kleur hetzelfde. Zo heeft bijvoorbeeld ongeveer 8% van de mannen een vorm van kleurenblindheid. Over de hele wereldpopulatie is het ongeveer 4,5% tot 5% van iedereen. Hierbij gaat het meestal om een verminderd vermogen om kleuren te onderscheiden. De meest voorkomende variant is rood-groen kleurenblindheid. Hierbij zijn de responsecurves (de range van golflengtes waarop de kegels reageren) van de medium en lange kegels naar elkaar toe verschoven. Daardoor zijn nuances tussen groen en geel, en oranje en rood, vaak lastig.
Rood-groen kleurenblindheid is ongeveer 95% van alle gevallen van kleurenblindheid.
De zeldzaamste variant van kleurenblindheid is monochromie. Hierbij functioneren geen van de kegeltjes, waardoor iemand alleen nog maar via de staafjes in zijn ogen kan zien. Dit betekent dat iemand in zwart-wit ziet.
WCAG 2
Om software goed te laten werken voor mensen met kleurenblindheid en slechtziendheid zijn de Web Content Accessibility Guidelines opgesteld. Deze richtlijn kent twee niveaus: AA en AAA.
AA wordt aangeraden voor de meeste software, en is een goede balans tussen toegankelijkheid zonder al te veel restricties op design te leggen. Deze richtlijn gaat vooral in op het contrast tussen twee kleuren. Zo wordt er voor de AA-standaard een contrast van 4.5:1 aangeraden en voor grote tekst 3:1.
Als je wilt weten hoe dit berekend wordt, raad ik aan om naar dit gedeelte van de standaard te kijken: https://www.w3.org/WAI/WCAG22/Techniques/general/G17#tests. Het is echter makkelijker om een van de talloze contrast checkers te gebruiken.
Ook is het belangrijk om te beseffen dat toegankelijkheid niet alleen belangrijk is voor mensen met een zichtbeperking. Ook iemand met “normaal” zicht zal sneller last krijgen van hoofdpijn, vermoeidheid en andere klachten als het contrast laag is.
Uiteindelijk is het voor contrast belangrijk dat het verschil in helderheid tussen kleuren groot is. De berekening voor contrast is gebaseerd op sRGB, wat helaas betekent dat we Lab en LCH niet direct kunnen gebruiken.
Wel kunnen Lab- en LCH-waarden helpen bij het manipuleren van kleuren om aan de standaard te voldoen. Is het contrast te klein? Vergroot dan het verschil in lightness tussen de twee kleuren.
Door in Lab of LCH te werken, maken we contrast niet alleen zichtbaarder, maar ook intuïtiever, omdat een groter verschil in luminosity simpelweg betekent: duidelijker onderscheid voor het menselijk oog. Toegankelijkheid is daarmee geen giswerk, maar wordt duidelijker uit de gebruikte waarden.