colin
/
ploughshares
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ploughshares/accessibility-improvements-...

2.6 KiB
Raw Blame History

Accessibility Improvements Update

Color Contrast Enhancements

We've made several improvements to address readability concerns with the blue background:

  1. Lightened the primary blue color:

    • Changed from #1b365d (original Ploughshares blue) to #2d5b96 (lighter shade)
    • Kept the original as --ploughshares-dark-blue for elements that need darker contrast
    • Added a new --ploughshares-light-blue: #6b93c3 for even lighter contrast needs

  2. Improved color variable usage:

    • Updated all references to use the new color variables consistently
    • Ensured hover states use appropriate darker variants for visual feedback

  3. Enhanced text contrast:

    • Verified all text/background combinations meet WCAG 2.1 AA standards (4.5:1 minimum)
    • Added explicit color: white declarations to all button styles to ensure proper contrast

Interactive Contrast Checker Tool

Added a new interactive contrast checker tool to help test and verify color combinations:

  1. Features:

    • Real-time contrast ratio calculation
    • WCAG AA and AAA compliance indicators
    • Color pickers for foreground and background colors
    • Sample text preview with selected colors
    • Toggle button in bottom-right corner of every page

  2. Implementation:

    • Created contrast-checker.js with self-contained functionality
    • Added to base template so it's available on all pages
    • Follows WCAG formula for calculating luminance and contrast ratios

  3. Usage:

    • Click the "Contrast Checker" button in the bottom right of any page
    • Select foreground and background colors using the color pickers
    • View the calculated contrast ratio and compliance status
    • Test different color combinations for accessibility

Navigation Improvements

  1. Added Accessibility Page Link:

    • Added a direct link to the accessibility testing page in the main navigation
    • Includes appropriate icon and ARIA attributes

  2. Testing Tools:

    • Created run_lighthouse_test.sh with instructions for running Lighthouse tests
    • Updated the accessibility testing page with examples of the new color scheme

How to Test the Changes

  1. Visit the application at http://localhost:5005
  2. Use the contrast checker tool by clicking the button in the bottom right corner
  3. Navigate to the Accessibility page through the main navigation
  4. Check the color samples on the accessibility testing page
  5. Run Lighthouse tests using the provided script: ./run_lighthouse_test.sh

These improvements ensure better readability throughout the application while maintaining the Project Ploughshares brand identity.