Skip to content

[med] Color Contrast: Many Pages: Grey icons against white background fail contrast requirements #5506

Description

@ogumen

Action Performed:

Prerequisite: user is logged in with valid credentials.

  1. Using Chrome, open https://staging.new.expensify.com/
  2. Click on user icon from the top left.
  3. Measure the color contrast ratio of the grey icons against white background.

Expected Result:

The visual presentation of meaningful graphical objects or interactive components should have a contrast ratio of at least 3.00:1 with the surrounding background color.

Actual Result:

The grey icons (#C6C9CA) on white background (#FFFFFF) have a color contrast ratio of 1.66:1.

Other occurrences:

  1. Request Money -> The grey close button (#C6C9CA) against white background (#FFFFFF) has a color contrast ratio of 1.66:1.
  2. Split bill -> The grey close button (#C6C9CA) against white background (#FFFFFF) has a color contrast ratio of 1.66:1.
  3. New chat overlay -> The grey close button (#C6C9CA) against white background (#FFFFFF) has a color contrast ratio of 1.66:1.
  4. Change password -> The grey close button (#C6C9CA) against white background (#FFFFFF) has a color contrast ratio of 1.66:1.
  5. Preferences overlay -> The grey back and close buttons (#C6C9CA) against white background (#FFFFFF) have a color contrast ratio of 1.66:1.
  6. New group overlay -> The grey close button (#C6C9CA) against white background (#FFFFFF) has a color contrast ratio of 1.66:1.
  7. Chat -> All action button icons for messages, all icons in the message bar, call and pin buttons at top of chat, search icon next to profile button are grey (#C6C9CA) resulting in a color contrast ratio of 1.66:1 against white background.

Workaround:

No workaround

Area issue was found in:

Settings overlay, Request money overlay, Split bill overlay, New chat overlay, Change password overlay, Preferences overlay, New group overlay, Chat page

Failed WCAG checkpoints

1.4.11

User impact:

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

Suggested resolution:

Use a darker shade of grey for the icons to achieve a color contrast ratio of at least 3.00:1. One example of color to use is #8D9596, which will give a color contrast ratio of 3.05: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:
Bug5182543_Change_password-Grey_close_button_fails_color_contrast_against_white_background
Bug5182543_Chat_-_grey_icons_on_white_background_fail_contrast_requirements
Bug5182543_Color_Contrast-Create_New_Group-Grey_close_icon_on_white_background_fails_contrast
Bug5182543_Grey_icons_fail_color_contrast
Bug5182543_New_chat-Grey_close_button_fails_color_contrast_against_white_background
Bug5182543_Preferences_-_grey_icons_on_white_background_fail_contrast_requirements
Bug5182543_Request_money-Grey_close_button_fails_color_contrast_against_white_background
Bug5182543_Split_bill-Grey_close_button_fails_color_contrast_against_white_background

View all open jobs on GitHub

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions