Skip to main content
2026-01-27•6 min read•navable Team•
Accessible WebdesignContrast Checker WCAGColor ContrastAccessibility toolsWCAG 2.1WCAG 2.2BFSGEAAAccessibilityContrast RatioLighthouseWAVEUXSEO

Color and Contrast - Accessible Webdesign (BFSG & WCAG)

In the digital landscape of 2026, accessibility is no longer a niche requirement—it’s increasingly a baseline expectation. With the enforcement of Germany’s BFSG (since 2025-06-28) and the European Accessibility Act (EAA), many digital services must treat accessibility as a compliance topic.

One of the most widespread blockers is also one of the most preventable: insufficient color contrast. The WebAIM Million Report (2025) consistently shows low-contrast text among the most common detectable failures on the web.

Hint: Poor contrast is not 'just design'. Depending on your product/service scope, it can become a compliance risk under BFSG/EAA.

1) What is color contrast—and why does it matter?

Color contrast is the difference in perceived brightness (luminance) between foreground (e.g. text) and background.

  • Scale: 1:1 (invisible) to 21:1 (black on white).
  • Why luminance matters: the human eye perceives some hues as brighter than others (we’re typically more sensitive to green than blue).

Who is affected?

  • Low vision users: need higher contrast to read.
  • Color vision deficiency:: If information is conveyed only by hue (“red means error”), it may be missed.
  • Situational impairments: bright sunlight can wash out screens.

2) WCAG contrast rules (2.1/2.2), explained

For many websites, the practical target is WCAG 2.1 Level AA, with WCAG 2.2 increasingly used as best practice.

2.1 Normal text: 4.5:1

For body text, labels, menus, and most UI text: at least 4.5:1.

2.2 Large text: 3:1

Large text can meet the lower threshold of 3:1.

  • Definition (WCAG): at least 18pt (≈ 24px) regular OR 14pt (≈ 18.5px) bold.
  • Pitfall: a standard 16px bold heading does not automatically count as “large text”.

2.3 Non-text contrast (UI components): 3:1

WCAG 2.1 SC 1.4.11 requires at least 3:1 for UI components and graphical objects, including:

  • input borders
  • meaningful icons
  • keyboard focus indicators

2.4 WCAG 2.2: focus visibility and obstruction

WCAG 2.2 reinforces focus requirements—e.g. SC 2.4.11 (Focus Not Obscured), so focused elements aren’t hidden behind sticky headers or banners.

3) Legal context: BFSG, EAA, and global risk

  • Germany (BFSG): mandatory since 2025-06-28 for certain consumer-facing services.
  • EU (EAA): harmonizes requirements across member states.
  • International (e.g. USA/ADA): can create additional risk if your service is accessible in the US.

4) Common contrast pitfalls (and how to fix them)

Pitfall 1: the “orange CTA” trap

  • Problem: common orange like #FF6600 often fails with white text (often around ~2.1:1).
  • Fix: darken the orange (e.g. #D35400) or use dark text on orange.

Pitfall 2: “subtle gray” for secondary text

  • Problem: #999999 on white lands around ~2.8:1.
  • Fix: set a stricter gray floor; on white, #767676 is a common minimum.

Pitfall 3: relying on color alone

  • Problem: red-only error states are not reliably perceivable.
  • Fix: combine color + icon + explicit text.

Example:

  • ❌ Red-only: “Invalid email”
  • ✅ Icon + label: “Error: Invalid email”

5) Quick reference: what ratios do I need?

ElementWCAG minimumTypical standard
Normal text4.5:1WCAG AA
Large text3:1WCAG AA
UI components (borders, icons, focus)3:1WCAG 2.1 SC 1.4.11

6) How to test contrast in real projects

Automated

Tip: Try our free Contrast Checker.

  • Lighthouse (Chrome DevTools)
  • WAVE

If your Lighthouse accessibility score is consistently below 90, it often indicates a design-system level contrast problem.

Manual

  • Squint test: if text disappears when squinting, contrast is likely too low.
  • Grayscale test: content should remain distinguishable without color.
  • Text on images: automation often misses overlays and background images.

A minimal focus-ring pattern

/* Example: a visible, high-contrast focus indicator */
:focus-visible {
  outline: 3px solid #0ea5e9;
  outline-offset: 3px;
}

Conclusion

Don't guess with your compliance. Low contrast is the easiest accessibility fix to implement, yet it offers the highest ROI in terms of usability and legal safety.

Audit your brand colors today. Ensure your primary palette meets the 4.5:1 ratio and secure your digital future.

👉To our product page

📧[email protected]

FAQs

Further reading