สีในการออกแบบฟอร์ม: การตรวจสอบ โฟกัส และสถานะข้อผิดพลาด

Forms are the most interactive surfaces in any digital product. They are where users create accounts, complete purchases, submit requests, and configure preferences. Yet form design is also where color is most often misused — applied inconsistently, failing accessibility requirements, or conveying state through color alone in ways that exclude users with color vision deficiencies.

The challenge with form color design is that it must communicate multiple simultaneous states — default, focused, filled, invalid, valid, and disabled — across inputs, labels, buttons, and helper text, while remaining accessible and visually cohesive. This guide covers the complete color vocabulary of form design.

Input Border Colors and States

The border of a text input is the primary visual signal for its current state. Every state needs a distinct, unambiguous color treatment that communicates meaning without relying on any other cue.

The Five Core Input States

Default state is the resting appearance of an unfocused, empty input. The border should be clearly visible but recessive — it should not compete for attention with the content around it. A medium-light gray like #D1D5DB or #CBD5E1 works well against a white background. The contrast of the border itself against the background matters less for readability (the border is decorative rather than text), but it must be distinguishable.

Hover state provides a subtle affordance signal before the user commits to interaction. A slight darkening of the border — from #D1D5DB to #9CA3AF — is sufficient. This micro-state tells users "this is interactive" without the full visual weight of the focus state.

Focused state is the most critical state and the most frequently under-designed. When a user's cursor or keyboard focus is on an input, the border should clearly indicate active engagement. A solid brand color — blues like #3B82F6 or #2563EB are common — applied at full opacity at 2px width is the standard approach. The transition from gray to blue is a strong, readable signal.

Filled state (focused with content) typically uses the same border color as the focused state. Some design systems differentiate it with a slightly darker border or a small indicator icon to acknowledge that content exists.

Disabled state uses significantly reduced visual weight. A background of #F9FAFB and a border of #E5E7EB signal that the field is not currently interactive. Disabled input text should be approximately #9CA3AF — light enough to suggest inactivity, but still readable.

Border Width and Visual Weight

Default borders at 1px are common, but 2px focus borders provide clearer state differentiation, particularly for users in bright environments or on lower-resolution displays. Many design systems use 1px default and 2px focus as the standard pairing.

Use the contrast checker to verify that filled input text (#111827 or similar) maintains at least 4.5:1 contrast against the input background in all states.

Focus Ring Color and Visibility

The focus ring — also called the focus indicator or focus outline — is among the most accessibility-critical elements in any interface. It is the primary mechanism by which keyboard users track their position in the document. WCAG 2.2 Success Criterion 2.4.11 (Focus Appearance) requires that focus indicators meet specific minimum size and contrast requirements.

What Makes a Focus Ring Effective

Size: The focus indicator must have a minimum perimeter area of 2 CSS pixels. A simple 2px solid border or 3px offset outline both satisfy this requirement.

Contrast: The focus ring must have a contrast ratio of at least 3:1 between the focused and unfocused states of the component. Additionally, the focus indicator itself should contrast at least 3:1 against adjacent colors.

Visibility against any background: Because focus can land on elements against a variety of background colors — white forms, colored sections, image backgrounds — using a dual-ring approach handles all contexts. A white inner ring (#FFFFFF) plus a colored outer ring ensures visibility against both light and dark backgrounds:

:focus-visible {
  outline: 3px solid #2563EB;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #FFFFFF;
}

The white box-shadow creates a white halo between the element and the blue outline, guaranteeing that the blue outline is always visible regardless of the background color beneath it.

Choosing Focus Ring Color

The focus ring color is typically the brand's primary interactive color — the same blue used for links, active states, and primary buttons. This consistency helps users understand that the ring signals "this is where interaction is happening" rather than "this has an error" or "this has been completed."

If your brand primary is a dark color like #1E3A5F, it may not provide sufficient contrast as a focus ring on dark backgrounds. In those cases, a lighter, more saturated variant from the shade generator is appropriate for focus-specific use.

Never remove focus rings entirely. The outline: none anti-pattern eliminates an essential accessibility feature. If the default browser focus ring is visually incompatible with your design, replace it with a custom focus style — do not simply hide it.

Error Red vs Success Green: Semantic Color Values

Error and success states are the most consequential color decisions in form design. They communicate whether user input is acceptable, which directly affects whether users can complete their goal.

Error State Colors

The conventional error color is red, and conventions exist for good reasons: red as "stop/danger" is cross-culturally understood and deeply reinforced through traffic signals, warning labels, and decades of software interfaces. However, the specific shade of red matters significantly.

Primary error color for form borders and icons: #DC2626 (a mid-red with good contrast) or #EF4444 (slightly more saturated). Avoid very dark reds like #7F1D1D (too close to maroon, reduced readability) and very bright reds like #FF0000 (aggressive, fails design system coherence).

Error background tint: A very light red tint applied to the input background reinforces the error state beyond the border alone. #FEF2F2 is the standard light red background used in Tailwind's red-50, providing a perceptible but non-aggressive error surface.

Error text (helper text): Red helper text below the input should be the same red used for the border — #DC2626 or #B91C1C — at the same size as regular helper text. If the error message is rendered at small size (below 18px), it requires 4.5:1 contrast against the white background. Check #DC2626 against #FFFFFF in the contrast checker — it achieves approximately 5.7:1, meeting AA.

Success State Colors

Success green communicates that input has been validated and accepted. The standard success color family:

Success border: #16A34A (Tailwind green-600) or #22C55E (green-500). Green-600 provides better contrast against white backgrounds, making it preferable for borders and icons.

Success background tint: #F0FDF4 (green-50) — just enough tint to signal success without overwhelming the form.

Success icon: A checkmark icon in #16A34A is the standard success affordance. Position it at the trailing edge of the input (right side for LTR layouts).

Color Contrast for Error and Success Text

Always verify these combinations using the contrast checker when using non-standard shades.

Accessible Error States Beyond Color Alone

WCAG 1.4.1 (Use of Color) explicitly prohibits using color as the only means of conveying information. This requirement is most commonly violated in form validation design, where many teams use red border alone to signal an error.

An error state communicated purely through a red border fails users with: - Protanopia (red-green color blindness, ~1% of males) - Deuteranopia (most common form of red-green color blindness, ~6% of males) - Tritanopia (blue-yellow color blindness) - Achromatopsia (complete color blindness) - Low vision conditions where color perception is reduced

Required Redundant Cues

Icon: An error icon (typically an exclamation mark or X) must accompany the color change. Position it consistently — inside the input at the trailing edge, or to the left of the helper text. The icon is a color-independent signal that an error exists.

Text message: An explicit error message below the field is the most important redundant cue. "Please enter a valid email address" is unambiguous regardless of color perception. The message should appear immediately below the errored field, not only in a summary at the top or bottom of the form.

Label annotation: Some design systems add a "(Required)" or error indicator text to the label itself, providing an additional non-color cue.

Border treatment: Changing border width (from 1px to 2px) or adding a changed border style (from solid to solid with different radius) provides a shape-based cue that accompanies the color change.

Testing with the Color Blindness Simulator

Use the color blindness simulator to view your form states under different vision conditions. A properly designed error state should be clearly distinguishable from the success state even in grayscale simulation. If your error and success states look identical without color, they need additional differentiation.

The standard test: take a screenshot of your form showing both an error state and a success state simultaneously, then view it in grayscale or through a protanopia simulation. The two states should remain clearly distinguishable.

Multi-Step Form Color Cues

Multi-step forms — checkout flows, onboarding sequences, registration wizards — have an additional color design challenge: the step indicator. The sequence of steps must communicate progress, completion, current position, and upcoming steps simultaneously.

Step Indicator States

Completed steps use the brand's primary color as a filled circle or checkmark — #2563EB or whichever brand primary serves as the interactive color. The fill signals "this is done." A checkmark icon inside the filled circle provides a redundant non-color completion signal.

Current step is typically shown with a border-only version of the primary color — an unfilled circle with a 2px border in the same primary color — or with an emphasized filled state with a shadow or ring around it. The visual distinction from completed steps must be clear: completed is past, current is present.

Upcoming steps use a neutral gray — #E5E7EB or #D1D5DB — indicating that these steps are not yet reachable or relevant. The step number should be visible inside the gray circle in a darker gray like #6B7280.

Connecting lines between steps adapt their fill to reflect progress: the section from step 1 to step 2 fills with the brand primary color once step 1 is completed. The section from step 2 to step 3 remains gray until step 2 is complete. This provides a visual progress meter within the step indicator.

Section-by-Section Validation Feedback

In long multi-step forms, each section or step should display its validation status before the user moves to the next. A green checkmark or a subtle green background tint on a completed and validated section provides positive reinforcement and confirms that the user's input has been accepted. A red indicator on a section with errors — combined with an explicit count like "3 fields need attention" — tells users where to return.

The key principle: use color to communicate state efficiently at a glance, but always pair every color signal with a text or icon cue. A user who cannot distinguish red from green should still be able to navigate the form and understand what needs their attention.

Progress Bar Color

A progress bar above or below the step indicator can supplement or replace step circles for simpler flows. The filled portion uses the brand primary, and the unfilled portion uses a neutral like #E5E7EB. Avoid using a different color for the progress bar than for the active step indicator — inconsistency in the brand primary across the same UI element creates confusion.

Key Takeaways

• Define explicit colors for every input state: default (#D1D5DB border), hover (slightly darker border), focus (brand primary border, 2px), error (#DC2626 border + background tint), success (#16A34A border + icon), and disabled (#E5E7EB border, reduced opacity text).
• Focus rings must be clearly visible — use a dual-ring approach (white halo + colored outline) to ensure visibility against any background. Never remove focus outlines without providing a replacement.
• Error states must include an icon, a text message, and a color change — never color alone. Test with the color blindness simulator to verify that error and success states remain distinguishable in simulated color blindness conditions.
• Success green (#16A34A) and error red (#DC2626) must both achieve at least 4.5:1 contrast against their backgrounds when used as text. Verify both combinations in the contrast checker.
• Multi-step form step indicators need at least three visually distinct states: completed (filled brand primary + icon), current (outlined or emphasized), and upcoming (neutral gray). Connecting lines should fill progressively with the brand primary to provide an additional progress signal.
• Color choices for form states are some of the most consequential accessibility decisions in a product — get them right in the design system so every form automatically inherits accessible behavior.