Colour Contrast: Balancing Accessibility Requirements with Brand Expression

Colour contrast is where accessibility requirements and brand expression most frequently collide. WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. These thresholds exist because approximately 300 million people worldwide have colour vision deficiency, and many more experience situational impairments from screen glare, low brightness settings, or ageing eyes.

For brands built around soft pastels, light greys, or subtle colour variations, meeting these requirements can feel like a constraint that undermines the aesthetic intent. But this framing is misleading. Accessible colour contrast does not require abandoning brand identity — it requires more thoughtful application of colour within the design system.

Understanding Contrast Ratios

Contrast ratio measures the relative luminance difference between foreground and background colours on a scale from 1:1 (no contrast, identical colours) to 21:1 (maximum contrast, black on white). The WCAG thresholds represent the minimum contrast at which text remains readable for users with moderately low vision.

The mathematical formula considers luminance rather than hue, which means that two colours can appear visually distinct — blue and red, for example — while having insufficient luminance contrast for text readability. This is why contrast checking tools are essential; human perception of contrast is unreliable, particularly for colour combinations involving saturated hues.

Brand Colours That Fail Contrast

Many popular brand colour palettes include combinations that fail WCAG contrast requirements. Light blue text on white backgrounds, medium grey text on light grey backgrounds, and pastel accent colours used for text are common offenders. The issue is not the colours themselves but their application — specifically, using low-contrast colours for text rather than reserving them for decorative or background elements.

The solution is to expand the brand colour palette to include high-contrast variants for text use while preserving the original colours for backgrounds, borders, illustrations, and decorative elements. A brand built around soft pastels can maintain its aesthetic by using those pastels as background colours with dark text, rather than as text colours on light backgrounds.

Understanding colour psychology in brand strategy helps inform which colours carry the most brand meaning and therefore deserve the most careful treatment in the accessible palette.

Techniques for Maintaining Brand Expression

Several practical techniques allow designers to meet contrast requirements while preserving brand identity. Darkening brand colours for text use — shifting a medium blue to a darker shade that meets 4.5:1 — often preserves the colour's character while improving readability. The darkened variant becomes the "text" version of the brand colour, used alongside the original for backgrounds and accents.

Increasing font size and weight is another approach. WCAG allows a lower contrast ratio (3:1) for large text (18pt regular or 14pt bold). Using brand colours at larger sizes or bolder weights can meet accessibility requirements while maintaining the intended visual impact.

Adding semi-transparent overlays to background images ensures text readability without obscuring the imagery entirely. A dark gradient overlay on a light photograph creates sufficient contrast for white text while preserving the image's visual contribution.

Dark Mode and Contrast Considerations

Dark mode introduces additional contrast challenges. Colours that meet contrast requirements on a light background may not meet them on a dark background, and vice versa. A comprehensive accessible colour system requires separate light and dark mode palettes, each independently verified for contrast compliance.

The principles of dark mode design extend beyond simple colour inversion. Effective dark mode palettes use slightly desaturated colours to reduce eye strain, avoid pure black backgrounds (which create excessive contrast with white text), and adjust colour relationships to maintain hierarchy and emphasis.

Testing and Validation

Contrast checking should be integrated into the design workflow rather than treated as a final validation step. Browser extensions, Figma plugins, and design system tools can provide real-time contrast feedback as designers work, preventing accessibility failures before they reach development.

Automated testing catches contrast failures in static colour combinations but may miss issues in dynamic contexts — text over images, gradient backgrounds, or interactive states (hover, focus, active). Manual testing with contrast checking tools should supplement automated checks for these edge cases.

Beyond Minimum Compliance

Meeting minimum WCAG contrast requirements is a legal and ethical baseline, not a design goal. Higher contrast ratios improve readability for all users, not just those with visual impairments. Research shows that increased contrast reduces reading time, improves comprehension, and decreases eye fatigue across all user populations.

The most effective approach is to design for enhanced contrast (WCAG Level AAA, 7:1 for normal text) where possible, falling back to Level AA (4.5:1) only where brand expression genuinely requires it. This approach treats accessibility as a quality standard rather than a compliance checkbox, resulting in designs that are both more inclusive and more effective.