Styling CSS Link and Placeholder Colors Accessibly

Links need to be recognizable without relying on color alone. Underlines are the simplest durable cue, while hover and focus styles should reinforce rather than replace that distinction.

a { color: #1d4ed8; text-decoration: underline; }
a:hover { color: #1e40af; }
a:focus-visible { outline: 3px solid #93c5fd; outline-offset: 3px; }
a:visited { color: #6b21a8; }

The blue shade collection offers a useful starting scale. Check each state against its real surface in the contrast checker, including focus indicators.

Placeholder text is not a label

A placeholder is a short example or hint. It disappears when the user types, so it must never replace a persistent <label>.

input::placeholder {
  color: #6b7280;
  opacity: 1;
}

Some browsers historically reduce placeholder opacity. Setting opacity: 1 makes the chosen value predictable. A placeholder still needs enough contrast to be read, but it should remain visually secondary to entered text. Compare candidates from the gray color scale.

If a design token arrives without a familiar name, use the color name finder to locate nearby CSS and traditional Chinese names. Names help discussion, but code should keep the exact value.

Review the broader principles in setting HTML and CSS text color.