Enhance Color Contrast for Color Blindness (FEA110)
| Document Type | Feature Description |
| Feature | FEA110 |
| Author | Noora Kuikka |
| Version | 0.2 |
| Date | 19.02.2024 |
Description
This feature aims to improve the accessibility of the web application for users with color blindness. By enhancing the color contrast between text and background elements, the feature ensures that users with color vision deficiencies can easily read and understand the content displayed on the web app.
Feature-related restrictions, requirements, and use cases
| Linked Use Cases | Use Case |
| Linked Requirements | ReqID list |
User Stories related to the feature
| User Story ID | Description | Affected Feature |
|---|---|---|
| US046 | As a user with color blindness, I want the web app to have sufficient color contrast between text and background elements, so that I can easily read and understand the content. | FEA110 |
Links to issues:
User Interface MockUp
WCAG 2.2 is the latest web accessibility standard, outlining guidelines for creating content usable by everyone, regardless of abilities. It provides three levels of conformance:
- Level A: The minimum level for basic accessibility.
- Level AA: The recommended level, meeting most users' needs.
- Level AAA: The highest level, addressing even more complex needs.
In this project, Level AA is the target. It covers essential areas like:
- Screen reader compatibility: Text alternatives for images, clear navigation, and keyboard accessibility.
- Color contrast: Ensuring adequate contrast between text and background for readability.
- Logical structure: Using semantic HTML to convey content meaning.
- Focus management: Making keyboard focus clear and predictable.
WCAG contract checkers are browser extensions that scan web pages for potential accessibility issues based on the WCAG guidelines.
- Analyze color contrast, ensuring text is readable for everyone.
- Check for missing alternative text for images and other non-text content.
- Identify keyboard navigation problems and ensure they work smoothly.
- Scan for structural issues like proper heading usage and semantic HTML.
Implementation
Information will be added when development begins.
Testing / possible approval criteria
| Test Case | Description |
|---|---|
| Acceptance Test Case | Acceptance Test |
| Functional System Test Case | Test Case |
| Security Test Case | Test Case |