UI component has insufficient contrast

What’s wrong

A button, input, checkbox, radio button, or other interactive component has a border or visual indicator with less than a 3:1 contrast ratio against its background.

Why it matters

People with low vision need to be able to see where interactive elements are on the page, not just read their labels. A white button with a light grey border on a white background is essentially invisible to many users with low vision — they cannot tell where to click or that a control even exists.

How to fix it

Make sure the visual boundary of interactive components — their border, outline, or background — has at least a 3:1 contrast ratio against the adjacent background colour.

/* Input border: #cccccc on #ffffff = 1.6:1 — fails */
input {
  border: 1px solid #cccccc;
  background: #ffffff;
}

/* Checkbox: custom style barely visible */
.checkbox {
  border: 2px solid #d0d0d0;
  background: #ffffff;
}

/* Input border: #767676 on #ffffff = 4.5:1 — passes */
input {
  border: 1px solid #767676;
  background: #ffffff;
}

/* Checkbox: clearly visible border */
.checkbox {
  border: 2px solid #595959;
  background: #ffffff;
}

This applies to the component boundary, not the label text (which is covered by 1.4.3). Focus indicators are covered separately under 2.4.11.

Learn more

• WCAG Understanding 1.4.11
• WebAIM Contrast Checker