60 lines
2.6 KiB
Markdown
60 lines
2.6 KiB
Markdown
# 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. |