A brand picks a distinctive colour: a warm orange, an elegant grey, a luxurious gold. It looks great in the brand file and on the logo. Then it’s used for text on the website — and the button becomes hard to read, links disappear into paragraphs, and the price can’t be seen on a phone in sunlight. The problem isn’t the colour itself but the contrast between it and its surroundings.
This guide explains how to measure contrast and how to build a practical brand palette that combines beauty with readability, with details specific to Arabic typefaces and dark mode.
What is contrast ratio?
Contrast ratio compares the “relative luminance” of two colours — how light each appears to the human eye. The result ranges from 1:1 (identical colours) to 21:1 (black on white). The formula is defined by WCAG, the international reference for web accessibility.
| Level | Normal text | Large text |
|---|---|---|
| AA (the usual target) | 4.5 : 1 | 3 : 1 |
| AAA (stricter) | 7 : 1 | 4.5 : 1 |
“Large text” under the standard means roughly 24 px and above, or roughly 18.7 px and above if bold. Important non-text elements, such as input borders and meaningful icons, need at least 3:1 against their surroundings.
Our colour contrast checker calculates the ratio instantly, shows the result at each level with a live Arabic and English preview, and suggests the closest colour for your text that passes.
Examples that reveal the problem
| Text on white | Approximate ratio | Normal text result |
|---|---|---|
| Black #000000 | 21 : 1 | Pass |
| Dark grey #5F6368 | About 6 : 1 | Pass (AA) |
| Light grey #AAAAAA | About 2.3 : 1 | Fail |
Light grey is one of the most common “elegant” choices for secondary text — and one of the most tiring to read. Bright warm colours (orange, yellow) often fail as text colours on white, even though they work beautifully as a button background with dark text, or as a decorative colour.
Thin Arabic typefaces and small sizes need more than the minimum contrast. Arabic letterforms have fine details — dots, teeth and diacritics — that disappear faster than Latin letters when contrast drops. If your Arabic text is light-weight or small, aim above 4.5:1.
Building a practical brand palette
A common mistake is a brand identity made of just “a primary and a secondary colour”. On screen you need more: several shades of each colour, and clear roles for each shade.
1. Shades
From the base colour, create a scale from lightest to darkest (such as 50 to 900). Light shades for backgrounds and cards, mid shades for buttons and highlights, dark shades for text on light backgrounds or a button’s pressed state.
2. Roles
- Primary text colour: very dark on light, or very light on dark.
- Secondary text colour: softer, but always passing 4.5:1.
- Brand colour: for buttons, links and highlights, in a shade that passes contrast in its role.
- State colours: success, warning and error, in clear shades.
- Backgrounds and borders: two or three neutral shades.
3. Harmonious colours
The complementary colour (opposite on the colour wheel) creates strong contrast for elements that need attention; analogous colours give a calm, cohesive feel. You don’t need all of them in the interface — use them sparingly in illustrations and designs.
The tool’s palette section creates ten shades from your base colour and five harmonious colours, and gives developers ready-made CSS variables so the identity is applied consistently on the site.
Dark mode
In dark interfaces, don’t simply invert colours:
- Avoid pure white on pure black for long paragraphs; extremely sharp contrast can tire the eyes. Off-white on a dark, not-quite-black background is more comfortable.
- Your brand colour may need a lighter shade on dark backgrounds to pass contrast.
- Re-check every colour pair in dark mode, because passing in light mode doesn’t mean passing in dark.
Colours in social media and ads
Text over photos is the hardest contrast case, because the background varies. Add a shading layer behind the text, place it on a calm area of the image, or put it inside a band of brand colour. And because platforms compress images, weak contrast gets worse after posting, as our design export guide explains.
Don’t rely on colour alone
A meaningful share of people have some difficulty distinguishing certain colours, especially red and green. So never make colour the only way to convey information: a form error needs a text message, not just a red border, and a link in a paragraph needs an underline or a different weight, not just a colour.
Practical steps to review your site’s colours
- List the actual colour pairs: paragraph text on background, button text on button colour, links, secondary text, and text over images.
- Check each pair in the tool and note what fails.
- Replace failing colours with the nearest passing shade of the same colour, to keep the identity.
- Update your brand guide with the new shades and roles, and share them with developers as variables.
- Repeat the check for dark mode if you have one.
An example: fixing an orange button
A brand uses a warm orange (#D4562E) for buttons with white text. The contrast between white and this orange is about 4.06:1 — slightly below the 4.5:1 needed for normal button text. The lighter shade (#F08A4B) is worse: only about 2.5:1 with white.
Fixes that keep the identity:
- A darker button shade: such as #B24320, giving about 5.65:1 with white text while staying in the same colour family.
- Dark text on the light orange: #1A1A1A text on #F08A4B gives about 7:1.
- Larger, bold button text: it then counts as “large text”, which needs only 3:1 — though that’s a limited fix.
That way orange remains the brand colour, in the right shade for each role.
Key takeaways
- 4.5:1 for normal text and 3:1 for large text is the AA minimum.
- Thin Arabic typefaces need more than the minimum contrast.
- A brand palette needs shades and roles, not just two colours.
- Check dark mode and text over images separately.
- Never make colour the only way to convey meaning.
Frequently asked questions
My brand colour fails contrast. Should I change it?
Not necessarily. Keep it for the logo, decorative elements and backgrounds, and use a darker or lighter shade of it for text and buttons. That way the identity stays and readability is achieved.
How do I choose text colour on my brand colour?
Check white and black (or your palette’s darkest shade) against the brand colour and pick the higher contrast. Light and warm colours usually need dark text; dark ones need white text.
Is AAA necessary?
Not for most sites, but it’s helpful for long-form content and for organisations whose audiences include older or low-vision readers.
Does contrast affect SEO?
It isn’t a direct ranking factor, but it affects user experience, time on page and conversion — all of which matter to any site’s success.
Beautiful colours that can’t be read serve no one. Check your colours and build your brand palette with our free colour contrast checker — and if you want a complete visual identity that works on screen as well as on paper, get in touch.
