WAVE Accessibility - Contrast Ratio Fixes

[nchanyal]

• Fixes Dev: WAVE Accessibility - Contrast Ratio Fixes #2533

What changes did you make?

• Change asterisks color in TDM Feedback Form page
• Change validation text color in Create New Account page

Why did you make the changes (we will use this info to test)?

• "Ensures the TDM calculator is accessible to users with visual impairments and meets legal compliance requirements for public-facing applications."

Screenshots of Proposed Changes Of The Website (if any, please do not screen shot code changes)

Visuals before changes are applied

Feedback Page

Without annotations

With WAVE annotations:

Create Account Page

Without WAVE annotations:

With WAVE annotations:

Visuals after changes are applied

Feedback Page

Without annotations

With WAVE annotations

Create Account Page

Without annotations

With WAVE annotations

[ryanfchase]

@nchanyal I suggest we create and use new entries in client/src/styles/theme.js under colors.secondary:

• darkGrey: #4A4A4A
• slateGrey: #525252
• darkRed: #990000

This will allow you to avoid using hard-coded values. Please make this change and also be prepared to discuss your change to the react-router-dom includes at the upcoming dev meeting on Wednesday (2025-11-12).

[nchanyal]

@ryanfchase Sure, I'll add those changes and update the branch.

If you have any particular questions about the changes made to react-router-dom, feel free to ask them here, but the changes I made have actually recently been merged by John in PR #2757. When I was working on my issue, I couldn't run the app without replacing the useBlocker hook, so that's what I did to complete the ticket. I apologize if that's not what's usually done, as this was the first time I came across a bug before starting a ticket.

[ryanfchase]

Looking good, approved 👍🏼

[nchanyal]

@ryanfchase Thanks. Are there any changes you wanted? The PR says you're requesting a change.

[ryanfchase]

Oops, didn't mean to request changes. But thank you for providing screenshots. This PR is good to merge.

[geolunalg]

Looks good!