“Voer hier je e-mailadres in”
Dat staat er. In het invoerveld. In #C0C0C0 op wit. Contrast: 1,6:1.
Je moet er bijna tegenaan plakken om het te lezen. En dit is niet de uitzondering, dit is de standaard browserstyling van placeholders.
Het wordt pas echt problematisch als je placeholder de enige plek is waar het invoerformaat staat. “DD-MM-JJJJ”. Of “Bijv. 1234 AB”. Als iemand dat niet kan lezen, vult diegene het verkeerd in. En krijgt een foutmelding. Die misschien ook slecht contrasteert. Maar dat is een andere post.
De fix:
/* Niet doen: contrast 1,6:1 */
::placeholder { color: #C0C0C0; }
/* Wel doen: contrast 4,64:1 */
::placeholder { color: #767676; }
Maar eigenlijk: gebruik geen placeholder als je enige manier om informatie te tonen. Placeholders verdwijnen zodra je begint met typen. Zet het formaat in een hint-tekst onder het veld. Die blijft altijd zichtbaar.
En ja, #767676 ziet er “donkerder” uit dan je gewend bent bij placeholders. Dat is precies het punt. Wat je gewend bent, is te licht.
