Skip to content

Latest commit

 

History

History
61 lines (40 loc) · 2.41 KB

accessibility-improvements.md

File metadata and controls

61 lines (40 loc) · 2.41 KB

Accessibility Improvements

Contrast Ratio Enhancements

This document outlines the accessibility improvements made to address contrast ratio issues identified by Lighthouse.

Background

Lighthouse reported insufficient contrast ratios for several UI elements:

Background and foreground colors do not have a sufficient contrast ratio.
Low-contrast text is difficult or impossible for many users to read.

The failing elements included:

  • "Vokabeln", "Grammatik", "Kultur", "Idiome" in exercise chips
  • "Worterfassung" text
  • Various text elements against the background

Changes Made

  1. Primary Color Adjustment:

    • Changed --primary from 0 84.2% 60.2% to 0 84.2% 45%
    • Changed --primary-foreground from 0 0% 98% to 0 0% 100%
    • This creates a darker red background with pure white text, significantly improving the contrast ratio

  2. Muted Text Enhancement:

    • Changed --muted-foreground from 240 3.8% 46.1% to 240 5% 35%
    • This makes muted text darker and more readable against light backgrounds

  3. Destructive Color Consistency:

    • Updated --destructive to match the new primary color
    • Changed --destructive-foreground to match the new primary-foreground

Benefits

These changes improve the application in several ways:

  1. Better Accessibility: The enhanced contrast makes text more readable for all users, including those with visual impairments or those using the application in challenging lighting conditions.

  2. WCAG Compliance: The changes help meet the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA requirements, which specify a minimum contrast ratio of 4.5:1 for normal text.

  3. Consistent Design: By updating related color variables together, we maintain design consistency throughout the application.

Testing

To verify these improvements:

  1. Run Lighthouse accessibility tests again to confirm the contrast issues are resolved
  2. Test the application with various screen brightness settings
  3. Consider using tools like the Chrome DevTools' color picker to check contrast ratios manually

Future Considerations

When making design changes or adding new UI elements:

  1. Always check contrast ratios using tools like the Chrome DevTools or dedicated contrast checkers
  2. Consider users with different visual abilities
  3. Test the application under various lighting conditions
  4. Maintain the established color system to ensure consistency