Accessibility 3 min read

Color Contrast in Web Forms: Labels, Errors, and Focus

Review the color decisions in form labels, hints, errors, borders, and focus indicators without relying on color alone.

Forms put several kinds of content close together: labels, instructions, entered values, validation messages, field borders, and focus indicators. Reviewing only the label color misses much of what users need to complete the form.

Keep labels and instructions readable

Use a visible label that remains available after a person starts typing. Placeholder text can show an example, but it should not be the only label or instruction. Check the contrast of labels, help text, and entered values against the actual field surface.

Make errors clear without relying on red

Pair a color change with text that explains the error and how to correct it. If an icon is used, give it an accessible name or provide the meaning in adjacent text. Ensure the message is programmatically associated with the field in the finished application.

Review focus and field boundaries

Keyboard users need a visible focus indicator. Check that it is not clipped, hidden by another element, or indistinguishable from the surrounding surface. Field borders and state graphics may also need sufficient non-text contrast; that is separate from text contrast.

Test the real component

Check the default, filled, invalid, disabled, and focused states. A color calculator can test individual pairs, while keyboard testing and assistive technology checks are needed to review the full interaction. See WCAG guidance on labels and instructions and use the contrast checker for color pairs.

#form accessibility#contrast#focus indicators#WCAG