Color Contrast: Many Pages: White text on green fails contrast ratio

[nbhardwaj-del]

Action Performed:

1. Using Windows + Chrome, open the page https://new.expensify.com/
2. Measure the contrast of the white text on the green button 'Continue'.

Other occurrences:

1. On Settings - Subscription: the button 'Add payment card'
2. On Settings - Save the world - I know a teacher: the button 'Let's do this!'
3. On Settings - Save the world - I am a teacher 'Update email address'
4. On Settings - Save the world - Intro your school principal: the button 'Let's start'
5. On Settings - Security - Two-factor authentication: the button 'Next'
6. On Account - Display name: the button 'Save'
7. On Account - Contact methods: the button 'New contact method'
8. On Settings - Profile - Legal Name: the button 'Save'
9. On Settings - Profile - DOB: the button 'Save'
10. On Settings - Profile - Phone number: the button 'Save'
11. On Settings - Profile - Address: the button 'Save'
12. On Workspaces - Duplicate Workspace: the buttons 'Next' and 'Continue'
13. On Workspaces - Overview - Expensy Policy: the button 'Save'
14. On Workspaces - Overview - Workspace Name: the button 'Save'
15. On Workspace - Categories - Add category: the button 'Sav
16. On Workspace - Categories: the button 'Add category'
17. On Workspace - Workflows - Edit Approval Workflow: the button 'Save'
18. On Workspace - Workflows - Expenses From: the button 'Next'
19. On Workspaces - Distance Rates: the button 'Add rate'
20. On Workspaces - Expensify Card: the button 'Issue new card'
21. On On Workspaces - Expensify Card - Confirm currency and country: the button 'Confirm'
22. On On Workspaces - Expensify Card - Bank info: the button 'Next
23. On Workspace - Company Card - Add Cards: the buttons 'Learn more' and 'Add cards'
24. On Workspace - Company Card - Add Cards: the button 'Next'
25. On Workspace - Create Workspace - Confirm Workspace: the button 'Save'
26. On Workspace - Create Workspace - Invite new members: the button 'Next'
27. On Create Report - Restricted: the button 'Add payment card'
28. On Create Report - Add payment card: the button 'Add payment card'
29. On Reports - No expenses to submit: the button 'Create report'
30. On Track Distance: the button 'Next'
31. On Send Invoice
32. On Book Travel
33. On Wallet - Add bank account: the button 'Next'
34. On Create Expense: the buttons on all dialogs
35. On Paid Expense details flow
36. On Reports flow
37. On Terms & Conditions: the texts in the footer
38. On Privacy Policy: the texts in the footer
39. On Chat flow

Expected Result:

Regular size text has a minimum contrast ratio of 4.5:1, and Large text (24 px, or 18.5 px+bold) has a minimum contrast ratio of 3:1

Actual Result:

The text color #FCFBF9 on a background of #03D47C results in a contrast ratio of approximately 1.9:1 which fails the WCAG 2.1 AA minimum of 4.5:1 for normal text. As a result, users with low vision or color blindness may not be able to read the text.

HTML:

Continue

Area issue was found in:

Landing Page

Failed WCAG checkpoints

WCAG 1.4.3 Contrast (Minimum)
https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum

User impact:

People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable even if the person does not see the full range of colors. It also works for the rare individuals who see no color.

Suggested resolution:

Use a different shade of green to meet the contrast ratio of at least 4.50:1.

Environment(s)

Windows Windows 10 - Chrome

Screenshots/Videos

Version Number: NA
Reproducible in staging?: NA
Reproducible in production?: Yes
Email or phone of affected tester (no customers): NA
Logs: https://stackoverflow.com/c/expensify/questions/4856 NA
Notes/Photos/Videos: Any additional supporting documentation Yes
Expensify/Expensify Issue URL: https://platform.applause.com/company/12102/products/36605/community-issues/6997219
Issue reported by: NA
Slack conversation: NA

[melvin-bot]

This issue has not been updated in over 15 days. eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[melvin-bot]

@nbhardwaj-del, 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.