Customers say the hint text inside my order form fields is faded and hard to read. How do I pick a better colour for it?

Why hint text comes out faded in the first place

Placeholder text is the grey wording inside a field, like '05xxxxxxxx' in the mobile field or 'District' in the address field. Designers make it pale on purpose so nobody mistakes it for a value already filled in. The result is that someone filling the form on a phone in daylight, or with slightly weaker eyesight, cannot read the hint that was put there to help them.

When customers complain about it, they have a point. A quick check settles it with a number instead of a debate about taste.

The check, step by step

1. Get the placeholder colour from your theme settings, or from a screenshot of the form with the Image color picker.
2. Get the colour of the field itself, not the page. Many themes fill fields with a very light grey.
3. Open the Color contrast checker and type the first in 'Text color' and the second in 'Background color'.
4. Read 'AA normal text (needs 4.5:1)'. Hints are usually small, so do not count on the large text limit.

Figures from a typical form

• #A9A9A9 on a white #FFFFFF field: 2.35:1, failing every check.
• #A9A9A9 on a light grey #F5F5F5 field: 2.16:1, even worse.
• #757575 on a white field: 4.61:1, a pass for AA normal text.
• The same #757575 on a #F5F5F5 field: 4.23:1, a fail. This is where the field colour shows its effect.

To jump straight to the right colour, choose the 4.5:1 target in the suggestions section. On a white field, 'Nearest darker color' suggests #767676 at 4.54:1. On a #F5F5F5 field it suggests #707070 at 4.54:1. Press 'Use this color' and look at the live sample.

But how will customers tell it from what they type?

That is the real worry behind keeping hints pale. The answer is not to leave them unreadable but one of these:

• Move instructions outside the field into a visible label above it, and keep only a short example inside. The placeholder vanishes as soon as the customer starts typing anyway.
• Make the customer's own text clearly darker, such as black, and the hint a passing grey such as #767676, so the difference stays visible.
• Never put essential information only in the placeholder, such as the required phone format; write it in the label or under the field.

Remember that the tool checks the two colours only. The small font size of hints, often 13 or 14 px, makes extra margin worthwhile. And passing the ratio does not mean the whole form is accessible.