Placeholder text: contrast, and why it is not a label

A placeholder is the hint text a browser shows inside an empty form field, set with the placeholder attribute. It carries two separate accessibility problems, and fixing one does not fix the other. The first is contrast: W3C's Understanding page for success criterion 1.4.3 says the requirement applies to text on the page "including placeholder text", so a placeholder is measured against the field's background like any other text. The second is purpose: a placeholder is gone the moment someone types, and W3C's forms tutorial says assistive technologies do not treat it as a label. Every field therefore needs a label of its own, visible by default, and the placeholder can add a short example on top.

Both problems are widespread. In WebAIM's February 2026 Million report, which ran the WAVE engine over one million home pages, low contrast text was the most common failure, on 83.9% of home pages, and missing form input labels came third, on 51%. Those counts are not limited to placeholders, but a placeholder is a place where both failures can meet.

This page is general information about WCAG, not legal advice.

What a placeholder is for

The HTML Standard defines the placeholder as a short hint, a word or short phrase such as a sample value or a brief description of the expected format, that helps with data entry while the control has no value. The same section says the attribute should not be used as an alternative to a label: a label's hint is shown at all times, while a placeholder's hint is shown before the user enters a value.

MDN adds that effective placeholder text is a word or short phrase that hints at the expected data type, not an explanation or a prompt. In an email field, name@example.com is a placeholder. "Enter the address we should send your receipt to" is a label or an instruction, and it does not belong in the placeholder.

Does placeholder text need 4.5:1 contrast?

Yes. Success criterion 1.4.3 Contrast (Minimum) asks for a contrast ratio of at least 4.5:1 for text, and 3:1 for large-scale text, which W3C defines as at least 18 point, or 14 point bold (roughly 24 and 18.5 CSS pixels). The Understanding page says the criterion applies to placeholder text and to text shown on hover or keyboard focus, and that when any of these are used the text needs sufficient contrast. Our 1.4.3 page and color contrast guide cover the criterion and sitewide contrast. Large text gets a lower bar, not an exemption: see the large text contrast exception.

None of the exceptions fits an ordinary placeholder. They cover inactive components, pure decoration, text no one can see, text in a picture with other significant visual content, and logotypes. W3C's example of an inactive component is a disabled control in HTML, so in our reading a disabled field's placeholder is exempt.

Measure it against the field's own background

W3C measures contrast against the specified background the text is rendered over in normal use. For a placeholder that is the field's fill, not the page behind it. This matters for the common pale gray field, where one placeholder color can pass on a white field and fail on a light gray one. W3C also lists as a failure (technique F24) specifying a text color without a background color, or the reverse, so set both.

Where placeholder colors go wrong

MDN's page on ::placeholder notes that in most browsers placeholder text is a translucent or light gray color by default, and W3C's forms tutorial reported that browsers usually drew it below the WCAG minimum, using a mix of color and opacity. Defaults change, so measure what your own pages paint. The table shows how quickly pale grays fail, with ratios from the same arithmetic as our contrast checker.

The ratios are truncated to two decimals, never rounded up, because W3C says computed values should not be rounded (4.499:1 does not meet 4.5:1). The #767676 on white pair is the one in W3C's sample style, which says it has just enough contrast on white. A fill as light as #f5f5f5 pushes the same gray under the line.

Opacity is the other usual cause. Black at 50% opacity on white paints as #808080, which is 3.94:1. W3C's sample style sets opacity: 1 beside the color, and its tutorial notes that browsers use a combination of color and opacity to make placeholder text lighter. Opacity on a parent element also fades the placeholder along with everything else inside it. Our text over images guide shows the same arithmetic for other text. If the site has a dark theme, measure the pair there too; see dark mode accessibility.

When a pale placeholder is deliberate

Designers make placeholders pale for a reason. The same MDN page says the lighter treatment signals a suggestion rather than entered data, and warns that a placeholder with strong contrast may be mistaken for entered input. It also notes that placeholder text looks the same as typed text in Windows High Contrast Mode. The contrast requirement stays, so the fixes sit in the design:

• Keep the placeholder at 4.5:1 and make typed text clearly darker. In our reading, a #767676 placeholder (4.54:1 on white) beside #1a1a1a typed text (17.40:1) is easy to tell apart.
• Move the hint out of the field. MDN's alternative is visible text near the input, linked with aria-describedby, so the hint stays while someone types.
• Never let the placeholder carry the field's name. If a filled-in field no longer says what it is for, it is missing a label.

Why a placeholder is not a label

A label is text tied to its field. A placeholder is only text inside it. The difference shows up in three ways:

• It disappears. W3C's forms tutorial says that placeholder text vanishes when users start typing, which makes it harder to check answers before submitting. MDN says the loss can confuse people with cognitive issues, and that a placeholder cannot be relied on as a label even by people who do not use assistive technology.
• Assistive technology does not treat it as a label. W3C says screen readers and other assistive technologies do not treat placeholder text as labels, and that support was limited at the time of writing. MDN says screen readers do not announce placeholder content by default, but do announce a label.
• It is not a bigger target. W3C's labeling tutorial notes that browsers give a label a larger clickable area, and MDN says clicking, touching or tapping a label moves focus to its control. A placeholder does neither.

What WCAG says about labels

Success criterion 3.3.2 Labels or Instructions (Level A) asks that labels or instructions are provided when content requires user input. Its text does not mention placeholders. The Understanding page does say that a control can have an accessible name, for example from aria-label, and so pass 4.1.2, yet still fail 3.3.2 if the labels or instructions are not presented to all users, not just those using assistive technology. In our reading, a field whose only label is a placeholder carries that risk, because the visible hint is gone once the field has a value. W3C's forms tutorial ties its form guidance to 1.3.1 Info and Relationships, 2.4.6 Headings and Labels, 3.3.2 and 4.1.2 Name, Role, Value.

A label is one of several ways to name a field, and they are not equivalent:

For the rest of a form, see accessible forms and accessible error messages.

How to fix a form that relies on placeholders

1. Add a visible label for every field. Tie it to the field with for and id:

   <label for="email">Email address</label>
   <input type="email" id="email" name="email">

2. Decide what the placeholder is for. Keep it to a short example, such as name@example.com, or remove it. A format people need while they type can go in the label, as in "Expiration date (MM/YYYY)", which W3C's forms tutorial calls reliable across browsers and assistive technologies. Longer instructions go in visible text linked with aria-describedby:

   <label for="expire">Expiration date</label>
   <span id="expire-hint">Format: MM/YYYY</span>
   <input type="text" id="expire" name="expire" aria-describedby="expire-hint">

3. Set the placeholder color, the opacity and the field background yourself. The standard ::placeholder pseudo-element styles the text. On a white field:

   input {
     background: #ffffff;
   }
   input::placeholder {
     color: #767676;
     opacity: 1;
   }

4. Keep the label visible. A floating label, which sits inside the empty field and moves above it once the field has focus or a value, is one option for a compact form. In our reading it works when it is built on a real label element, meets 4.5:1 in both positions and stays visible after typing. W3C allows hiding a label visually where the purpose is clear from context, such as a search box beside a Search button, and the label must stay in the code.

Check it yourself

Four checks take a few minutes on any form:

1. Type one character. Click into each empty field and type a letter. If you can no longer tell what the field is for, it depends on its placeholder and needs a label.
2. Click the label. Clicking a real label puts focus in its field. A label that does nothing is not tied to the field.
3. Measure the placeholder. Find the ::placeholder rule in your CSS, note its color and its own opacity, and read the field's background. Enter them in the color contrast checker: the placeholder color as the text color, the opacity if you use one, and the field fill as the background. Aim for 4.5:1, or 3:1 for large text. If the pair fails, the checker suggests the nearest color that passes. The checker does not account for opacity on a parent element, so if a parent fades the field, remove that fade and measure again.
4. Measure the field's edge. The Understanding page for 1.4.11 Non-text Contrast says that where a text input has a visual indicator that shows it is an input, such as a border, the indicator must reach 3:1 against the adjacent color. A text input with no border, set apart only by its background color, needs that background at 3:1 against the adjacent background. Enter the border color (or the fill) and the page color in the same checker and use its 3:1 target. Our 1.4.11 page has the detail.

The accessibility bookmarklet checks the page you have open in your browser, including staging and logged-in pages. It lists fields labeled only by their placeholder, but it does not measure placeholder text for contrast, so the manual pairs above still matter. Scan my site for free reports form fields that have no label element, aria-label, aria-labelledby or title on up to 3 pages, and a field whose only text is a placeholder is reported. The scan reads the HTML, so it cannot see a placeholder's color, and a field with only a title attribute is not reported, although W3C does not recommend relying on title. Why scanners miss issues explains the wider limit, and accessible brand color palettes covers choosing the grays themselves.

Keep it checked

A one-off review shows a form as it is on the day you look, and a redesign or a new form can bring back pale text or fields without labels. GotAlt checks the pages you monitor every week. It compares the alt text of up to six images per page with the image itself, runs its rule checks, opens monitored pages in a browser for contrast and other checks that need a rendered page (see what we check), and reports what changed. Plans are from $69 a month. Audit my whole site from $69/mo.