Colour makes a brand memorable, but readers need enough contrast to understand navigation, labels, forms and editorial text. A useful palette starts with readable body copy and applies expressive brand colours where they work best.
How contrast is calculated
The WCAG contrast ratio compares the relative luminance of two colours. A ratio of 4.5:1 is the familiar AA threshold for normal-sized text and 3:1 for larger text under WCAG 2.x. AAA normal-sized text requires 7:1. These numeric checks help but cannot fully measure the clarity of real text and photography.
Start with your background
Choose the actual background behind text, then test several darker or lighter foreground shades. A turquoise brand accent may look lovely as a border or button fill but need to be darker to serve as small text on white. For inverted sections, test a light foreground on the actual dark navy, not on a near match.
Worked example
Start with a teal colour such as #218C84 on #FFFFFF. Use the palette builder to compare six shade variations and inspect which meet the 4.5:1 text threshold. Try several candidates in the interface, then run a final exact pair check in the colour contrast checker.
What a palette number cannot tell you
- Photographs and gradients may have different contrast across the same line of text.
- Hover, focus, visited, error and disabled states still need separate design review.
- Screen brightness, fonts, strokes and antialiasing affect perceived legibility.
- Colours alone should not communicate form errors, gains/losses or important states.
A practical finishing checklist
Test real pages at mobile widths, use distinct keyboard focus rings, pair chart colours with labels or patterns, and double-check copy over every coloured surface. Use brand colour as a tool for hierarchy—not at the expense of readability.
For detailed normative information, review the W3C WCAG 2.2 contrast criterion.