Geef tekst voldoende kleurcontrast

Gebruikers moeten goed kunnen lezer wat ze moeten invullen of waaruit ze kunnen kiezen.

Het kleurcontrast van de tekst van labels en descriptions ten opzichte van de achtergrondkleur moet daarom 4,5:1 of hoger zijn.

Voldoende kleurcontrast van tekst is nodig om te voldoen aan het WCAG-succescriterium 1.4.3 Contrast (minimum) (niveau AA).

Doen

Maak het label goed leesbaar door voldoende contrast.

Dit voorbeeld heeft een contrast van 5.54:1.

Uw naam

<label for="naam1">Uw naam</label><input type="text" id="naam1" autoComplete="name"/>

Niet doen

Maak het label slecht leesbaar door onvoldoende contrast.

Dit voorbeeld heeft een contrast van 2.62:1.

Uw naam

<label for="naam2">Uw naam</label><input type="text" id="naam2" autoComplete="name"/>

Over deze richtlijnen

Deze richtlijnen worden onderhouden door het NL Design System en zijn op dit moment in beta.

We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.