Zorg voor een goed kleurcontrast van de placeholdertekst

Kleurcontrast voor tekst ten opzichte van de achtergrond moet voldoen aan WCAG, dit geldt ook voor placeholders.

Sommige browsers zoals Firefox maken placeholdertekst standaard doorzichtiger. Voeg daarom in de CSS opacity: 1 toe voor de placeholder.

::placeholder {
    opacity: 1;
    color: #757575;
}

Zie ::placeholder - CSS: Cascading Style Sheets, op MDN.

Tip: De lichtste kleur grijs die je kunt gebruiken ten opzichte van een witte achtergrond is #757575 of rgb( 117, 117, 117).

Voldoende kleurcontrast tussen placeholder en achtergrond is nodig om te voldoen aan het WCAG-succescriterium 1.4.3 Contrast (minimum) (niveau AA).

Doen

De placeholder opacity: 1 meegeven in de CSS.

Welk auto rij je?

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? Deel je mening op GitHub met je suggesties.