App: [med] Color Contrast: Many Pages: Input controls grey border against adjacent white fails contrast

Action Performed:

Prerequisite: user has created personal account and is logged into same.

1. Using Chrome, open https://staging.new.expensify.com/
2. Click on the new chat floating action icon button (+) in the left side panel and select ‘New Group’
3. In the ‘New Group’ side-panel overlay, inspect the contrast ratio of the light grey border around the search input field against the adjacent white background.

Expected Result:

The graphical information required to identify user interface components must have a contrast ratio of at least 3.00:1 against adjacent colors. In this case, the input field is visually identified by a light grey border that shows its position, size and lets users know where to click, tap, etc. The border color must have a contrast ratio greater that 3.00:1 against the adjacent white background.

Actual Result:

The light grey border (#ECECEC) against the adjacent white background (#FFFFFF) has a contrast ratio of 1.18:1, rendering it almost invisible (1.0:1).

HTML: <input placeholder="Name, email, or phone number" autocapitalize="sentences" autocomplete="on" autocorrect="on" dir="auto" spellcheck="true" type="text" class="css-11aywtz r-tz77pi" value="" style="background-color: rgb(255, 255, 255);border-color: #ececec;border-radius: 8px;border-width: 1px;color: rgb(11, 27, 52);font-family: GTAmericaExp-Regular;font-size: 15px;height: 42px;padding: 10px 12px;vertical-align: middle;">

CSS: element.style { background-color: rgb(255, 255, 255); border-color: #ececec; ... }

Other occurrences:

1. The grey circle for custom checkboxes adjacent to contact names in the panel has the same color contrast ratio.
2. Chat:

• Search panel search field
• Emoji panel search field
• Chat Message field

Workaround:

No workaround

Area issue was found in:

Create new group overlay, Chat page

Failed WCAG checkpoints

1.4.11

User impact:

Many colorblind and other sight impaired users will not identify the area as a control and may not know where to click.

Suggested resolution:

Use a darker shade of grey for the border color, such as #919191, which will give a color contrast ratio of 3.15:1.

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