Colour Palette & Accessibility Tools
7 converters, all running in your browser.
Harmonies come from fixed relationships on the colour wheel — complementary is 180° away, triadic is two colours at 120°, analogous is neighbours within about 30°. They are a starting point rather than an answer: a complementary pair is the highest-contrast combination available, which makes it excellent for one accent and exhausting across a whole interface.
Contrast is not a matter of taste. WCAG requires 4.5:1 for body text and 3:1 for large text, and the ratio is computed from relative luminance rather than from how different two colours look. Two colours can be obviously distinct and still fail, which is why the number has to be checked rather than judged.
Colour blindness affects around 8% of men and 0.5% of women. Any interface that carries meaning in colour alone — a red error, a green success — is illegible to a portion of its users unless the meaning is also carried by a shape, an icon or a word.
All 7 converters
The Harmonies, and What They Are For
| Relationship | Angle | Best used for |
|---|---|---|
| Complementary | 180° | One accent against a dominant colour |
| Split complementary | 150°/210° | The same contrast, less tension |
| Triadic | 120° | Three-way schemes, needs one dominant |
| Analogous | ±30° | Calm, cohesive, low contrast |
| Tetradic | 90° | Rich but hard to balance |
Contrast Is Measured, Not Judged
WCAG contrast is computed from relative luminance, which weights green far more heavily than blue — the coefficients are 0.2126 red, 0.7152 green, 0.0722 blue, reflecting how the eye responds. That is why two colours can look obviously different and still fail, and why the ratio has to be checked rather than eyeballed.
| Level | Body text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Designing for Colour Blindness
Around 8% of men and 0.5% of women have some colour vision deficiency, deuteranomaly being the most common. The practical rules are short:
- Never carry meaning in colour alone. Add an icon, a label or a pattern.
- Red and green are the worst pair and are exactly the pair interfaces use for error and
- Vary lightness, not just hue. Two colours that differ in lightness stay distinguishable