Button Text and Background Contrast

Button Accessibility and Contrast

Buttons are critical interactive elements that must be accessible in all states: default, hover, focus, active, and disabled. Each state must maintain adequate contrast between the text and the button background.

Primary Buttons

/* PASS - White text on dark button */
.btn-primary {
  background: #2563eb; /* blue-600 */
  color: #ffffff;      /* 5.38:1 - Passes AA */
}

/* PASS - Dark text on light button */
.btn-primary {
  background: #dbeafe; /* blue-100 */
  color: #1e3a8a;      /* blue-900: 9.49:1 - Passes AAA */
}

/* FAIL - White text on medium button */
.btn-primary {
  background: #3b82f6; /* blue-500 */
  color: #ffffff;      /* 3.45:1 - FAILS AA normal */
}

Button States Must All Pass

.btn-primary {
  background: #2563eb; color: #ffffff; /* 5.38:1 - PASS */
}
.btn-primary:hover {
  background: #1d4ed8; color: #ffffff; /* 8.59:1 - PASS */
}
.btn-primary:focus {
  background: #2563eb; color: #ffffff; /* 5.38:1 - PASS */
  outline: 2px solid #1d4ed8;
}
.btn-primary:active {
  background: #1e40af; color: #ffffff; /* 10.14:1 - PASS */
}

Disabled Buttons

Disabled buttons are exempt from WCAG 1.4.3 contrast requirements because they are "not available for user interaction." However, users still need to recognize that a button exists and is disabled:

/* Minimum recommended for disabled state */
.btn:disabled {
  background: #e4e4e7; /* zinc-200 */
  color: #a1a1aa;      /* zinc-400: 1.91:1 vs bg */
  cursor: not-allowed;
  opacity: 0.7;        /* Additional visual cue */
}

Outlined / Ghost Buttons

For outlined buttons, the text color must contrast with the page background, not the button border:

/* On white page background */
.btn-outline {
  background: transparent;
  border: 1px solid #2563eb;
  color: #2563eb;  /* 5.38:1 vs #ffffff - PASS */
}

Icon-Only Buttons

Buttons with only icons (no text) must still meet WCAG 1.4.11 (Non-text Contrast) at 3:1 for the icon against its background. Always include an aria-label for screen readers.