Forms are conversion-critical interfaces. Login forms, registration forms, checkout forms, contact forms: each is a moment where the user commits time and data. Color treatment directly affects whether the form feels trustworthy, easy to complete, and error-forgiving.
Input Borders
Input borders must be visible. WCAG SC 1.4.11 requires 3:1 contrast for UI components against adjacent colors. A common failure: light gray borders (#e5e5e5) on white backgrounds (1.3:1 ratio, fails). Use at least #949494 against white for compliant borders. PaletteRx's contrast grid helps you verify your border color against your background.
Focus Indicators
When a user tabs to or clicks into an input, the focus state must be clearly visible. WCAG 2.2 requires focus indicators with 3:1 contrast. A common approach: a 2-3px outline or border in your primary color. The focus indicator should be distinct from both the default border and any validation states.
Validation Colors
Error states use red (border, icon, message text). Success states use green. Warning states use amber. Each must include non-color indicators (icons and text messages) alongside the color change. The validation color should apply to the input border, the icon, and the message text simultaneously for clear communication.
Labels and Placeholders
Labels should use your standard body text color (dark base) for maximum readability. Placeholder text should be a lighter tone (muted gray) that is clearly different from entered text. Do not rely on placeholder text as labels. Placeholders disappear when the user types, removing the context.
Disabled and Read-Only
Disabled inputs use reduced opacity (40 to 50%) of their normal border and text colors. They should look inactive but still visible. Read-only inputs look similar to default state but without hover/focus effects, often with a slightly different background tint to distinguish from editable inputs.