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).
Voorbeelden
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"/>
Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
Over deze richtlijnen
Deze richtlijnen worden onderhouden door 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.