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

[ogumen]

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

[shawnborton]

Let's also add checkboxes to the list of inputs to update:

[shawnborton]

@ogumen what is the minimum contrast ratio that we need here?

[flodnv]

This should be as easy as just changing the border color to a new one, let's see if someone external will do this.

[MelvinBot]

Triggered auto assignment to @kadiealexander (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[ogumen]

@ogumen what is the minimum contrast ratio that we need here?

@shawnborton The minimum contrast ratio of the UI components should be at least 3.00:1.

[PrashantMangukiya]

Proposed Solution

I did brief research on how border color applied to ui element. i.e. We have border: colors.gray2 within
src/styles/themes/default.js file that suppose to use for border to any ui element.

So we expect to change border: #919191 i.e. dark color. But as soon as we change border color it have side effect many places within ui because border is used as selected list color also as shown below screenshot.

As we need dark border for some input component. So we can go with this approach also. i.e. within src/styles/colors.js add one more color e.g. gray5: '#919191' and within src/styles/themes/default.js file add borderDark: colors.gray5 and thereafter we can apply borderDark to ui input component we need.

Other way is to update grey color to border: colors.gray2 --> border: colors.gray5 and correct correct color from selected list etc. where border is used. Not sure at present how many places border is used that suppose to not.

I think we can discuss and figure out which way is better to go with.

[shawnborton]

Yeah I think the solution is as simple as just changing out the border color we use to a darker shade. That being said, I do think @Expensify/design should take a look at these accessibility issues altogether and chat about them quickly internally to make sure we are finding the right new colors to use in these situations. Going to assign to myself for now.

[shawnborton]

Started a conversation over in #accessibility about this

[shawnborton]

Okay so what I would recommend doing here... in colors.js we can modify our grays a bit:

    gray4: '#7D8B8F',

change that to

    gray4: '#8B979A',
    gray5: '#6B7880',

Then from there, you will want to make sure the border color in themes/default.js uses gray4. (updated here)

Bonus points if you want to update the supporting text/label color issue, which you could just update textSupporting to gray5

Bonus points if you want to tackle the icon color issue here too, which you could just update icon to use gray4 and it will pass contrast tests.

Let me know how all of that sounds!

[MelvinBot]

Triggered auto assignment to @stephanieelliott (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[Beamanator]

Adding External again since it looks like we're opening up to proposals again!

[PrashantMangukiya]

Hi @shawnborton, I did quick test. i.e. within colors.js set gray4: '#8B979A' and within themes/default.js set border: colors.gray4 It looks like that border used in many components. e.g. within LHN also border color used as selected record.

I think we need to decide strategy how to approach this, because if we set border: colors.gray4 then it will affect many component look and feel as shown below screenshot.

At present trying to figure out best approach, finger crossed.

[shawnborton]

Good points in the above.

That being said, the hover style for the chat row seems wrong - that should not be using the same color as borders, we have a specific variable for that: activeComponentBG: colors.gray2,

I think what I would recommend then is that we have two separate border variables in themes/default.js:

• componentBorder - this is the border used for all UI components like inputs, etc. It uses gray4
• accentBorder - this is the border used for things like the right edge of the chats list, the bottom border on the chat header area, as well as the small bar next to the + in the compose box.

[PrashantMangukiya]

Temporary I set border: '#ff0000' i.e. red within themes/default.js to get the idea how many components using the border props from default.

Below are some screenshot that shows usage of border props from default.js, (this is not all list) but gives idea how many components need to update border props etc. Just sharing so it will help us during discussion.

[Beamanator]

@PrashantMangukiya are you still interested in working on this issue? If so, can you submit an updated proposal?

[PrashantMangukiya]

@Beamanator thanks for the message. At present I am not ready to work on this issue. So it will be ok to handover others. Thanks.

[Beamanator]

Thanks for the heads up @PrashantMangukiya !

[mateomorris]

Proposal

• In colors.js: Change gray4 to #8B979A and add gray5: '#6B7880'

In default.js:

• Remove border
• Add componentBorder: colors.gray4 and accentBorder: colors.gray2
• Change textSupporting: colors.gray4 to textSupporting: colors.gray5 [low] Color Contrast: Many Pages: Grey text against white background fails contrast requirements #5503
• Change icon: colors.gray3 to icon: colors.gray4 [med] Color Contrast: Many Pages: Grey icons against white background fail contrast requirements #5506

In styles.js: update sidebarLinkActive.backgroundColor from backgroundColor: themeColors.border to backgroundColor: themeColors.activeComponentBG

In styles.js, getReportActionContextMenuStyles.js, and getModalStyles, change every instance of themeColors.border to themeColors.accentBorder

Then in styles.js we can change all the inputs, dropdowns, and checkboxes to use themeColors.componentBorder:

• expensiTextInputContainer
• textInput
• expensiPickerContainer
• chatItemComposeBoxColor
• textInputCompose
• selectCircle
• checkboxContainer

[stephanieelliott]

This is on Upwork here: https://www.upwork.com/jobs/~019b45fec6e1a6cdcc

[Beamanator]

@mateomorris I think your proposal looks fantastic! I'll assign this to you, please feel free to submit a PR when you have a chance :)

[parasharrajat]

There is nothing much to review in the code, it's mostly about swapping the variable with correct values. So I would leave this to the CME to review. See More. cc: @Beamanator

Thanks.

[Beamanator]

Sounds good, thanks for the heads up @parasharrajat 💪

[stephanieelliott]

Hired on Upwork, thanks @mateomorris!

[Beamanator]

Still under discussion in slack internally here

[shawnborton]

As discussed here, we're going to close the PR but we want to make sure @mateomorris gets paid for his work. @stephanieelliott can you go ahead and make sure Mateo gets paid and then we can close this one out? Thanks!

[stephanieelliott]

Hey @mateomorris looks like you never accepted the offer we sent for this job. Will you accept in Upwork (should be able to find it here), then let me know so I can issue payment? Thanks!

[mateomorris]

Thanks @stephanieelliott! Accepted

[stephanieelliott]

All set and paid in Upwork. Thanks @mateomorris!