Using Red in Interfaces: Meaning, Roles and Contrast
Keep error and destructive-action meanings explicit, and test red as text and as a surface with concrete examples.
Updated : Rebuilt around explicit design choices, reproducible examples and documented limitations; retained the existing URL.
Red can be a decorative brand accent, an error cue or a destructive-action surface. Decide which role it has in your interface before choosing its text partner. Do not rely on a universal claim that red means danger, luck or urgency to every reader.
Separate association from product behavior
Cross-national color-emotion research reports both common associations and contextual variation. It does not establish that a red purchase button increases conversion or that a single cultural meaning applies to every participant. Treat audience interpretation as something to investigate with the actual words and task.
Test red as text
A reproducible text and background example.
Same pair, larger text.
##FF0000 / ##FFFFFF
Pure red on white: inspect its normal-text result.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixA reproducible text and background example.
Same pair, larger text.
##B91C1C / ##FFFFFF
Darker red candidate for an error message.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fixFor an email error, use the darker candidate with a message such as "Enter an email address with an @ sign." Associate it with the field and include a visible error cue. A red outline alone requires the user to infer what went wrong.
Test red as a button background
A reproducible text and background example.
Same pair, larger text.
##FFFFFF / ##B91C1C
White label on the darker red action surface.
1.000000:1 WCAG contrast; 0.0000 Lc APCA.
Normal-text AA: Fail. Large-text AA: Fail. Labels apply to text contrast only.
Reproduce this pair and try a fix.delete-button { color: #FFFFFF; background: #B91C1C; }
.delete-button:hover { background: #991B1B; }Use an explicit label such as "Delete draft" and review hover and focus separately. Color does not replace a reversible workflow or an appropriate confirmation for destructive work. Avoid applying red to unrelated decorative elements next to the action when that makes its role ambiguous.
Document your convention
Open the red role palette in Studio. Record where each red is allowed and which label or icon accompanies it. Keep the convention consistent and test it with the audience who will use the interface.