Webrichtlijn 69, 70 & 71: Kleurgebruik
Zorg ervoor dat communicatieve elementen hun betekenis niet uitsluitend door kleur overbrengen. (R-pd.10.1) Wees consistent met kleurgebruik bij het geven van betekenis. (R-pd.10.2) Zorg voor voldoende helderheidscontrast tussen tekst- en achtergrondkleur. (R-pd.10.3)
In hoeverre hou jij als designer rekening met eventuele kleurenblindheid van bezoekers?
De Webrichtlijnen geven een goed voorbeeld van hoe foutieve formulierelementen hun betekenis niet alleen via kleur overbrengen. In welke gevallen hou je hier nog meer rekening mee?
Met alle verschillende beeldschermen, resoluties, instellingen en inkijkhoeken die er te vinden zijn; hoe test je of je voldoende contrast gebruikt hebt? Zijn hier tools voor, en (hoe) gebruik je die ook echt?
En een klein uitstapje: in welke kleurcombinaties programmeer/script jij het liefst? Donkere tekst op een lichte achtergrond, of juist precies andersom? Heb je de tegenovergestelde variant wel eens geprobeerd, en hoe beviel dit?
Reacties
- 1 Boye op 24-12-2008 om 09:16 uur:
- Meestal spreek ik de designer in kwestie aan (op basis van een ontwerpanalyse) als er vraagtekens zijn wat betreft kleurgebruik in het uit te werken ontwerp. Mijn ervaring is dat met name externe ontwerpbureaus hier niet of nauwelijks rekening mee houden.
Zelf gebruik ik diverse Mozilla add-ons om dergelijke zaken te testen, zoals bijv. FAE ( Firefox Accessibility Extension ). Hierin zitten allerhande opties om zaken als contrast, resoluties en andere toegankelijkheid aspecten te testen.
Mijn favoriete kleurencombinatie in ontwikkeltools (notepad++ o.a.) blijft overigens toch donkere tekst op een lichte achtergrond, bij een donkere achtergrond vind ik sommige syntax highlighting niet altijd even duidelijk overkomen. - 2 Blaise Kal op 24-12-2008 om 10:07 uur:
- Mijn ervaring is dat de meeste ontwerpers met wie ik samenwerk of samengewerkt heb, al rekening houden met consistent kleurgebruik. Volgens mij is dat ook esthetisch belangrijk.
Ze werken wel regelmatig met kleur om een boodschap over te brengen. In sommige van die gevallen raad ik dan aan om (ook) vorm te gebruiken, bijvoorbeeld door het gebruik van een grotere of vette letter.
Contrast gaat bijna altijd vanzelf goed.
Programmeren doe ik met een witte achtergrond, om dezelfde reden als Boye noemt. Ik dacht dat een donkere achtergrond prettiger zou zijn, maar daar werd ik laatst op gecorrigeerd: http://www.baekdal.com/articles/usability/bloomberg-terminal-design#Comments - 3 Boye op 24-12-2008 om 11:01 uur:
- ”Mijn ervaring is dat met name externe ontwerpbureaus hier niet of nauwelijks rekening mee houden.”
Daarmee doel ik overigens op kleurencombinaties die mogelijk gevoelig zijn voor mensen met kleurenblindheid en niet zo zeer de kleuren in het ontwerp an sich, die zijn 9 van de 10 keer wel esthetisch verantwoord. - 4 Immeëmosol op 29-12-2008 om 11:08 uur:
- Ik wil toch even dit kleurgebruik aan het licht brengen: Emergy-C, The Low Wattage Palette
Daarnaast staat in mijn ~/.vimrc o.a.:
bg=dark
Ik heb het andersom ook wel geprobeerd, maar dat is mij te licht aan m'n ogen. Ik heb de indruk dat ik dan minder lang naar m'n monitor kan kijken...
Hoe ik test of er voldoende contrast is?
Ik bekijk de uitwerking op een oude beamer. Is het dan nog te lezen, dan is het wel in orde(en zo niet, dan niet).
@Blaise Kal:
Bedankt voor de link.
(Diegene die jou corrigeert gebruikt een niet-monospace lettertype.
Dat zou ik zelf niet prettig vinden om mee te werken.) - 5 Stomme poes op 02-01-2009 om 13:36 uur:
- Zelfs vind ik witte of lichte tekst over een donkere achtergrond makkelijker te lezen, maar ik heb veel comments op Ronger Johansens blog (456bereastreet) waarin diverse mensen liever het anders om willen. Dus voor mijn sites met lichte tekst en donkere achtergronden zou ik liever een knop voor mensen hebben dat ze kunnun klikken om een andere stylesheet te tonen, net zoals bij http://graybit.com. Klik de bodem-rechts Daylights link.
En die, GrayBit, gebruik ik (ook met http://Visicheck.com om contrast en kleurblindheid te controleren. Een voorbeeld van een pagina waarin de oude pagina alleen kleur gebruikt en waar ik extra tekst nu heb is met de kalenders hier. Liever iets anders maar ik moest met de oude design blijven (was niet van mij). - 6 David Hund op 07-01-2009 om 11:32 uur:
- Ik let er meestal wel op dat er voldoende contrast is tussen tekst en achtergronden, verder besteed ik weinig aandacht aan kleurenblindheid.
Ik gooi de pagina's vaak even door een tooltje zoals graybit of visicheck, als het er dan leesbaar uitziet vind ik het acceptabel.
Ik ontwikkel op een Mac en altijd in Textmate, daarin maak ik gebruik van het Midnight Theme of het Django theme omdat ik voor 'lang staren' toch het liefst een licht-op-donker schema gebruik. Wit is dan gewoon te helder. - 7 Ron van den Boogaard op 07-01-2009 om 15:26 uur:
- Helaas is er doorgaans in het late stadium waarin ik op een klus binnenkom geen gelegenheid meer om iets bij te sturen op dit vlak. Als CSS-schrijver neem ik design altijd als leading en daar moeten de kleurenblinden wel eens onder lijden.
Externe design buro's zijn daar ernstig debet aan. Maar als de eerste halve ton is betaald voor het ontwerp kan ik het tij niet meer keren.
Ik schrijf altijd op een witte achtergrond. Het omgekeerde wel eens geprobeerd. Daar kan ik dus niet tegen. Ik heb wel al mijn editors (BBedit/EditPlus/Topstyle/Notepad++/TextWrangler/Dreamweaver(de editor)/Coda) op dezelfde combinaties ingesteld (groen voor comments, etc.)
En voor de vraag komt: het gebruik van een editor hangt af van de buitentemperatuur i.c.m. de gedragen schoenen. Ik heb geen voorkeur. - 8 Koen Willems op 07-01-2009 om 21:57 uur:
- Standaard gebruik ik meestal deze: http://juicystudio.com/article/luminosity-contrast-ratio-main-colour-contrast-analyser.php (zie ook het nieuws van vandaag)
Wat ik, in aanvulling op de vragen hierboven, zou willen vragen: voelen jullie je qua design beperkt door de eisen die aan het kleurgebruik worden gesteld? - 9 Henri op 28-01-2009 om 13:15 uur:
- Meestal lichte achtergrond, donkere tekst, maar vaak ook een combinatie ervan (elementen).
Lichte achtergrond heeft mijn voorkeur. Donkere achtergrond gaat ook wel, maar niet tijdens het scripten :)
Wat kleurblindheid betreft: je moet zaken als "Klik op de blauwe knop" vermijden.
Wat ik altijd lastig vind is het gebruik van transparantie. Bijv. een zwarte laag, 80% transparantie kan op sommige beeldschermen écht zwart zijn, i.p.v. transparant. - 10 Hans Grimm op 04-09-2009 om 10:15 uur:
- Momenteel ben ik bezig met het front-end van de nieuwe website van het Nationaal Archief (mega-klus), en er is flink wat discussie geweest met het bureau dat het grafisch ontwerp gedaan heeft, met name over de contrastratio's. Omdat de kleurpalet voor de site heel groot is, is het errrug moeilijk om overal het contrast goed te krijgen. De site moet webrichtlijnen-conform opgeleverd worden, en we hebben al een voorschot genomen op WCAG 2 level A door het contrast voor kleine tekst op minimaal 4.5:1 voor te schrijven, en voor grote tekst op 3:1. Dit om die mooie kleurpalet niet al te zeer aan te tasten, want het ontwerpbureau heeft verder prima werk geleverd. Ben nu aan het bouwen, en check constant de contrasten :)
Worst vervolgd! - 11 Sander Aarts op 04-09-2009 om 21:28 uur:
- Wat heeft die worst misdaan dan? :)
- 12 Hans Grimm op 07-09-2009 om 11:29 uur:
- typo :):):)
- 13 Martijn van Turnhout op 26-04-2010 om 22:23 uur:
- Goed artikel! Wat betreft het kleurgebruik: ik gebruik vaak, waar mogelijk, een lichte achtergrondkleur en een donkere tekstkleur.
Daarbij probeer ik ook op graceful degradation te letten, zodat de website, met afbeeldingen én Javascript uit, nog steeds te bezichtigen is met dezelfde set kleuren. - 14 Thomas Eilander op 07-08-2010 om 02:10 uur:
- Ik hou me behoorlijk vast aan het 'zwarte tekst op witte achtergrond' principe. Dit wordt natuurlijk ook regelmatig 'donkere tekst op lichte achtergrond', wat in mijn ogen ook geen probleem is, zolang er maar voldoende contrast aanwezig is. Ik ben geen voorstander van witte (lichte) tekst op een zwarte (donkere) achtergrond. Zeker bij langere stukken tekst vind ik dit niet prettig lezen.
- 15 webton op 11-08-2010 om 17:02 uur:
- Goed artikel. Ik let er meestal wel op dat er voldoende contrast is tussen tekst en achtergronden, verder besteed ik weinig aandacht aan kleurenblindheid.