Iconen - kleur

In onze leeromgevingen maken we gebruik van specifieke kleurrichtlijnen om de toegankelijkheid van iconen te waarborgen. De standaardkleuren voor iconen zijn als volgt:

• Gewone iconen:
  Gebruik de kleur cds-sys-color-on-surface-variant.
• Geaccentueerde iconen (bijvoorbeeld actieve menu-items):
  Gebruik de kleur cds-sys-color-on-surface.

Beide kleuren leveren een contrast van minimaal 3:1, wat essentieel is voor de leesbaarheid en toegankelijkheid van iconen.

Daarnaast moeten iconen altijd meekleuren met het element waarin ze zich bevinden. Zo krijgen in een primary gekleur element zowel het label als het icoon de kleur on-primary. Deze combinatie van kleuren is noodzakelijk om een voldoende contrast te garanderen.

Iconen kunnen in uitzonderlijke gevallen ook de kleur ai krijgen, maar dit is uitsluitend toegestaan op een surface-achtergrond of afgeleiden daarvan (zoals surface-container, surface-container-lowest, etc.). In alle andere gevallen kleuren iconen mee met het element waarin zij geplaatst zijn.

Voor meer informatie over contrast en toegankelijkheid verwijzen we naar de volgende WCAG richtlijnen:

• 1.4.1 Gebruik van kleur
• 1.4.3 Contrast (minimum)
• 1.4.11 Contrast van niet-tekstuele content

Daarnaast vindt u meer gedetailleerde richtlijnen over kleurgebruik en contrast op de pagina’s:

• Stijl/Kleur/Contrast
• Stijl/Kleur/Non-Text-Contrast