<?xml version="1.0" encoding="utf-8"?>

Color contrast recommendations for input borders

Color contrast recommendations for input borders Bad Practice
Color contrast recommendations for input borders Best Practice

Input borders define interactive form elements and help users identify where to enter information. When these borders lack sufficient contrast, they become difficult to locate, creating frustration for users with low vision or those using screens in challenging lighting conditions.

WCAG Level AA compliance requires a minimum contrast ratio of 3:1 for input borders against their surrounding background. This ensures that form fields remain clearly visible and distinguishable from other page elements. The same contrast requirement applies to focus indicators, which show which input field is currently active.

Clear, visible borders reduce cognitive load and increase completion rates for forms across all user groups. Remember that some users navigate primarily through form elements using keyboard navigation, making border visibility particularly important.

Improve your UX & Product skills with interactive courses that actually work