Accessible Colors & Contrasts – Checklist & Best Practices for the Accessibility Strengthening Act (BFSG)

Starting June 28, 2025, the Accessibility Strengthening Act (BFSG) will come into effect, requiring companies to make their websites accessible to everyone. A central element of this obligation is accessible colors and contrasts that comply with WCAG 2.1 guidelines. Companies must ensure their website is accessible to all users, including people with visual impairments.

Why Accessible Colors and Contrasts are Essential for Your Website

Accessible colors and contrasts are not just a legal requirement – they also improve usability and offer a competitive advantage. People with visual impairments, such as low vision or color blindness, rely on good contrasts to recognize and navigate content.

Contrast refers to the difference between text and background colors. A high contrast ratio ensures that texts are easily readable and that your website can be used by a broad user base. Proper contrast is particularly crucial for accessibility, as it helps people with visual impairments understand content better.

Accessible Colors & Contrasts – Implementation Checklist:

✔ Controls and graphical elements, such as infographics, must have a minimum contrast ratio of 3:1.

✔ The following requirements apply to text:

Normal text: Minimum contrast ratio of 7:1 against the background.
Large fonts (18 pt or 14 pt bold and larger): Minimum contrast ratio of 4.5:1.

✔ Important interactive and informative elements, like links, required fields, error messages in forms, and menu items, must be identifiable through clear color contrasts (at least 3:1) as well as additional visual features like underlines, icons, or borders.

✔ In tables, rows and cells should be clearly delineated. Contrasts of at least 3:1, bold text, or additional borders can be used to improve readability.

Accessible Colors & Contrasts – Best Practices:

1. Optimal Contrast Values: Text and Background Have a Minimum Ratio of 4.5:1

To ensure your website complies with WCAG 2.1 guidelines, the contrast between text and background should achieve a minimum ratio of 4.5:1 (for normal text) and 3:1 (for large fonts). Example of good contrast ratios:

❌ Poor: Gray text (#B0B0B0) on light gray background (#F2F2F2) → Contrast: 1.5:1

✅ Good: Dark blue text (#003366) on white background (#FFFFFF) → Contrast: 12.5:1

2. Accessible Error Messages: Improving User Experience for Colorblind Individuals

Approximately 8% of men and 0.5% of women are colorblind. This means you should not use color as the sole distinguishing feature for content or interactive elements. Examples of accessible design:

❌ Poor: Displaying an error message only in red text.

✅ Good: Red text + Error icon (⚠️) + Clear text: "Error: Please fill out this field."

3. Accessible Buttons, Links, and Forms: Contrasts for Interactive Elements

Interactive elements like buttons and forms are particularly important as they encourage user interaction. These must be highlighted through clear color contrasts and visual cues. Examples of accessible design:

❌ Poor: Using color tones that are too close together (e.g., a light blue button on a blue background).

✅ Good: Using visual cues to highlight buttons and links: borders or labels.

❗ Accessible Colors & Contrasts – Check failed? Act now!

🚀 Our Solution: Implement BFSG Accessibility Quickly and Efficiently

With our solution, we help you make your website accessible easily and efficiently:

🛠 navable Layover Tool: Immediate Accessibility Optimization for Your Website

✔ Automatic accessibility improvement (ARIA labels, contrasts, HTML lang)

✔ Progressive optimization – runs automatically in the background
(Note: Do not replace a comprehensive web analysis to ensure full accessibility.)

✔ Individual customizations by users (font, contrast, reading mode, link highlighting, filters for images/animations)

✔ Optimized keyboard navigation for easy use without a mouse

🔍 navable Audit: Accessibility Analysis of Your Website

📊 In-depth BFSG analyses for sustainable accessibility

👉 To our Product Page

📧 [email protected]

Stay Updated

Get accessibility tips and updates.

Our Top Posts: