How Should You Choose Placeholder Text Color? Form Design That Keeps It from Being Too Faint

Placeholder text is the short hint shown inside an empty form field, such as “e.g. name@example.com.” Because it is supporting information, it is often styled lighter than entered text, but making it too faint can make it hard to read. A practical approach is to give placeholder text slightly less visual weight than entered text while still maintaining enough contrast with the field background. It should also remain a hint rather than a replacement for the field label or important instructions.

Check placeholder text with the normal text contrast requirement

WCAG (Web Content Accessibility Guidelines) 2.2 text-contrast requirements apply to placeholder text as well. Normal-size text needs at least a 4.5:1 contrast ratio, meaning the difference in relative luminance between the foreground and background, while large text needs at least 3:1.

For example, slate gray ■#64748B placeholder text on a white ■#FFFFFF input field provides about 4.76:1 contrast. If entered text uses dark blue-gray ■#334155, its contrast against white is about 10.35:1. This keeps the placeholder visually lighter than entered text without dropping below the normal-text target.

By comparison, a paler blue-gray ■#94A3B8 against white ■#FFFFFF provides only about 2.56:1 contrast. That is not enough for normal-size placeholder text. Do not make the text faint simply because it is a placeholder; judge it against the actual field background.

Check browser opacity as well as the color value

The CSS ::placeholder pseudo-element targets only placeholder text. W3C’s Forms Tutorial notes that browsers may display placeholder text with low contrast and may use a combination of color and opacity to make it appear lighter. For that reason, check the rendered result rather than looking only at the color code.

For example, even if the placeholder color is set to ■#64748B, additional opacity can make the displayed result lighter than intended. If you want the specified color to be used without extra transparency, one approach is to set opacity: 1 on ::placeholder. On a light gray ■#F8FAFC field background, ■#64748B provides about 4.55:1 contrast, only slightly above the 4.5:1 target for normal-size text.

Because changing the field background changes the ratio, do not reuse a placeholder color that was checked on white without recalculating it for the actual background.

Use placeholders for short examples, not as replacements for labels or instructions

MDN and W3C form guidance recommend using placeholder text for short hints or examples rather than as a replacement for a <label>. Placeholder text disappears after the user begins typing, so it should not carry the field name, such as “Email address” or “Phone number,” or any instruction that needs to remain visible.

If users need format guidance, keep the label or instruction visible near the field. For example, use “Phone number” as the label and “e.g. 09012345678” as the placeholder. If a focused field uses a blue ■#2563EB ring against white ■#FFFFFF, that pair provides about 5.17:1 contrast. Treat placeholder text, labels, and focus indicators as separate visual roles.

In HueRoll, you can adjust candidate colors with three- or six-digit HEX values or the color picker, then compare the selected color with white and black. HueRoll does not compare arbitrary custom color pairs or automatically determine WCAG AA or AAA conformance, so verify the actual combination of placeholder text and field background separately.