Placeholder Text needs Good Color Contrast
Does placeholder text in forms need to meet color contrast requirements? The short answer is: “Yes, it does!”
The long answer: Not all users have perfect vision with high contrast sensitivity. Especially when you get older, it gets harder to recognize text as being separate from the background behind it when color contrast is low. Therefore, you should always provide sufficient contrast between text and its background.
This also applies to placeholder text in web forms or documents. The placeholder usually provides a useful hint that describes the expected value of an input field. It isn't purely decorative. So, all users should be able to perceive the placeholder text.
Photo: © Egor Komarov / pexels.com
Requirements for minimum color contrast
The Success Criterion 1.4.3 Contrast (Minimum) of WCAG 2.2 defines requirements for minimum color contrast. Text must have a minimum contrast ratio of 4.5 to 1 with the background, or 3 to 1 contrast ratio if its large text. The understanding document explicitly states:
This Success Criterion applies to text in the page, including placeholder text and text that is shown when a pointer is hovering over an object or when an object has keyboard focus.
There's lots of tools you can use to check the contrast ratio of two color values. I mostly use the WebAIM Contrast Checker.
How to style placeholder text in web forms
In most browsers, the default appearance of placeholder text is a light gray color by default. UI libraries also sometimes use very light colors for placeholder text. This results in placeholder text with poor color contrast.
Use the ::placeholder CSS pseudo-element to define a text color with sufficient color contrast:
input::placeholder {
color: #5b5b5b;
}
You can also change the font style and weight of your placeholder text. Take a look at my demo where you can compare your browser's default styling with the applied custom styles:
A small change that highly improves the accessibility of your website. Sometimes it's that easy! 😊
Useful Resources
Posted on