Met de instelling Primaire 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.
Je vindt deze instelling in Mijn Tolkie. Ben je nog niet ingelogd? Ga naar mijn.tolkie.nl, open de instellingen voor jouw website en kies dan voor Instellingen → Weergave → Stijl.
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.
Mijn Tolkie controleert dit automatisch voor je. Naast het kleurveld zie je direct of het contrast voldoende is — bijvoorbeeld Contrast in orde (5,67:1).
💡 Tip: de HEX-code voor wit is #FFFFFF. Gebruik eventueel ook een contrast checker om je kleur te testen.
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 Primaire kleur om de Tolkie-knoppen een toegankelijke, contrastrijke en goed zichtbare kleur te geven. Mijn Tolkie controleert het contrast automatisch — kies altijd een tint die past bij je huisstijl én voldoende opvalt.