Terug naar Effectief met kleur

Kleuren in Webpagina's

Hoe gebruik je kleuren op webpagina's zo effectief mogelijk?

5.1 Helderheid en contrast

Overdrijf helderheidsverschillen

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.

Effectief en niet effectief groen-rood contrast Laag contrast bij omzetting naar grijstinten

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%.

Zet donkere tegenover licht kleuren

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.

Helderheid belangrijk voor contrast

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.

Tintencircel contrastvoorbeeld

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.

Contrastvoorbeeld naast elkaar liggende tinten

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

pagina met laag contrast

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

kleurenwaaier

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

schermafbeelding van vischeck plugin

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

telefoon met internet

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. Oude PDA's en oude 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.

Gerelateerd

Tags:
Categorie:
Kennisbank
  • Delen op Facebook
  • Delen op Twitter
  • Delen op LinkedIn