Tekstkleur kiezen op basis van de achtergrondkleur
Bron: Dit is een vrije bewerking van het artikel 'Calculating Color Contrast' door Brian Suda, 24ways.org, 24 december 2010.
Er moet een goed contrast zijn tussen de achtergrondkleur en de tekstkleur. Dan weet je zeker dat de tekst goed leesbaar is.
Als je een witte of heel lichtgrijze achtergrond hebt, ligt het voor de hand om de tekst zwart te maken, of heel donker
grijs.
Het omgekeerde geldt ook. Als de achtergrond zwart of bijna zwart is, zul je al gauw voor witte tekst kiezen.
In bovenstaande voorbeelden is de keuze niet moeilijk. Maar wat te doen als de kleuren er uitzien als hier onder?
| #EF4444 | #FAA31B | #FFF000 | #82C341 | |||
| #009F75 | #88C6ED | #394BA0 | #D54799 |
Bij de meeste van deze kleuren is het niet moeilijk om uit te maken wat het beste kleur is voor de tekst. Bij de rode en de groene kleuren is het lastiger.
Een aantal mensen heeft geprobeerd om keuze voor witte of zwarte tekst te vangen in eenvoudige programma code, om de keuze eenvoudiger te maken. Daarvan worden er hier twee besproken.
- De aanpak is: Kijk of de Hexadecimale RGB-code van de kleur (de code
met het # er voor) groter is dan de helft van het hele kleurenbereik. Deze aanpak wordt 50% genoemd.
In JavaScript codeer je dit als: volgt:
function getContrast50(hexcolor) {
return(parseInt(hexcolor, 16) > 0×ffffff/2) ? "black" : "white";
}
De benadering is nogal rechttoe-rechtaan en houdt geen rekening met de sterke invloed van geel op de beleving van de kleur. - Een ietwat uitgebreidere methode heet YIQ, wat staat voor Yellow In-phase Quadrature.
Het voert te ver om hier diep op in tegaan. Goede informatie hierover vind je op Wikipedia.
De aanpak is om de Hexadecimale RGB-code op te splitsen in de drie componenten Rood, Groen en Blauw en die vervolgens met een factor weer samen te voegen. Vervolgens wordt gekeken of het resultaat groter is dan de helft van het kleurenbereik.
In JavaScript codeer je dit als: volgt:
function getContrastYIQ(hexcolor) {
var r = parseInt(hexcolor.substr(0,2),16);
var g = parseInt(hexcolor.substr(2,2),16);
var b = parseInt(hexcolor.substr(4,2),16);
var yiq = (r*299 + g*587 + b*114)/1000;
return (yiq >= 128) ? "black" : "white";
}
De resultaten van de twee methodes worden hieronder vergeleken.
| 50% | #EF4444 | #FAA31B | #FFF000 | #82C341 | |||
| #009F75 | #88C6ED | #394BA0 | #D54799 |
Bij de 50%-methode wordt zwart het meest gekozen. Alleen voor de donkergroene kleur en het donkerblauw-paars wordt wit gekozen. De meeste achtergrondkleuren worden dus als lichte kleuren gezien.
| YIQ | #EF4444 | #FAA31B | #FFF000 | #82C341 | |||
| #009F75 | #88C6ED | #394BA0 | #D54799 |
Bij de YIQ-benadering wordt vaker wit gekozen. Dat zie je bij achtergrondkleuren die relatief veel rood bevatten. Toch zijn de verschillen in het algemeen niet groot, in elk geval kleiner dan je op het eerste gezicht zou verwachten.
Hieronder vind je nog een tweede vergelijking van beide methoden. Zoals je ziet treden de verschillen op bij achtergronden die helder rood zijn, helder groen, magenta, cyaan, helder blauw en wat donkerder rood en magenta.
| Kleur | 50% | YIQ | | | Kleur | 50% | YIQ | ||||
| #CCCCCC |  |
|
| | | |
#FFCC00 | |
|
||||
| #999999 | |
|
| | | |
#CCFF00 | |
|
||||
| #666666 |  |
|
| | | |
#00CCFF | |
|
||||
| #333333 | |
|
| | | |
#FF6600 | |
|
||||
| #FF0000 | |
|
| | | |
#FF0066 | |
|
||||
| #00FF00 | |
|
| | | |
#006666 | |
|
||||
| #0000FF | |
|
| | | |
#0099CC | |
|
||||
| #FFFF00 | |
|
| | | |
#666600 | |
|
||||
| #FF00FF | |
|
| | | |
#CC00CC | |
|
||||
| #00FFFF | |
|
| | | |
#CC6666 | |
|
||||
Als je een beetje met deze dingen wilt spelen, dan kan dat. Klik op de knop hier onder.
Opmerking:
Meer informatie over het gebruik van kleuren en kleur-contrasten vind je in het item
Over kleurgebruik op je website.
