Accessible Button Colors for WCAG-Friendly Interfaces
Buttons need strong contrast because they carry important actions. Test both the label text and the button boundary against the page background.
Accessible button states
.button-primary {
background: #1d4ed8;
color: #ffffff;
}
.button-danger {
background: #b91c1c;
color: #ffffff;
}
.button-disabled {
background: #e5e7eb;
color: #6b7280;
}Developer checklist
- Check text contrast for every button state.
- Do not use color alone to communicate danger or success.
- Keep disabled buttons visible but clearly inactive.