WCAG-succescriterium 1.4.11 Contrast van niet-tekstuele content

Niveau AA

W3C referenties

• Engelse tekst van het WCAG-succescriterium: 1.4.11 Non-text Contrast.
• Nederlandse vertaling van het WCAG-succescriterium: 1.4.11 Contrast van niet-tekstuele content.
• Engelstalige informatie op How to Meet WCAG: Quick Reference 1.4.11 Non-text Contrast.
• Engelstalige toelichting: Understanding SC 1.4.11 Non-text Contrast.

Uitleg

Zorg voor voldoende kleurcontrast tussen de achtergrondkleur en de kleur van componenten die visueel betekenis hebben.

Bijvoorbeeld:

• Een icoon dat betekenis heeft, zoals de 3 streepjes voor een menu of een pijltje naar rechts voor de volgende pagina.
• Een icoon dat de status aangeeft van een bericht zoals een oranje driehoek voor een waarschuwing en een groen vinkje voor succes.
• Een rode rand die aangeeft dat een invoerveld fouten bevat (als aanvulling op de foutmelding in tekst).

Het gemeten kleurcontrast tussen het element en de achtergrond moet minstens 3:1 zijn.

Er is een uitzondering voor inactieve componenten, zoals uitgeschakelde buttons, invoervelden, aankruisvakjes en keuzerondjes. En voor het kleurcontrast voor componenten die door de browser worden bepaald en niet niet kunnen worden veranderd.

Opgelet

Deze inhoud wordt binnenkort aangevuld met uitgebreidere uitleg, bronnen en informatie over hoe te testen.

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

Aanvullingen of opmerkingen?

Deze pagina's over WCAG worden onderhouden door het NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.