Met de instelling ‘Kleur’ bepaal je de kleur van de Tolkie-knoppen op je website.
Vul hier de HEX-code in van de kleur die je wilt gebruiken.
Het is belangrijk dat de gekozen kleur:
past bij de rest van je website,
voldoende contrast heeft met de achtergrond, zodat de tekst goed leesbaar blijft.
Voor toegankelijkheid moet de kleur minimaal een contrastverhouding van 4.5:1 hebben ten opzichte van een witte achtergrond.
Je kunt dit eenvoudig controleren met een online Contrast Checker.
Deze instelling vind je in Mijn Tolkie.
Ben je nog niet ingelogd? Ga naar mijn.tolkie.nl, open de instellingen voor jouw website en kies dan voor Algemene instellingen en het tabblad Styling.
Waar moet ik op letten bij het instellen van een kleur?
Kies een toegankelijke en contrastrijke kleur.
Volgens de WCAG-richtlijnen moet het contrast tussen de knopkleur en de tekst op de knop minimaal 4.5:1 zijn.
💡 Tip: de HEX-code voor wit is #FFFFFF.
Gebruik bijvoorbeeld een contrast checker om te testen of jouw kleur voldoet aan deze eis.
Er bestaan verschillende gratis tools waarmee je eenvoudig de contrastverhouding kunt berekenen.
Voorbeeld van een te laag contrast: licht groen
De groene kleur uit de Tolkie-huisstijl heeft de HEX-code #57cd9c.
Deze kleur heeft een contrastverhouding van slechts 1:97:1 — dat is te laag volgens de WCAG-richtlijnen.
Dat zie je ook met het blote oog.
Voorbeeld van een goed contrast: donkerblauw
De donkerblauwe kleur uit de Tolkie-huisstijl (#123686) heeft een contrastverhouding van 11.06:1 — ruim voldoende.
Dankzij dit hoge contrast blijven de knoppen goed zichtbaar, ook voor gebruikers met een visuele beperking.
Kies voor een opvallende kleur
Naast toegankelijkheid is het ook belangrijk dat de kleur van de knoppen voldoende opvalt ten opzichte van de rest van de pagina.
Een klant koos er bijvoorbeeld voor om de Tolkie-knoppen lichtblauw te maken.
De kleur voldeed met een contrastverhouding van 8.13:1 ruimschoots aan de toegankelijkheidseisen, maar leek sterk op de andere blauwe knoppen op de website.
Daardoor viel de Tolkie-knop nauwelijks op.
De oplossing: kies een donkerdere kleur uit de huisstijl die nog steeds voldoet aan de contrastnormen, maar beter afsteekt tegen andere elementen.
Zo zorg je ervoor dat de Tolkie-knoppen toegankelijk én herkenbaar zijn.
Kort samengevat:
Gebruik de instelling Kleur om de Tolkie-knoppen een toegankelijke, contrastrijke en goed zichtbare kleur te geven.
Controleer altijd het contrast met een witte achtergrond en kies een tint die past bij je huisstijl, maar wel voldoende opvalt.