Kleurcontrast van niet-tekstuele content met de achtergrond

Heb je content op je pagina zonder tekst? Bijvoorbeeld grafieken, iconen of een tekstveld in een formulier? Dan is het belangrijk dat je voldoet aan de eisen voor het kleurcontrast voor niet-tekstuele content. Deze content laat niet alleen informatie zien in de vorm van tekst, maar ook op andere manieren.

Mensen die kleuren minder goed zien, moeten niet-tekstuele inhoud ook kunnen gebruiken.

Eisen vanuit WCAG

Niet-tekstuele content moet een kleurcontrast hebben van minimaal 3,0:1 ten opzichte van de achtergrond.

Officiële informatie

Succescriterium 1.4.11 Contrast van niet-tekstuele content

Uitzonderingen

Inactieve elementen, bijvoorbeeld knoppen, en logo’s hoeven niet te voldoen aan de eisen voor kleurcontrast.

Voorbeelden van niet-tekstuele content

  • Grafieken en diagrammen
  • Infographics
  • Radio buttons
  • Informatieve iconen
    • Social media
    • Vergrootglas of waarschuwing
    • Uitklapindicator
    • Bedieningspijltjes
  • Formulierelementen, bijvoorbeeld tekstvelden en selectievakjes.
  • Focusindicator
  • Statusindicator, bijvoorbeeld een streep onder een actieve link.

Test het zelf

Eightshapes – Contrast Grid (Engelstalig) voor het maken van een contrastgrid.

Test het contrast met een contrastchecker:

Simuleer kleurenblindheid:

Meer informatie voor apps

Appt – Meer informatie over contrast van niet-tekstuele content voor apps

Deze tekst is een vereenvoudigde versie van de eisen uit WCAG. Hieraan kunnen geen rechten worden ontleend. Voor de volledige eisen, raadpleeg de officiële norm Opent in nieuw tabblad.
Heb je gevonden wat je zocht?

Fijn dat je het antwoord op je vraag hebt kunnen vinden. Heb je een idee over hoe we onze kennisbank kunnen verbeteren?

Informatie over de verwerking van uw persoonsgegevens

Wij gebruiken jouw e-mailadres om je vraag te beantwoorden, waarna het vernietigd wordt. Jouw informatie wordt niet met derden gedeeld. Wij beantwoorden je verzoek zo snel mogelijk. Lees ook onze privacyverklaring.

Akkoordverklaring (verplicht)



Waar was je naar op zoek?

Informatie over de verwerking van uw persoonsgegevens

Wij gebruiken jouw e-mailadres om je vraag te beantwoorden, waarna het vernietigd wordt. Jouw informatie wordt niet met derden gedeeld. Wij beantwoorden je verzoek zo snel mogelijk. Lees ook onze privacyverklaring.

Akkoordverklaring (verplicht)