[Medium] Chrome: Color Contrast: Insufficient color contrast for error messages text.

[SumitDiyora]

Action Performed:

1. Using Chrome+JAWS, open URL: staging.new.expensify.com
2. Navigate to Settings > Payments > Add payment method > Debit card.
3. Navigate to the "Save" button and activate it with empty form fields.
4. Observe that the analyser reports that the contrast ratio is not sufficient for error messages.

Expected Result:

The "Please enter a valid name", "Please enter a valid debit card number", "Please enter a valid expiration date", etc. error messages should have a contrast ratio against the page background of 4.5:1 or greater.

Actual Result:

Background/foreground color combinations with an insufficient contrast ratio was found in the text. For instance, the #FC3826 "Please enter a valid name", "Please enter a valid debit card number", "Please enter a valid expiration date", etc. error messages have an insufficient color contrast ratio of 3.7.1 with a #FFFFFF background.

Other occurrences

Same issue repro on PR #9207, #9369, #9056
Same issue repro on PR #9486 for error messages of phone number field.

Workaround:

Yes

Area issue was found in:

Add a debit card

Failed WCAG checkpoints

1.4.3

User impact:

It will be a bit confusing or there will be difficult to perceive the content for the low vision users if the color contrast ratio does not meet the minimum requirement.

Suggested resolution:

Ensure that each text/background color combination presents a contrast ratio of at least 4.5:1.

Platform:

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.49-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
Reference link: https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html
Issue reported by: Sumit

[melvin-bot]

@SumitDiyora, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.