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.
<label for="auto">Welk auto rij je?</label><input class="nlds-opacity" id="auto" name="merk" type="text" placeholder="Vul een merknaam in"/>
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.