Forms are the most interaction-critical elements on any website. Users fill them out to sign up, check out, submit inquiries, and manage accounts. When form colors fail accessibility standards, users literally cannot complete the tasks your site exists to support.
Input Border Contrast
WCAG 2.1 requires 3:1 contrast for UI components against their background. That subtle light-gray border (#e5e5e5) on your input field against a white background? The ratio is about 1.3:1. It fails. Users with low vision cannot see where the input field begins and ends.
Fix: use a border color with at least 3:1 contrast against the background. On white, that means #949494 or darker. It does not have to be harsh. A medium gray border is both accessible and aesthetically clean.
Focus Indicators
When a user tabs to an input field, the focus indicator must be clearly visible. The default browser outline works, but many designers remove it for aesthetics. If you remove the default, you must replace it with a custom focus style that has at least 3:1 contrast against adjacent colors.
A common pattern: a 2 to 3px solid outline in your primary color with a slight offset. This is visible, branded, and accessible.
Error States
Error messages need three things: color, an icon, and text. Never rely on color alone (red border) because color-blind users may not perceive it. Always pair the red border with an error icon and descriptive text. The error text itself needs to meet standard contrast requirements against its background.
Planning Form Colors in Your Palette
When building your palette in PaletteRx, plan for form states explicitly. You need: a border color (3:1 against background), a focus color (typically your primary), an error red, a success green, and a disabled gray. Test each against your light base background in Step 3.