A palette contrast lab for interface design
Check the pair,
not just the swatch.
Test body text and buttons in the roles they’ll actually play. See which pair misses the threshold, adjust it, and take the CSS variables with you.
01 / Set the roles
Build a four-color palette
02 / Review the pairs
Contrast results
A small preview
Read the body copy and the action label against the proposed colors.
Sample action| Pair | Ratio | Minimum | Result |
|---|
The displayed ratio is rounded down. Pass or fail uses the unrounded value.
Method
Contrast depends on what touches
These checks use opaque sRGB colors. A button boundary check applies when the fill is needed to identify the button. Hover states, imagery, transparency, and the rest of the interface require separate checks.