An optimist is a person who sees a green light everywhere, while a pessimist sees only the red stoplight. . . The truly wise person is colorblind.
— Albert Schweitzer (1875–1965)
CSS kleuren en achtergrond
Kleuren specifiëren
Over kleuren, kleurmodellen, transparantie, … valt heel veel te vertellen. We willen dit stukje echter zo eenvoudig mogelijk houden.
Kevin Powell geeft een goed overzicht van enkele mogelijkheden om met kleuren te werken.
Mogen we voorstellen om zo weinig mogelijk met kleurennamen te werken? Ik gebruik die zelf ook wel eens om in een voorbeeldje snel iets duidelijk te maken, maar je leert eigenlijk meer over hoe kleuren werken in CSS als je de andere opties (RGB hex, RGB decimaal, … ) gebruikt.
Kleur en toegankelijkheid
Contrast voor- en achtergrondkleur
Hoe kan je bepalen of de tekstkleur voldoende contrast heeft met de achtergrondkleur? In het volgend filmpje toon ik hoe je de Colour Contrast Analyser gebruikt. Download deze tool voor windows / mac OS.
Kleurenblindheid
Hoeveel procent van de mannelijke bevolking heeft een verstoord kleurenzicht, algemeen ‘kleurenblindheid’ genoemd? En hoeveel procent bij de vrouwen, denk je?
Voor mannen vind je vaak percentages in de buurt van 8%. Eén man op 12 heeft dus last met kleurenzicht. Bij vrouwen komt dit veel minder voor: het meest geciteerde percentage is 0,4%
Niet iedereen neemt kleuren op dezelfde manier waar. Groen / rood is een veel voorkomend probleem bij mensen met verstoord kleurenzicht. Ik heb een vriend die geen bosaardbeitjes kan plukken, omdat voor hem de vruchtjes dezelfde kleur hebben als de rest van de plant.
Gebruik dus nooit alleen kleur om informatie door te geven. Daarom is het geen goed idee om links in de tekst niet te onderlijnen. Wie weet koos je een kleur die voor jou wel heel duidelijk is, maar die voor iemand met kleurenblindheid bijna niet te onderscheiden valt van de rest van de tekst.
Links in de tekst onderstreep je altijd! Links in de navigatie zijn door hun plaats sowieso duidelijk als link herkenbaar. Die hoef je dus niet te onderstrepen.
Volgende screenshot van het WAI toont hoe je niet alleen op kleur mag betrouwen om informatie door te geven. De rechterkolom geeft telkens een goed alternatief voor de foute versie in de linkerkolom.
Achtergrondafbeeldingen
Werken met achtergrondafbeeldingen (background-image) kan
mooi zijn, maar het is niet zo eenvoudig om het goed te doen. Bekijk
volgend fragmentje uit een studentensite. Je merkt hoe sommige letters
goed leesbaar zijn, maar andere dan weer helemaal niet. Als je de ‘Colour
Contrast Analyser’ los zou laten op de letter ‘c’ van het woord ‘Voice’
hieronder, ben ik wel zeker dat de vereiste contrastverhouding niet
gehaald wordt.
Op bepaalde schermresoluties is volgende afbeelding op een site OK, maar dus duidelijk niet op de resolutie die ik gebruikte om de site van University of Twente te bekijken, want sommige witte letters komen op een licht stuk van de achtergrondfoto terecht.
Een afbeelding achter tekst kan zeker, maar je zal bijna altijd met speciale technieken moeten werken, zoals transparantie, text-shadow enz. Eigenlijk heeft het alleen zin voor een beperkte hoeveelheid letters, die dan vaak nog groot zijn ook (zoals bij de zogenaamde ‘hero-images’).
Volgende foto toont het gebruik van text-shadow om de leesbaarheid te garanderen als de tekst bovenop een foto (die zowel
lichte delen zoals het haar als donkere delen zoals de jas heeft) staat.
Gradiënten
Je kan in CSS vrij eenvoudig een verlooptint (gradiënt) maken. Kevin Powell geeft een mooi overzicht van enkele mogelijkheden in vijf minuten.
CSS custom properties (variabelen)
Het is een goed idee om met een beperkt kleurenpallet te werken. Stel, je gebruikt een mooie tint van oranje voor links, blauw voor titels, enz. Die kleuren komen dan mogelijk tientallen keren voor in je CSS.
Een grafisch ontwerper bekijkt je site en overtuigt je ervan om toch maar andere kleuren te kiezen. Dat betekent dus dat die waarden overal moeten aangepast worden in je CSS.
Om je code zo leesbaar en onderhoudbaar te maken is het een goed idee om gebruik te maken van CSS custom properties, vaak ‘variabelen’ genoemd. Voor de site die je nu leest, maak ik gebruik van volgende custom properties:
:root {
--linkkleur: rgb(247, 126, 12); /* oranje */
--titelkleur: #00A; /* blauw */
--afronding: 5px; /* consistente afrondingen van kaders */
}Je gebruikt dit dan als volgt in de rest van je code:
header nav li a {
display: block;
padding: 3px 0.7em;
color: #eee;
text-decoration: none;
border-radius: var(--afronding);
}
header nav ul li.hier a {
color: #fff;
background-color: var(--linkkleur);
}Kleurenschema (niet? een beetje?) baseren op het bedrijfslogo
Het is soms een goed idee een (of meerdere) kleuren uit een logo te laten terugkomen in het kleurenpalet van de site. De voor de hand liggende fout echter is dat je hierin veel te ver gaat. Volgende schermafbeelding is van een studentensite voor een matrassenwinkel. Die heeft een logo met blauw en geel erin. Het resultaat doet pijn aan de ogen:
Toegegeven, ik zocht er het meest overdreven voorbeeld uit. Meestal is het niet zo erg, maar toch: de verleiding om je teveel te laten leiden door kleuren uit het logo is dikwijls aanwezig. Ontwerper Steve Schoger zegt het in ‘Refactoring UI’ zo: “Be conservative with how you use brand colors in your designs — you’d be surprised how little color you need to make your designs feel colorful.” Als illustratie hiervan volgend voorbeeld:
