ColorCheckerColorContrast

Form Input Contrast Checker

Test your form input colors — borders, placeholder text, labels, and backgrounds — against WCAG contrast standards. Forms are where accessibility failures hurt most: make sure yours pass.

How to Check Form Input Contrast

1. Set the foreground to your form text or border color — placeholder text, input values, and field borders all need to meet WCAG contrast requirements.

2. Set the background to your input field fill — typically a light gray like #F1F5F9 or white. Form fields often have a different background than the page, so check them separately.

3. Under SC 1.4.11 (Non-Text Contrast), form input borders and focus indicators need at least 3:1 against adjacent colors. Use the form preview to verify all elements pass.

Form Accessibility: Beyond Text Contrast

Forms are where accessibility failures hurt users the most — if someone can't see a required field border or read placeholder text, they can't complete a purchase, sign up, or contact you. WCAG SC 1.4.11 requires 3:1 minimum for visual boundaries of input fields.

Three checks per form field: (1) input text against field background — 4.5:1 AA, (2) placeholder text — browsers render this lighter, style it explicitly, (3) field borders — 3:1 against both field fill and page background. Use our form preview mode to test all three at once.

Contrast Ratio

6.9:1
AA Normal
AA Large
AAA Normal
AAA Large

Input border needs 3:1 (SC 1.4.11). Placeholder text needs 4.5:1.

URL Scanner

Scan any site for WCAG issues

Palette Explorer

Pick a seed color and get WCAG-compliant harmonies.

AI Color Recommendations

This feature is not yet available. We're actively building it — if you'd like early access or have ideas to share, reach out and we'll prioritize your needs.

Contact Us

Frequently Asked Questions

What WCAG contrast requirements apply to form inputs?
Form inputs have several WCAG contrast requirements: input borders must have at least 3:1 contrast against the background (SC 1.4.11 Non-text Contrast), placeholder text needs 4.5:1 against the input background, and label text needs 4.5:1 against the page background. Our checker helps you verify all three.
Do disabled form inputs need to meet contrast requirements?
No — WCAG explicitly exempts inactive or disabled UI components from contrast requirements. However, it's good practice to ensure disabled states are still distinguishable from active ones through visual cues beyond color (like reduced opacity or a different border style).
What's the best background color for accessible form inputs?
White (#FFFFFF) or near-white (#F8FAFC) backgrounds work best for text inputs, paired with dark borders (#475569 or darker) to meet the 3:1 non-text contrast requirement. Avoid using the same color for input borders and page background — users with low vision may not see where to click.
How do I check contrast for input focus rings?
Focus indicators must meet 3:1 against both the adjacent background and the input's fill color under SC 1.4.11. Test the focus ring color against your page background AND your input background separately. Many design systems use a high-contrast outline (like a 2px solid blue or black ring) that passes against any background — this is the safest approach.
Do error state colors need to pass contrast checks?
Yes — error messages, border color changes, and validation text must all meet the same WCAG thresholds as regular text (4.5:1 AA). Red error text (#DC2626 or similar) on white backgrounds typically passes AA at ~4.8:1, but pair it with a bold font weight for extra visibility. Never rely on color alone to indicate errors — always include an icon or text label.

Related Tools

Button Contrast CheckerIcon Contrast CheckerText Contrast CheckerWCAG AA Checker