At Polyspiral, we love bold, vibrant design — but never at the expense of usability. Orange is an eye-catching, energetic colour often used for calls to action, accents, and branding highlights. But when used on a white background, many shades of orange don’t have enough contrast to be accessible, especially for body text.
If you’re designing with inclusivity and web accessibility in mind (as we always do), it’s important to choose colours that meet WCAG 2.1 contrast standards.
So, is there an orange that works on white?
Yes — but not just any orange will do.
🎯 What Makes a Colour Accessible?
The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios to ensure text is legible for people with visual impairments or colour blindness:
- Normal body text: Minimum 4.5:1 contrast ratio
- Large text (18pt or 14pt bold): Minimum 3:1 contrast ratio
✅ Oranges That Pass on White
Here are some tested orange shades that pass accessibility requirements when used on a white background:
| Colour Name | Hex Code | Contrast Ratio | Suitable For |
|---|---|---|---|
| Burnt Orange | #C44D00 | 4.54:1 | Body and large text (AA) |
| Rust | #B34700 | 5.17:1 | Body and large text (AA) |
| Deep Orange | #CC5500 | 4.79:1 | Body and large text (AA) |
| Orange-Red | #D64500 | 4.50:1 | Body text (just passes) |
| Dark Tangerine | #E56717 | 3.33:1 | Large text only (AA) |
If you’re using orange for a button, link, or heading, these deeper shades will hold their own on white backgrounds — while still keeping that warm, welcoming feel.
❌ Oranges That Fail Accessibility on White
Many common or brand-style oranges are too bright or pale to meet contrast standards:
| Colour Name | Hex Code | Contrast Ratio | Accessibility |
|---|---|---|---|
| Bright Orange | #FFA500 | 2.14:1 | ❌ Fails AA |
| Light Orange | #FFB347 | 1.78:1 | ❌ Fails AA |
| Peach | #FFDAB9 | 1.22:1 | ❌ Fails AA |
These may look beautiful in branding but should not be used for text on a white background. They’re fine for background colour or accents with contrasting dark text instead.
💡 Design Tips
- Use bold oranges sparingly — for buttons, highlights, and large headers
- Choose deeper oranges (with more red and less yellow) to meet contrast needs
- Use white or light text on orange buttons instead — just make sure that combo also meets contrast standards!
- Always test colours with an accessible contrast checker
At Polyspiral, Accessibility Isn’t an Afterthought
Whether we’re building a site from scratch or refreshing your existing branding, we always consider how real people interact with your website. Accessibility improves SEO, UX, and trust — and it’s simply the right thing to do.
Need help with your website colours or design? Let’s talk about making your site beautiful and usable for everyone.
