A form error should not feel like a puzzle. If the only signal is a thin red border, plenty of users will miss it: color blind users, keyboard users moving fast, mobile users in sunlight, and anyone trying to finish checkout before a meeting. [💬]
Good validation color is not just red for wrong and green for right. It is contrast, placement, copy, icons, focus states, and recovery. The user should know what failed, where it failed, and what to do next without guessing.
Stripe-style checkout forms do not depend on red alone. The error text appears directly under the field, the border changes, the icon changes, and the message says what to fix. The color supports the message. It does not carry the whole job.
Government and healthcare forms often fail because validation appears only after submit and only at the top of the page. Users then have to hunt for the bad field. A better pattern is summary plus inline error: one message at the top, one message beside each field.
Password forms are where green can mislead people. A green check beside every rule looks nice, but if the final submit button still fails, users stop trusting the interface. Show validation states only when they are true, and keep helper text visible until the user succeeds.
Stripe-style checkout forms do not depend on red alone. The error text appears directly under the field, the border changes, the icon changes, and the message says what to fix. The color supports the message. It does not carry the whole job.
Government and healthcare forms often fail because validation appears only after submit and only at the top of the page. Users then have to hunt for the bad field. A better pattern is summary plus inline error: one message at the top, one message beside each field.
Password forms are where green can mislead people. A green check beside every rule looks nice, but if the final submit button still fails, users stop trusting the interface. Show validation states only when they are true, and keep helper text visible until the user succeeds.
Stripe-style checkout forms do not depend on red alone. The error text appears directly under the field, the border changes, the icon changes, and the message says what to fix. The color supports the message. It does not carry the whole job.
Government and healthcare forms often fail because validation appears only after submit and only at the top of the page. Users then have to hunt for the bad field. A better pattern is summary plus inline error: one message at the top, one message beside each field.
Password forms are where green can mislead people. A green check beside every rule looks nice, but if the final submit button still fails, users stop trusting the interface. Show validation states only when they are true, and keep helper text visible until the user succeeds.
:root {
--field-border: #94a3b8;
--field-focus: #2563eb;
--field-error: #b91c1c;
--field-error-bg: #fef2f2;
--field-success: #047857;
--field-success-bg: #ecfdf5;
}
.field[aria-invalid="true"] {
border-color: var(--field-error);
background: var(--field-error-bg);
}
.error-message {
color: var(--field-error);
font-weight: 600;
}Copy and paste into your project — free to use.
Use these free tools to apply what you learned: