Color contrast checker: questions and guides
Each guide here answers one question with a practical example, then takes you to the tool to try it yourself. Guides: 11.
Questions
- Color contrast and readable textHow to check that text is readable on its background with the WCAG contrast ratio, what 4.5:1 means, and why two near-identical greys can pass and fail.
- 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?Brand orange #F7A21B gives only 2.07:1 on white. Here is how to find the closest shade that reaches 4.5:1 for text, while the original stays on shapes and backgrounds.
- My add-to-cart button is a reddish orange. Should the button text be white or black?On a #E4572E button white text gives only 3.68:1 while black gives 5.70:1. Test both, and if you want white, see how much darker the button needs to be.
- My big heading passes the check but body text in the same colour fails. What counts as large text, and is it different for Arabic fonts?Grey #8A8A8A gives 3.45:1 on white: it passes for large headings and fails for body text. The large text sizes, and why small Arabic text needs extra margin.
- The borders of the input boxes on my checkout form are very light grey. How do I check they are visible enough?Input borders in #E0E0E0 give only 1.32:1 on white. How the 3:1 UI components check works, how to find the lightest grey that passes, and why the page colour matters.
- My sale price is in bright red on white and looks very clear. Why does it fail the contrast check?Red #FF0000 on white gives 4.00:1 and fails for normal text, because contrast measures lightness, not vividness. A deeper red like #D32F2F gives 4.98:1.
- I have heard about APCA for measuring contrast. Should I use it instead of the WCAG 2 ratio this tool calculates?The tool calculates the WCAG 2 ratio, which the currently published guidelines use for their pass levels. APCA is a separate method, not part of WCAG 2.
- I added a dark mode to my site. Which greys and which brand colour can I use for text on the dark background?Brand colour #0F6B5F gives 6.39:1 on white and only 2.93:1 on #121212. Recheck every text colour for dark mode and get a lighter version of your brand colour that passes.
- The same grey passed on a white background but fails on my store's beige background. Why?#767676 gives 4.54:1 on white but only 4.00:1 on beige #F5F0E6. The ratio depends on both colours, so check text against your real background, not white.
- Customers say the hint text inside my order form fields is faded and hard to read. How do I pick a better colour for it?Placeholder text in #A9A9A9 gives only 2.35:1 on white. It is text and needs 4.5:1 like any other. How to find the nearest passing grey, and why the field fill matters.
- I put the offer text in white over a banner photo, and the tool does not check images. How can I make sure the text is readable?The tool compares two solid colours only, so pick the lightest spot behind the text and test white on it. If it fails, add a dark band and check white against its colour.