My orange brand colour fails as a text colour on white. How do I find the closest shade of it that passes without changing my brand?
Pick a target of 4.5:1 in the contrast checker and it mixes your colour toward black step by step until it finds the first shade that genuinely passes. For orange #F7A21B on white that is #A26A12 at 4.56:1: use it for text, and keep the original orange for large areas.
Why orange fails in the first place
Orange and yellow are among the lightest colours to the eye, even when they look bold and saturated. The contrast ratio does not care how vivid a colour is, only how bright it is compared with the background. That is why #F7A21B on white scores just 2.07:1 and fails all five checks, including the UI components check that asks for 3:1.
None of this means your colour is wrong. It means it is a colour for backgrounds and shapes, not for small text on white. Separating those two jobs is what solves the problem without touching the brand.
The steps in the tool
- Open the Color contrast checker, type #F7A21B in 'Text color' and #FFFFFF in 'Background color'.
- You will see 2.07:1 with 'Fail' against every check.
- Scroll to 'Suggest a color that reaches the target' and choose 4.5:1 (AA normal text) under 'Target ratio'.
- 'Nearest darker color' shows #A26A12 at 4.56:1. Press 'Use this color' to move it into the field and see it in the live sample.
- 'Nearest lighter color' tells you that even pure white does not reach 4.5:1 on this background, which makes sense when the background is already white.
How the suggestions work, and where they stop
The tool does not guess at a nice colour. It blends yours toward black one 1/255 step at a time, recalculates the ratio after each step, and shows the first shade that meets the target. So the result stays in your colour family, just a little deeper. It is not the only valid choice, though: your designer may prefer a redder or less saturated version, and all they need to do is type it in and check it.
Try the other targets as well to see how far apart the levels are:
- Target 3:1 gives #CC8616 at 3.00:1, enough for large headings, button borders and icons, not for body copy.
- Target 4.5:1 gives #A26A12 at 4.56:1, the shade for links, prices and small labels.
- Target 7:1 gives #7A500D at 7.05:1, which drifts toward brown, so reserve it for when you aim for AAA.
Splitting the roles in your store
Keep the original orange for anything that does not carry small text: the announcement bar, decorative icons, illustrations, and backgrounds with dark text on top. Use the deeper shade for links, small section titles and price text. Shoppers will read it as one consistent colour, because both shades come from the same source.
If your site has a dark mode, the picture flips: the same orange on #121212 gives 9.04:1 and works as a text colour there directly. Keep in mind that the tool calculates the WCAG 2 ratio only; passing it is one step toward readable pages, not proof that the whole site is accessible.
Not sure of the exact code of your brand colour? Pick it from your logo file with the Image color picker and check it here.
Common questions
Does a darker shade mean a new brand colour?
No. Most brand guides define a main colour plus supporting tints and shades. The deeper shade comes from the same colour and is only used for text.
Why is there no lighter suggestion?
Because the background is white. The lighter the orange gets, the closer it is to white and the lower the contrast, so the tool reports that even pure white cannot reach the target.
Could I put white text on the orange instead?
The ratio is symmetrical: white on #F7A21B is also 2.07:1, so it fails just as badly. Dark text on the orange is the better route.