# 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.