Colour Contrast and Accessibility: WCAG Ratios, Common Failures, and Accessible Design Systems

Colour contrast is a legal requirement on the web — and most colour combinations that look fine to developers fail it

The Web Content Accessibility Guidelines (WCAG) specify contrast ratio requirements for text and interactive elements. These aren't advisory suggestions — they're the technical standard behind accessibility laws in the EU, UK, and US. A website that fails WCAG 2.1 contrast requirements is potentially non-compliant with the European Accessibility Act (effective 2025), the UK Equality Act, and the Americans with Disabilities Act.

Understanding how contrast ratios work, how to calculate them, and what makes a colour accessible transforms the colour converter from a unit translation tool into a practical design tool.

Why colour contrast matters

Approximately 8% of men and 0.5% of women have some form of colour vision deficiency ("colour blindness"). About 2.2 billion people worldwide have some form of visual impairment. Low contrast between text and background makes text difficult or impossible to read for:

• People with reduced visual acuity
• People with colour vision deficiencies
• Anyone reading in bright sunlight on a mobile device
• Older users whose contrast sensitivity decreases with age
• Anyone using a cheap or poorly calibrated monitor

The WCAG contrast ratio formula

Contrast ratio is defined as:

(L1 + 0.05) / (L2 + 0.05)

Where L1 is the relative luminance of the lighter colour and L2 is the relative luminance of the darker colour. Luminance is a perceptual measure of brightness, not just the lightness component of a colour.

Relative luminance is calculated from the sRGB components:

For each channel (R, G, B):
if channel/255 <= 0.04045:
    c_linear = channel/255 / 12.92
else:
    c_linear = ((channel/255 + 0.055) / 1.055) ^ 2.4

L = 0.2126 × R_linear + 0.7152 × G_linear + 0.0722 × B_linear

The 0.2126, 0.7152, 0.0722 weights reflect the human eye's differing sensitivity to red, green, and blue light. Green contributes most to perceived brightness; blue contributes least.

Contrast ratio range: 1:1 (identical colours, no contrast) to 21:1 (black text on white background, maximum contrast).

WCAG requirements

WCAG 2.1 Level AA (minimum acceptable for compliance):

• Normal text (< 18pt regular, < 14pt bold): contrast ratio ≥ 4.5:1
• Large text (≥ 18pt regular or ≥ 14pt bold): contrast ratio ≥ 3:1
• UI components and graphical objects: contrast ratio ≥ 3:1

WCAG 2.1 Level AAA (enhanced):

• Normal text: contrast ratio ≥ 7:1
• Large text: contrast ratio ≥ 4.5:1

Common colour combinations and their contrast ratios

The Bootstrap blue example is instructive: #007BFF on white fails AA for small text at 4.0:1, just below the 4.5:1 threshold. Bootstrap's default button with white text on this blue background technically fails WCAG AA — many developers don't know this.

Designing accessible colour systems

Start with luminance, not hue. Colour blindness affects the ability to distinguish hues, not luminance. Colour combinations that rely on red/green distinction to convey meaning fail for colour-blind users even if the contrast ratio is adequate. Use both colour and another visual cue (shape, pattern, text label) to convey information.

Dark mode requires separate contrast checking. A text colour with good contrast on white may fail on dark backgrounds. A systematic colour system includes contrast-verified pairs for both light and dark modes.

Use a systematic approach for design tokens:

For a primary colour (say, a brand blue at HSL 220°):

• Define shades from 50 (very light) to 950 (very dark)
• Check contrast ratios: which pairs meet 4.5:1 for small text?
• Establish documented usage rules: "use 700 on white; use 100 on 800"

Converting between colour formats for accessibility work

Different tools and environments use different colour formats:

HEX: #1A2B3C — compact, common in CSS and design tools. The WCAG luminance formula requires RGB components.

RGB: rgb(26, 43, 60) — direct component values. Most accessible for accessibility calculations.

HSL: hsl(210, 40%, 17%) — hue, saturation, lightness. Useful for systematic design: increase lightness for lighter shades, decrease for darker.

HSB/HSV: hsv(210, 57%, 24%) — hue, saturation, value. Common in design tool colour pickers (Figma, Sketch, Photoshop).

CMYK: cmyk(57%, 28%, 0%, 76%) — for print. Not used for screen contrast calculations.

Converting between these to calculate contrast ratios requires going through the RGB or linear RGB representation — which is exactly what the colour converter facilitates.

Accessible colour combinations for common use cases

Blue CTA button on white background:

• #0047AB (cobalt) on white: 8.59:1 ✅ AAA
• #1D4ED8 (Tailwind blue-700) on white: 7.32:1 ✅ AAA

Dark text on coloured backgrounds:

• Black (#000) on yellow (#FFD700): 12.4:1 ✅
• Black on orange (#FF8C00): 4.5:1 ✅ (exactly AA)
• Black on bright green (#00FF00): 15.3:1 ✅

Light text on dark backgrounds:

• White on #1E293B (Tailwind slate-800): 14.7:1 ✅ AAA
• White on #374151 (Tailwind gray-700): 8.07:1 ✅ AAA

How to use the Colour Converter on sadiqbd.com

1. Enter a colour in any format — HEX, RGB, HSL, HSV, CMYK
2. Convert — see the colour in all formats with a live preview
3. Note the RGB components — use them to calculate contrast ratios with the luminance formula
4. Use for design system work — convert between design tool formats (HSB/HSV) and CSS formats (HEX/RGB/HSL)

Frequently Asked Questions

Is there a quick way to test contrast without calculating luminance manually? Yes — tools like WebAIM's Contrast Checker (webaim.org/resources/contrastchecker) and browser DevTools' colour picker accessibility features calculate contrast ratios automatically. The W3C has a JavaScript implementation of the formula for programmatic checking.

Does contrast ratio apply to background images? For text over background images, the contrast varies across the image. WCAG handles this by requiring adequate contrast with the "perceived" background colour — a solid colour overlay, a darkened image, or a text shadow can help where the image creates insufficient contrast.

Is the Colour Converter free? Yes — completely free, no sign-up required.

Colour contrast isn't just good design practice — it's increasingly a legal requirement. Understanding how contrast ratios work and checking colour pairs before deploying makes accessibility an integral part of the design process rather than an afterthought.

Try the Colour Converter free at sadiqbd.com — convert between HEX, RGB, HSL, HSV, and CMYK with a live colour preview.