Is Red Okay for Required Fields? How to Communicate Requirements Clearly in Web Forms

Using red for required fields in a web form is not a problem by itself. The important point is not to make “red means required” the only way users can understand the field status. Required and optional fields should also be identified in text, with red used only as supporting emphasis. This is especially important when the same form also uses red for validation errors.

Red can work, but keep a visible “Required” label

A clear approach is to place the word “Required” near the field label. In HTML, the required attribute can also programmatically mark a control as required. W3C’s forms guidance recommends clearly identifying required input in labels and making the instructions needed to complete the form available to users.

WCAG (Web Content Accessibility Guidelines) 2.2 requires that color not be the only visual means of conveying information. For that reason, a red asterisk (*) alone is less explicit than visible wording such as “Required.” If an asterisk is used, explain what the symbol means at the beginning of the form or in another clearly available place.

Choose between a red required label and a neutral required label

In the following HEX examples, where HEX is a hexadecimal color code used on the web, dark red ■#B42318 for the word “Required” against white ■#FFFFFF provides a contrast ratio, the difference in relative luminance between foreground and background, of about 6.57:1. That is sufficient contrast for normal-size text.

If validation errors also use red, a strong red required label can make the two roles look similar. In that case, a neutral badge can work instead: light blue-gray ■#F1F5F9 with dark blue-gray ■#334155 text provides about 9.45:1 contrast. Because the word “Required” carries the meaning, the label does not need to be red.

For the input itself, dark blue-gray ■#334155 text against white ■#FFFFFF provides about 10.35:1 contrast. If the field boundary is necessary to identify the control, a slate gray ■#64748B border against white provides about 4.76:1. Required-field styling should not become so visually strong that it makes the actual input harder to find.

Separate required status from error status with wording as well as color

For errors, pale red ■#FEF2F2 with dark red ■#B42318 text provides about 6.01:1 contrast. Do not use a red border or background as the only error cue. Show a message such as “Enter your email address” or “Check the format” so users know what needs to be fixed. W3C’s input-validation guidance also emphasizes notifying users of errors in a way they can understand.

WCAG 2.2 requires at least 4.5:1 contrast for normal-size text and at least 3:1 for large text. Visual information needed to identify form controls or their states also requires at least 3:1 contrast against adjacent colors. Distinguish required, optional, and error states with a combination of text, symbols, color, and form structure.

In HueRoll, you can adjust candidate colors with three- or six-digit HEX values or the color picker, then compare the selected color with white and black. HueRoll does not compare arbitrary custom color pairs or automatically determine WCAG AA or AAA conformance, so verify the actual adjacent combinations used for required labels, fields, and error messages separately.