Kleuren in Webpagina's

5.1 Helderheid en contrast

Overdrijf helderheids verschillen tussen de voorgrond en de achtergrondkleuren. Mensen die de kleur niet kunnen waarnemen kunnen dan gebruik maken van de helderheidsverschillen. Voorkom het gebruik van kleuren met dezelfde helderheid naast elkaar, zelfs als ze van elkaar verschillen in verzadiging of tint. Let wel op met de kleur rood. Achromaten nemen rood over het algemeen als zwart waar. Voorkom dus het gebruik van deze twee kleuren op elkaar.

 

Ga er niet bij voorbaat vanuit dat de helderheid die wij zien, dezelfde is als de helderheid die mensen met een gestoorde kleurwaarneming kunnen waarnemen. Bij bovenstaande afbeelding lijkt de afstand tussen groen en rood voldoende maar bij omzetting naar monochroom vallen de groene letters vrijwel geheel weg.
NB: Sommige tekenprogramma's passen bij het omzetten naar grijstinten het palet aan zodat dit niet zichtbaar is.
Als de lichte kleuren iets lichter en de donkere kleuren iets donkerder zijn dan wordt daarmee de visuele toegankelijkheid van een ontwerp als snel vergroot. Uit onderzoek blijkt dat er bij voorkeur een contrastafstand moet zijn van minimaal 10%.

Kies donkere kleuren met tinten onderuit de circel tegenover lichte kleuren van de bovenkant van de circel. Voorkom het naast elkaar gebruiken van "lichte" kleuren van de onderkant van de circel tegenover "donkere" kleuren van de onderkant.

Voor de meeste slechtzienden en mensen met een aangeboren storing van de kleurwaarneming is de helderheid van de kleuren van groot belang. Rood groen is een meestal een vrij slechte combinatie. Dus ook het betere alternatief hierboven is niet ideaal.

Voorkom contrasterende tinten uit naastelkaar liggende delen van de tint-circel. Vooral als de kleuren niet een hoog helderheidscontrast hebben. Gebruik liever lichte kleuren van boven1 en donkere kleuren van de onderkant van de circel. Hieronder is het voorbeeld uitgewerkt.

5.2 Web veilige kleuren en hun bijbehorende RGB-waarden

Zoals in paragraaf 4.3 en 4.4. is beschreven is een grafische kaart in staat om 16,7 miljoen kleurinstellingen te produceren. Een monitor is echter slechts in staat om tussen de 20.000 en 50.000 kleuren weer te geven. Al deze kleuren worden echter niet door alle browsers en monitoren op dezelfde wijze weergegeven. Van slechts 216 kleuren staat het vast dat deze door alle software en hardware hetzelfde worden gepresenteerd. Deze 216 kleuren worden ook wel web-safe of web veilige kleuren genoemd. De meeste van de kleuren die het bovenstaande palet kan genereren zullen dus door verschillende monitoren op een verschillende manier worden gepresenteerd.

Hieronder ziet u een overzicht van de web-safe kleuren, samen met de heximale RGB waarde en de naam. De RGB waarde betreft de mate waarin Rood, Groen en Blauw van het spectrum vertegenwoordigd zijn. Let op: onderstaande tabel is niet volgens de Webrichtlijnen opgemaakt.

aliceblue #F0F8FF	antiquewhite #FAEBD7	aqua #00FFFF	aquamarine #7FFFD4
azure #F0FFFF	beige #F5F5DC	bisque #FFE4C4	black #000000
blanchedalmond #FFEBCD	blue #0000FF	blueviolet #8A2BE2	brown #A52A2A
burlywood #DEB887	cadetblue #5F9EA0	chartreuse #7FFF00	chocolate #D2691E
coral #FF7F50	cornflowerblue #6495ED	cornsilk #FFF8DC	crimson #DC143C
cyan #00FFFF	darkblue #00008B	darkcyan #008B8B	darkgoldenrod #B8860B
darkgray #A9A9A9	darkgreen #006400	darkkhaki #BDB76B	darkmagenta #8B008B
darkolivegreen #556B2F	darkorange #FF8C00	darkorchid #9932CC	darkred #8B0000
darksalmon #E9967A	darkseagreen #8FBC8F	darkslateblue #483D8B	darkslategray #2F4F4F
darkturquoise #00CED1	darkviolet #9400D3	deeppink #FF1493	deepskyblue #00BFFF
dimgray #696969	dodgerblue #1E90FF	firebrick #B22222	floralwhite #FFFAF0
forestgreen #228B22	fuchsia #FF00FF	gainsboro #DCDCDC	ghostwhite #F8F8FF
gold #FFD700	goldenrod #DAA520	gray #808080	green #008000
greenyellow #ADFF2F	honeydew #F0FFF0	hotpink  #FF69B4	indianred #CD5C5C
indigo #4B0082	ivory #FFFFF0	khaki #F0E68C	lavender #E6E6FA
lavenderblush #FFF0F5	lawngreen #7CFC00	lemonchiffon #FFFACD	lightblue #ADD8E6
lightcoral #F08080	lightcyan #E0FFFF	lightgoldenrodyellow #FAFAD2	lightgreen #90EE90
lightgrey #D3D3D3	lightpink #FFB6C1	lightsalmon #FFA07A	lightseagreen #20B2AA
lightskyblue #87CEFA	lightslategray #778899	lightsteelblue #B0C4DE	lightyellow #FFFFE0
lime #00FF00	limegreen #32CD32	linen #FAF0E6	magenta #FF00FF
maroon #800000	medium aquamarine #66CDAA	mediumblue #0000CD	mediumorchid #BA55D3
mediumpurple #9370DB	mediumseagreen #3CB371	mediumslateblue #7B68EE	medium springgreen #00FA9A
mediumturquoise #48D1CC	mediumvioletred #C71585	midnightblue #191970	mintcream #F5FFFA
mistyrose #FFE4E1	moccasin #FFE4B5	navajowhite #FFDEAD	navy #000080
oldlace #FDF5E6	olive #808000	olivedrab #6B8E23	orange #FFA500
orangered #FF4500	orchid #DA70D6	palegoldenrod #EEE8AA	palegreen #98FB98
paleturquoise #AFEEEE	palevioletred #DB7093	papayawhip #FFEFD5	peachpuff #FFDAB9
peru #CD853F	pink #FFC0CB	plum #DDA0DD	powderblue #B0E0E6
purple #800080	red #FF0000	rosybrown #BC8F8F	royalblue  #4169E1
saddlebrown #8B4513	salmon #FA8072	sandybrown #F4A460	seagreen #2E8B57
seashell #FFF5EE	sienna #A0522D	silver #C0C0C0	skyblue #87CEEB
slateblue #6A5ACD	slategray #708090	snow #FFFAFA	springgreen #00FF7F
steelblue #4682B4	tan #D2B48C	teal #008080	thistle #D8BFD8
tomato #FF6347	turquoise #40E0D0	violet #EE82EE	wheat #F5DEB3
white #FFFFFF	whitesmoke #F5F5F5	yellow #FFFF00	yellowgreen  #9ACD32

5.3 Testen van kleurcontrast

Je zou zeggen dat de meeste vormgevers niet van plan zijn om hun pagina's onleesbaar te maken en dat in veel gevallen het gebruik van gezond verstand de beste oplossing is voor effectief kleurcontrast. Toch zijn er voldoende voorbeelden van absoluut ontoegankelijke sites. Hoe is een effectief contrast vast te stellen?

1. Gezond verstand test: bekijk de pagina onder normale (dag)lichtomstandigheden;
2. In de papieren ontwerpfase van het screendesign: hou de kleuren naast een kleurenwaaier met reflectie coefficient waarden en stel de contrastwaarde vast naar aanleiding van het verschil in reflectie coefficient. Zorg voor een contrastwaarde van minimaal 10% en vertaal deze waarden naar monitor waarden;
3. Gebruik de shareware Vischeck plugin voor Adobe Photoshop voor problemen voor kleurenblinden;
4. Zet de pagina om naar grijstinten;
5. Zet de pagina om naar webveilige kleuren.

5.3.1. Gezond verstand test

Afbeelding: Pagina met weinig contrast tussen letters en achtergrond. Door het verschil in contrast te vergroten is deze pagina als snel leesbaarder. De letterkleur zou zwart kunnen zijn of de achtergrond donkerder.

Door een pagina onder normale (dag)lichtomstandigheden te bekijken is vaak in een oogopslag te zien of er voldoende contrast is om de pagina comfortabel te kunnen lezen. Comfortabel wil zeggen dat er voldoende contrast is om langere tijd door te lezen en dat er vanuit de normale kijkhoek gelezen kan worden. Het moet dus niet nodig zijn om het scherm vanuit een bepaalde hoek te benaderen om de inhoud te kunnen waarnemen (RSI).

5.3.2. Reflectie coefficient waarden

Afbeelding van kleurenwaaier met reflectie coefficient.

In de fase van het ontwerp van een site/pagina wordt vaak een papieren screendesign opgeleverd waarop de kleuren zijn aangegeven. Met een speciale kleurenwaaier kan de reflectie coefficient waarde worden vastgesteld (voor papier). Die waarde geeft aan wat de reflectie van een kleur op een bepaalde soort papier is. Dit is van belang voor het contrast tussen twee kleuren. Het kan zijn dat twee verschillende kleuren dezelfde coefficientwaarde hebben (bepaalde kleur groen en blauw etc). Op papier kan alvast een minimale contrastwaarde van 10% worden vastgesteld. De kleuren kunnen dan worden vertaald naar internet/monitor waarden met voldoende contrast; Deze kleurenwaaiers zijn bij de meeste fabrikanten van verf te bestellen. NB: Niet alle fabrikanten leveren waaiers met reflectiecoefficient waarden.

5.3.3. Vischeck plugin voor Photoshop

Afbeelding van vischeck plugin in Photoshop

De Vischeck test is er nu ook via de Toolbar van AIS en Accessibility. Ga naar het tabblad "internet" en kies "tools". Daar staat een link naar de Accessibility Toolbars. Vischeck kan als plugin ook worden gebruikt in combinatie met Photoshop. Een screenshot kan dan gemakkelijk worden omgezet naar de meest voorkomende vormen van kleurenblindheid. Dit is een manier om snel na te gaan of een kleurencombinatie problemen oplevert voor kleurenblinden. Let niet op omzetting van de kleuren maar op leesbaarheid en functionaliteit. Dus als er staat "klik op de rode knop" dan kan dat bij een deuteranoop problemen opleveren omdat dat verschil gestoord is of niet meer bestaat.

5.3.4. Omzetten naar grijstinten

Door de omzetting naar grijstinten is het mogelijk om de helderheidsverschillen tussen kleuren waar te nemen. Zet een pagina om naar grijstinten door de kleurinformatie weg te halen (kanalen op nul zetten). Het verschil in helderheid / contrast moet minimaal 10% zijn. Hier is ook gezond verstand zoals eerder genoemd van belang. Bekijk het resultaat dus onder normale omstandigheden.

5.3.5. Omzetten naar webveilige kleuren

Afbeelding: telefoon met scherm dat moment 256 kleuren ondersteunt.

Zet de pagina om naar webveilige kleuren. Dat is een kleiner palet. Bij het omzetten worden kleuren automatisch gegroepeerd. Daarbij valt soms het verschil tussen kleuren en dus het contrast geheel weg. Veel oudere webtv toepassingen en mobiele en portable apparaten gebruiken nog lage kleuren. PDA's mobiele telefoons met internet en multimedia mogelijkheden maken op dit moment nog gebruik van een lager kleurenpalet. Ontwerp hier anders een aparte template voor die kan worden getoond als de informatie door deze apparaten wordt opgevraagd.