A balanced palette still has to be readable

Written and reviewed by Art and the City · Updated August 2026 · 8 minute read

Contrast is a relationship

A hex value is not accessible on its own. It must be evaluated against the exact background, at the intended size and weight. The same orange can be readable as a large decorative block and fail as small white button text.

Test every text and surface pair

List the combinations the system will use: body text on the page, muted text on cards, labels on buttons, links in paragraphs and error messages in forms. Check the actual pair rather than assuming that “dark” and “light” are sufficient descriptions.

Protect focus visibility

Keyboard focus must be easy to find. A focus ring needs contrast against both the component and its surrounding background. Test it on buttons, fields and links across every theme or section color.

Watch disabled and placeholder text

Designers often make secondary information too pale. Disabled controls should look unavailable without becoming illegible, and placeholders should not replace persistent labels. Muted does not mean invisible.

Review the palette step by step

1. Identify every text/background combination.
2. Run a recognised contrast checker for normal and large text.
3. Test hover, focus, error, success and selected states.
4. View the interface in grayscale and with simulated color-vision differences.
5. Zoom and test on a real mobile screen.
6. Ask people to complete a real task rather than judging a static palette.

Balance brand and function

When a brand color fails for text, do not abandon the identity immediately. Use the color in larger surfaces or decorative elements and introduce a darker functional variant for controls. Document the variants by role so future pages remain consistent.

The tool is a starting point

Color Ratio Tool helps explore distribution and mood. It is not an accessibility certification. Verify final combinations with dedicated testing and the real interface before publication.