[low] Color Contrast: Many Pages: Grey text against white background fails contrast requirements

[ogumen]

Action Performed:

1. Using Chrome, open https://staging.new.expensify.com/
2. Fill out the "Enter your phone or email" field with a valid email address.
3. Click on "Continue" button.
4. Open the received Magic Link email.
5. Measure the color contrast ratio of the grey "Concierge" text against white background.

Expected Result:

The contrast ratio of the text against the background should be at least 4.50:1 for small text and 3.00:1 for large text (14pt bold or 18 pt+).

Actual Result:

This is a small text (13px=9.75pt). The grey text (#888888) against white background (#FFFFFF) has a color contrast ratio of 3.54:1.

HTML:
<font color="#888888"><br> – Concierge</font>

CSS:
.a3s, .g6 { font: small/ 1.5 Arial,Helvetica,sans-serif; }

Other occurrences:

1. On Preferences overlay the grey text "This will display all chats by default, sorted by most recent, with pinned items at the top" (#7D8B8F) against white background (#FFFFFF) has a color contrast ratio of 3.52:1.
2. On About overlay the grey version number (#7D8B8F) on white background (#FFFFFF) has a color contrast ratio of 3.52:1.
3. On New Chat overlay the grey email addresses or phone numbers (#7D8B8F) on white background (#FFFFFF) have a color contrast ratio of 3.52:1.
4. On New Group overlay the grey email addresses or phone numbers (#7D8B8F) on white background (#FFFFFF) have a color contrast ratio of 3.52:1.
5. On Settings > Change Password overlay the grey password requirements text (#7D8B8F) on white background (#FFFFFF) has a color contrast ratio of 3.52:1.

Workaround:

No workaround

Area issue was found in:

Content of the email, Preferences overlay, About overlay, New chat overlay, New group overlay, Change password overlay

Failed WCAG checkpoints

1.4.3

User impact:

The low-vision and color-blind users might not be able to see the text.

Suggested resolution:

Use a darker shade of grey for the text color to achieve a color contrast ratio of at least 4.50:1. One example of color to use is #757575, which will give a color contrast ratio of 4.60:1 against white background.

Platform:

Where is this issue occurring?

• Web

Version Number:
**Reproducible in staging?:**Yes
Reproducible in production?:
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:

View all open jobs on GitHub