Free toolsDigital
Colour contrast
Enter your text and background colours to see whether the text is readable and, if not, the nearest shade that is.
Which colours?
Contrast ratio
3.18 : 1
Fine for headings and icons; hard to read as small text.
- Small textat least 4.5 : 1
- Too low
- Large text and headingsat least 3 : 1
- Readable
- Icons and linesat least 3 : 1
- Readable
Suggestion
Change the text colour to #D62B00 and small text becomes readable too.
Good to know
Three short notes
What is a contrast ratio?
It is the difference in brightness between two colours. 1 : 1 means the same colour, 21 : 1 means black on white. The higher the ratio, the easier text stands out from its background.
Which threshold applies where?
Small text needs at least 4.5 : 1. For text of 24 pixels and above (19 pixels if bold), icons and lines, 3 : 1 is enough. The measurement follows level AA of WCAG, the web accessibility standard.
If your brand colour falls short
You do not have to change the colour. The main colour stays on the logo, buttons and large areas; small text uses a darker shade of it. That is how we use our own logo orange.