Practical color guide
Accessible Color Palette Guide for WCAG-Friendly UI
Design accessible color palettes for readable text, buttons, states and dashboards with WCAG contrast in mind.
Open related toolDesign for real reading
Accessible palettes prioritize readable text, clear links, visible focus states and enough difference between interface states.
Test every role
Do not test only the main text. Test buttons, badges, alerts, disabled states, hover states and charts.
Use color plus labels
Color should not be the only way to communicate status. Combine color with labels, icons, borders or text.
Frequently asked questions
What makes a palette accessible?
An accessible palette provides enough contrast and does not rely on color alone to communicate meaning.
Is WCAG contrast enough?
It is a strong start, but you should also consider focus states, error messages and usability in real layouts.