Color contrast

What is color contrast?

Color contrast is the difference in brightness between a foreground colour, such as text or an icon, and the background behind it. It is expressed as a ratio from 1:1 (no contrast) to 21:1 (black on white). The higher the ratio, the easier the content is to read, especially for people with low vision, colour blindness or a screen in bright sunlight.

Contrast is both a design principle and a legal and accessibility requirement in many countries.

WCAG contrast ratios

The Web Content Accessibility Guidelines (WCAG) define minimum ratios based on text size and conformance level.

Level AA is the usual target for websites and the reference for most regulations.

How the ratio is calculated

The ratio compares the relative luminance of two colours: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. You do not need to compute it by hand: browser dev tools and checkers show it instantly.

/* 4.6:1 on white, passes AA */
color: #767676;
background: #ffffff;

Common mistakes

• Light grey text on white, popular in minimal designs but often below 3:1.
• Text placed over images or gradients without an overlay.
• Placeholder text and disabled states that are too faint.
• Using colour alone to convey meaning, such as red for errors with no icon or label.
• Forgetting hover, focus and dark mode states.

Best practices

• Test every colour pair in your palette and document the passing combinations in your design system.
• Pair contrast with size and weight to build a clear visual hierarchy.
• Check contrast again in dark mode, as a palette that works in light mode can fail in dark.
• Test with a colour blindness simulator, not only with a ratio checker.

Color contrast at BeBranded

We check contrast when we build a palette, not after launch. In our design work, every colour pair is validated against WCAG AA and documented, so your brand stays readable and accessible across the website and the interface.