hackforla / hackforla/tdm-calculator
Epic: WAVE Contrast Error: Very low contrast
- Dominant language
- JavaScript
- Stars
- 68
- Forks
- 47
- Avg merge
- 3d 9h
- Merged PRs (30d)
- 25
Description
### Overview
We need to make issues that will create, apply and document a solution for Very low contrast so that it can get fixed on the site and documented for future developers
### Details
Category: Contrast Error
Name: Very low contrast
(The Accessibility wiki for this Contrast Error has no solution yet)
known pages (there might be others):
1. Create Account
2. Forgot Password
3. Feedback
4. Terms and Conditions
This epic will do the following
- create a new issue to fix the problem on one page and update the wiki page with the solution, once accepted.
- create any follow-on issues to fix any other occurrences of this problem
### Action Items
- [x] Go to the Solutions Index (resource 1.02) and add the link to the specific page for this problem 1.02.01
- [ ] Copy the first issue template (resource 1.04)
- [ ] Use the template content to create a new issue for the `Create Account` page
- [ ] Add the following labels
- role: front-end
- size: missing
- p-feature: Create Account
- feature: Accessibility
- level: missing
- deck: add to staging
- ready for dev lead
- priority: MUST HAVE
- [ ] add milestone: launch
- Customize the draft issue resoures
- [ ] In this issue use the content in resource 1.03.01 (Product Documentation) to update the draft's issue resource 1.02.01, 1.02.02
- [ ] In this issue use the content in resource 1.01.01 (spreadsheet) to update the link to the spreadsheet in draft issue's
- [ ] open the spreadsheet link and find the row number, and add it to the draft issues's resource 1.03.01
- [ ] In this issue, add issue to Sub Issue section below
- [ ] Copy the second issue template (resource 1.05)
- [ ] Use the template content to create a new issue(s) for the remaining pages under Known pages above
- [ ] Customize the draft
- [ ] Add the following labels
- role: front-end
- size: missing
- p-feature: [REPLACE WITH. NAME OF PAGE]
- feature: Accessibility
- level: missing
- deck: add to staging
- ready for dev lead
- priority: MUST HAVE
- Customize the draft issue resoures
- [ ] In this issue use the content in resource Product Documentation 1.03.01 to update the draft's issue resource 1.02.01, 1.02.02
- [ ] In this issue use the content in resource 1.01.01 (spreadsheet) to update the link to the spreadsheet in draft issue's resource 1.03
- [ ] open the spreadsheet link and find the row number, and add it to the draft issues's resource 1.03.01
- [ ] Once both those issues are closed, run WAVE and check all other pages for this Contrast Error; ignore all other errors and alerts. Check user interactions on the page to ensure that the contrast errror isn't hidden by an interaction. Check one of the following below:
- [ ] No additional instances of this Contrast Error found
- [ ] New instances of these Contrast Error found
- [ ] Make additional issues
### Resources
- 1.01 [TDM WAVE Accessibility Audit Spreadsheet, tab: 2. Audit Log](https://docs.google.com/spreadsheets/d/1qiAqR9LH-Gd4LO3aOs0yUy174o5LOmnuU6Bz671mKsY/edit?gid=0#gid=0)
- 1.01.01 [TDM WAVE Accessibility Audit Spreadsheet, tab: 2. Audit Log, filter: Contrast Error: Very low contrast](https://docs.google.com/spreadsheets/d/1qiAqR9LH-Gd4LO3aOs0yUy174o5LOmnuU6Bz671mKsY/edit?gid=0#gid=0&fvid=867405545)
- 1.02 [WCAG: Known Issues and Solutions](https://hackforla.github.io/accessibility/known-issues-and-solutions)
- 1.02.01 https://hackforla.github.io/accessibility/known-issues-and-solutions/solutions-index/contrast-errors-very-low-contrast
- 1.03 WIKI: Product Documentation: https://github.com/hackforla/tdm-calculator/wiki/Product-Documentation
- 1.03.01 WIKI: Product Documentation, Create Account , page: https://github.com/hackforla/tdm-calculator/wiki/Registration
- 1.03.02 WIKI: Product Documentation, Forgot Password , page: https://github.com/hackforla/tdm-calculator/wiki/Forgot-Password
- 1.03.03 WIKI: Product Documentation, Feedback , page: https://github.com/hackforla/tdm-calculator/wiki/Feedback
- 1.03.04 WIKI: Product Documentation, Terms & Conditions , page: https://github.com/hackforla/tdm-calculator/wiki/Terms-and-Conditions
#### 1.04 first issue Template
Title
```
Dev: fix Contrast Error: Very low contrast on [REPLACE WITH PAGE NAME] page & write solution
```
Body
```
### Overview
We need to fix the Contrast Error: Very low contrast on [REPLACE WITH PAGE NAME] so that page can be WCAG compliant.
#### Details
Category: Contrast Error
Name: Very low contrast
(The Accessibility wiki for this Alert has no solution yet)
Page that will be worked on:
[REPLACE WITH NAME OF PAGE NAME]
### Action Items
- [ ] Review wiki page: Accessibility, How to run the WAVE browser extension (Resource 1.01)
- [ ] Install the WAVE browser extension
- [ ] Log in as the user indicated (resource 1.02.01)
- [ ] navigate to the page you are going to fix (resource 1.02.02)
- [ ] Open the TDM WAVE Accessibility Audit Spreadsheet, for this Contrast Error (resource 1.03) and find the row that relates to this issues page.
- [ ] Run the WAVE extension with no elements focused, or clicked (resource 1.04)
- [ ] Find the Contrast Error: Very low contrast WAVE shown in the Spreadsheet (1.03)
- [ ] This Contrast Error has been resolved on other pages, so look at the other issues where this was solved (resource 1.05.01 see Project Team Error guidance section)
- [ ] Apply solution
- [ ] write and add the appropriate details to the `Project Team Solution` section (resource 1.05.01.01)
- [ ] Submit PR (include link to `Project Team Solution` section (resource 1.05.01.01)
- [ ] Add PR to spreadsheet in PR column next to Contrast Error (resource 1.03)
- [ ] On this issue
- [ ] Add labels:
- `ready for accessibility lead`
- `ready for product`
- [ ] Change status to: `Technical Review`
- [ ] Get sign-off on WIKI page by
- [ ] Accessibility lead
- [ ] Product lead
- [ ] release the dependencies on
- [INSERT LINK TO NEXT ISSUE(s)]
- #2898
### Resources/Instructions
- 1.01[How to run the WAVE browser extension](https://hackforla.github.io/accessibility/getting-started/wave-browser-extension/)
- 1.02 Application details
- 1.02.01 User Profile Required: [REPLACE WITH USER TYPE: visitor (not logged in)/user/admin/security admin/]
- 1.02.02 Page URL: http://tdm-dev.azurewebsites.net/[REPLACE WITH PAGE URL]
- Requires sign in: [REPLACE WITH TRUE OR FALSE]
- Can access page directly from URL: [REPLACE WITH TRUE OR FALSE]
- 1.03 [TDM WAVE Accessibility Audit Spreadsheet, tab: 2. Audit Log, filter: Contrast Alert: Very low contrast](https://docs.google.com/spreadsheets/d/1qiAqR9LH-Gd4LO3aOs0yUy174o5LOmnuU6Bz671mKsY/edit?gid=0#gid=0&fvid=867405545)
- Spreadsheet Row(s): [REPLACE WITH ROW NUMBERS]
- 1.04 https://hackforla.github.io/accessibility/getting-started/perform-wave-audit
- 1.05 [Accessibility Known Issues Index](https://hackforla.github.io/accessibility/known-issues-and-solutions/solutions-index/)
- 1.05.01 [WAVE Known Accessibility Issue: Contrast Error: Very low contrast](https://hackforla.github.io/accessibility/known-issues-and-solutions/solutions-index/contrast-errors-very-low-contrast)
- 1.05.01.01 [WAVE Known Accessibility Issue: Contrast Error: Very low contrast, section: project-team-solution](https://hackforla.github.io/accessibility/known-issues-and-solutions/solutions-index/contrast-errors-very-low-contrast/#project-team-solution)
Additional reading (optional)
- TDM [Accessibility Audits](https://hackforla.github.io/accessibility/)
#### Slides
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg)
- [Staging Deck, slide]
- Release deck
- [2026-01-20 Release deck, slide ]
```
#### 1.05 Second Issue Template
Title
```
Dev: fix Contrast Error: Very low contrast on [REPLACE WITH PAGE NAME] page
```
Body
````
### Overview
We need to fix the Contrast Error(s): Very low contrast on [REPLACE WITH PAGE NAME] so that page can be WCAG compliant.
#### Details
Category: Contrast Error
Name: Very low contrast
(The Accessibility wiki for this Contrast Error has a solution)
Page that will be worked on:
[REPLACE WITH NAME OF PAGE NAME]
### Action Items
- [ ] Review wiki page: Accessibility, How to run the WAVE browser extension (Resource 1.01)
- [ ] Install the WAVE browser extension
- [ ] Log in as the user indicated (resource 1.02.01)
- [ ] navigate to the page you are going to fix (resource 1.02.02)
- [ ] Open the TDM WAVE Accessibility Audit Spreadsheet, for this Contrast Error (resource 1.03) and find the row that relates to this issues page.
- [ ] Run the WAVE extension with no elements focused, or clicked
- [ ] Find the Contrast Error referenced in the Spreadsheet (1.03)
- [ ] This Contrast Error has been resolved on other pages, so review `Project Team Solution` section (resource 1.04.01.01)
- [ ] Apply solution
- [ ] Submit PR
- [ ] Add PR to spreadsheet in PR column next to Contrast Error (resource 1.03)
- [ ] On this issue
- [ ] Add labels:
- `ready for accessibility lead`
- [ ] Change status to: `Technical Review`
- to the epic #2898
- [ ] Add the label `ready for product`
- [ ] Add this comment
```
- [#REPLACE WITH THIS ISSUE NUMBER] is closed. Please review to see if there are any remaining instances of this problem
```
### Resources/Instructions
- 1.01[How to run the WAVE browser extension](https://github.com/hackforla/accessibility/blob/main/docs/getting-started/wave-browser-extension.md)
- 1.02 Application details
- 1.02.01 User Profile Required: [REPLACE WITH USER TYPE: visitor (not logged in)/user/admin/security admin/]
- 1.02.02 Page URL: http://tdm-dev.azurewebsites.net/[REPLACE WITH PAGE URL]
- Requires sign in: [REPLACE WITH TRUE OR FALSE]
- Can access page directly from URL: [REPLACE WITH TRUE OR FALSE]
- 1.03 [TDM WAVE Accessibility Audit Spreadsheet, tab: 2. Audit Log, filter: Contrast Alert: Very low contrast](https://docs.google.com/spreadsheets/d/1qiAqR9LH-Gd4LO3aOs0yUy174o5LOmnuU6Bz671mKsY/edit?gid=0#gid=0&fvid=867405545)
- Spreadsheet Row(s): [REPLACE WITH ROW NUMBERS]
- 1.04 [Accessibility Known Issues Index](https://github.com/hackforla/accessibility/blob/main/docs/known-issues-and-solutions/solutions-index/index.md)
- 1.04.01 [WAVE Known Accessibility Issue: Contrast Error: Very low contrast](https://hackforla.github.io/accessibility/known-issues-and-solutions/solutions-index/contrast-errors-very-low-contrast)
- 1.04.01.01 [WAVE Known Accessibility Issue: Contrast Error: Very low contrast, section: project-team-solution](https://hackforla.github.io/accessibility/known-issues-and-solutions/solutions-index/contrast-errors-very-low-contrast/#project-team-solution)
Additional reading (optional)
- https://hackforla.github.io/accessibility/
#### Slides
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg)
- [Staging Deck, slide ]
- Release deck
- [2026-01-20 Release deck, slide ]
````
#### Slides
- [Staging Deck](https://docs.google.com/presentation/d/1crZ3IxqA4hAu3qzD7ns93Ieuqjwh6wyEtuX_46cP-fg)
- [Staging Deck, slide 2897] - N/A
- Release deck
- [2026-01-20 Release deck, slide 2897] - N/A
Contributor guide
Research direction
Start with the WAVE browser-extension instructions, the filtered audit spreadsheet, and the Very low contrast solution page. Create the page-specific issues for Create Account, Forgot Password, Feedback, and Terms and Conditions using the provided templates, then document the accepted solution and verify remaining occurrences across the listed pages.
Written by the indexing model from the issue text.
Assessment
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 20/100