A palette can look appealing as swatches and still be hard to read. Text needs to be tested against its background. A warm paper colour and a muted green may work well together decoratively while producing insufficient contrast for small labels.
Check the actual pair
The Contrast checker compares two solid sRGB colours. It shows a live text preview and the calculated luminance contrast ratio. Swapping the colours produces the same ratio, although the two arrangements can feel different when used over a large area.
WCAG’s AA minimum contrast target is 4.5:1 for ordinary text and 3:1 for large text. The checker also shows a 7:1 target for enhanced contrast on ordinary text. Large text has a defined size threshold; a bold label is not automatically large text.
Use a simple palette structure
- Choose a main text colour and a page background first.
- Choose a second text colour for descriptions and check that pair too.
- Check button text against the button background separately.
- Keep decorative accents distinct from colours used to communicate essential information.
Our downloadable palettes give you starting colours, not a promise that every possible pair passes. Open the checker, choose the exact foreground and background, and test the combinations you plan to use.
Review more than a number
A passing colour ratio does not assess font size, spacing, keyboard focus, or the meaning of a coloured status indicator. Read a full paragraph and inspect the smaller interface labels as well. Use words alongside colour when showing a result.
Reference: W3C’s explanation of minimum contrast.