Bij het instellen van een kleur moet je goed letten op de WCAG-richtlijnen voor contrast. Sommige kleuren hebben een hoog contrast met witte letters. Andere kleuren hebben een laag contrast.

Volgens de WCAG-richtlijnen moet je een kleurencombinatie kiezen die minimaal een contrast ratio heeft van 4.5:1. Je kunt een eenvoudige contrast-checker gebruiken om de contrast ratio zelf te controleren.

Tip: de HEX-code voor wit is #FFFFFF

De oranje kleur uit het logo en de huisstijl van Tolkie heeft de volgende HEX-code: #fa8e54. Die kleur heeft een contrast-ratio van 2.31:1. Dat is veel te laag. Dat kun je met het blote oog ook goed zien: vooral de ingedrukte knop is veel te licht.

De donkerblauwe kleur uit het logo en de huisstijl van Tolkie heeft de volgende HEX-code: #101237. Die kleur heeft een gigantische contrastratio van maar liefst 18.04:1. Dat is ruim voldoende. Door te kiezen voor een hoog contrast zijn de knoppen ook zichtbaar voor slechtziende gebruikers.

Het is ook verstandig om rekening te houden met hoe opvallend de kleur van de knoppen is. Neem bijvoorbeeld dit voorbeeld. Op de onderstaande afbeelding heeft de klant ervoor gekozen om de Tolkie-knoppen blauw te maken. Niet de standaard blauwe kleur, want die voldoet niet aan de contrast-ratio. In plaats daarvan kiest de klant voor een wat donkerdere kleur uit de huisstijl.

Goed, toch? In principe wel. De kleur voldoet met een contrast ratio van 8.13:1 namelijk ruimschoots aan de WCAG-richtlijnen. Maar de kleur lijkt wel erg veel op de andere, lichtere blauwe kleur uit de huisstijl. De knop valt niet echt op.

De klant kan daarom beter kiezen voor hun donkerblauwe kleur; een account kleur uit hun huisstijl handboek. Deze kleur voldoet ook aan de WCAG-richtlijnen en valt meer op bij de blauwe knoppen, omdat het een compleet andere kleur is. Zo slaat de klant 2 vliegen in 1 klap.

Neem dan contact met ons op.