◐

Developer guide

Placeholder Text Contrast Guide

Avoid low-contrast placeholder text that makes form fields difficult to read.

Short answer

Placeholder text is often too faint to be useful. Treat it as supporting information, not as the only label for a required field.

When this applies

If placeholder text conveys useful information, users still need to be able to read it against the input surface. A visible label remains the safer pattern.

Practical review steps

  1. Keep a persistent field label outside the placeholder.
  2. Check placeholder text against the input background.
  3. Test empty, focused, filled, error, and disabled input states.

Check the actual color pair

Use the free Contrast Check with the foreground and background colors from the real component. It provides an immediate AA and AAA ratio check in the current browser tab.

Source and limit

For the formal requirement, review W3C's WCAG contrast minimum guidance. A ratio result checks a color pair; it is not a complete accessibility audit.