Kleur en vormgeving
Ontwerp begint hier met kleur: hoe het oog licht in kleur omzet, hoe een scherm kleur als drie getallen opschrijft en hoe je controleert of tekst leesbaar blijft.
Zeven hoofdstukken rond één kleurmodel
Dit vak heeft voorlopig één cursus, Kleurentheorie, met zeven hoofdstukken. Het eerste legt uit hoe we kleur zien. De volgende twee gaan over RGB met hexcodes en daarna over tint, verzadiging en lichtheid. Het vierde bouwt kleurharmonieën, het vijfde vergelijkt licht mengen met inkt mengen. De laatste twee behandelen contrast en kleurgebruik in een echt ontwerp. De meeste hoofdstukken gebruiken hetzelfde model dat je met de muis draait: een RGB-kubus van 512 blokjes, of dezelfde kleuren herschikt tot een HSL-cilinder. Klik op een punt en het paneel eronder geeft de hexcode, HSL-waarden, harmoniekleuren en contrastverhouding tegenover een zelfgekozen achtergrond.
Kegeltjes, prisma's en RGB
Een rode appel bevat geen rood. Hij absorbeert de korte en middelste golflengten van zonlicht en kaatst de lange terug. Het netvlies heeft ongeveer 6 miljoen kegeltjes van drie soorten. Kleur ontstaat doordat de hersenen ze vergelijken, en daarom kunnen zuiver geel licht en rood plus groen licht er hetzelfde uitzien. Newton splitste zonlicht in de jaren 1660 met prisma's en tekende in Opticks van 1704 een van de eerste kleurencirkels. Op het web loopt elk kanaal van 0 tot 255: rgb(0 0 0) is zwart en rgb(255 255 255) is wit. Een hexcode bestaat uit drie paren cijfers in grondtal 16. In #2273c3 betekent het paar c3 dus 12 × 16 + 3 = 195.
Hoeken op de kleurencirkel
HSL plaatst tint als een hoek: 0deg is rood, 120deg groen en 240deg blauw. Bij 0% verzadiging heeft tint geen effect en 50% lichtheid geeft de levendigste versie van een tint. De cursus benoemt eerlijk de beperking: geel en blauw met dezelfde 50% lichtheid hebben luminanties van 0.9278 en 0.0722. Als kleuren op de cirkel staan, is een harmonie een reeks hoeken. Complementaire tinten staan 180 graden uiteen, een triade heeft drie tinten met 120 graden ertussen en gesplitst complementair gebruikt 150 en 210 graden. Het hoofdstuk waarschuwt dat de lichtcirkel blauw tegenover geel zet, maar de schilderscirkel blauw tegenover oranje. Inkt werkt omgekeerd aan licht: cyaan verwijdert rood, magenta groen en geel blauw. Drukkers voegen zwart toe omdat echte inkten samen een modderig bruin geven.
De verhouding die leesbaarheid bepaalt
Leesbare tekst meet je; je beoordeelt die niet alleen op het oog. De relatieve luminantie van WCAG weegt de gelineariseerde kanalen als 0.2126 voor rood, 0.7152 voor groen en 0.0722 voor blauw. De contrastverhouding is (L1 + 0.05) / (L2 + 0.05) en loopt van 1:1 tot 21:1. Niveau AA vraagt 4.5:1 voor gewone tekst en 3:1 voor grote tekst en interfaceonderdelen. AAA vraagt 7:1. Grijs #767676 op wit haalt 4.54:1 en voldoet. Rood #ff0000 haalt 4.00:1 en voldoet niet voor gewone tekst. Het laatste hoofdstuk voegt WCAG 1.4.1 toe: kleur mag nooit de enige informatiedrager zijn, omdat ongeveer 8% van de mannen een rood-groenkleurenzienstoornis heeft. Plan eerst de lichtheidsstappen en daarna de tinten. Het merkoranje en zijn blauwe complement in het model halen maar 1.06:1.
Vragen over dit vak
Wat betekenen de getallen in een RGB-kleur?
Ze bepalen de rode, groene en blauwe kanalen, die in webcode meestal van nul tot 255 lopen. Nul zet een kanaal uit en 255 volledig aan. Alle kanalen op nul geven zwart, allemaal op 255 geven wit. Een hexkleur legt dezelfde drie kanalen vast als drie paren hexadecimale cijfers. Het gaat dus niet om een andere verzameling kleuren. Kleurentheorie
Waarom kunnen twee HSL-kleuren met dezelfde lichtheid toch verschillend helder lijken?
HSL-lichtheid is een coördinaat in een kleurmodel, geen rechtstreekse maat voor waargenomen helderheid. Volledig verzadigd geel en blauw hebben beide lichtheid vijftig procent, maar geel oogt veel lichter. Hun relatieve luminanties volgens WCAG zijn respectievelijk 0.9278 en 0.0722. Alleen gelijke HSL-getallen tonen daarom niet aan dat tekst en achtergrond voldoende contrast hebben. Kleurentheorie
Waarom doet het veranderen van de tint niets bij nul verzadiging?
Bij nul verzadiging ligt de kleur op de grijsas van het HSL-model. De tint doet er dan niet meer toe. Een rode en een cyaanblauwe tinthoek geven bij vijftig procent lichtheid hetzelfde grijs. Lichtheid blijft wel van belang: nul procent geeft zwart en honderd procent wit, ongeacht de gekozen tinthoek op de kleurencirkel. Kleurentheorie
Waarom voegen drukkers zwarte inkt toe in plaats van alleen drie kleuren te mengen?
Echte cyaan-, magenta- en gele inkten zijn onvolmaakte filters. Gemengd kunnen ze daarom modderig donkerbruin opleveren in plaats van zuiver zwart. Drie lagen drukken voor alleen zwarte tekst is bovendien traag en nat. CMYK voegt daarom aparte zwarte inkt toe. Echte verf werkt nog ingewikkelder, omdat pigmenten licht niet alleen absorberen maar ook verstrooien. Kleurentheorie
Welke contrastverhouding vraagt WCAG AA voor gewone tekst?
Gewone tekst vereist minstens 4.5:1; voldoende grote tekst vereist 3:1. De verhouding vergelijkt de relatieve luminantie van voor- en achtergrond, niet alleen het verschil in tint. Rood #ff0000 op wit geeft 4.00:1. Het kan dus voldoen voor grote tekst maar niet voor gewone tekst, ook al ziet het eruit als een krachtige, levendige kleurkeuze. Kleurentheorie