Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[low] Color Contrast: Change Password: The focus outline does not meet the contrast ratio of 3:1 #5646

Closed
ogumen opened this issue Oct 5, 2021 · 0 comments

Comments

@ogumen
Copy link

ogumen commented Oct 5, 2021

Action Performed:

Prerequisite: the user is logged in with valid credentials.

  1. Using Chrome, open https://staging.new.expensify.com/
  2. Click on the user icon in the top left.
  3. Click on the button "Change password", then enter the Current Password, New Password, Confirm New Password details accordingly.
  4. Press Tab key to focus the button "Save".
  5. Measure the contrast ratio of the blue focus outline against the green button.

Expected Result:

The focus outline on the interactive elements should meet the minimum color contrast ratio requirements of 3:1.

Actual Result:

The blue visible focus outline of the "Save" button (#0185FF) against the green button background (#03D47C) has a color contrast ratio of 1.84:1.

HTML:
<div dir="auto" class="css-901oao r-lrvibr" style="color: rgb(255, 255, 255); font-family: GTAmericaExp-Regular; font-size: 13px; font-weight: 700; text-align: center;">Save</div>

CSS:
{ background-color: rgb(3, 212, 124); border-radius: 8px; border-width: 0px; height: 40px; opacity: 1; padding-right: 12px; padding-left: 12px; }

Other occurrences:

  1. Request Money ->The visible focus outline on the "Next" button does not meet the minimum color contrast ratio requirements of 3:1 with the same color pair used.
  2. Split bill ->The visible focus outline of the interactive element 'Next' button does not meet the minimum color contrast ratio requirements of 3:1 with the same color pair used.

Workaround:

No workaround

Area issue was found in:

Change password page, Request money overlay, Split bill overlay

Failed WCAG checkpoints

1.4.11

User impact:

The low-vision and color-blind users might not be able to see the focus outline of the mentioned elements.

Suggested resolution:

Use a darker shade of blue for the outline, such as #0061BD, which will give a color contrast ratio of 3.10:1 against the same green button 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:
Bug5184304_5184304-Change_Password-The_focus_outline_does_not_meet_the_contrast_ratio
Bug5184304_Request_Money-The_focus_outline_does_not_meet_the_contrast_ratio_other_
Bug5184304_Split_Bill-The_focus_outline_does_not_meet_the_contrast_ratio_other_

View all open jobs on GitHub

@ogumen ogumen added this to the Accessibility Audit milestone Oct 5, 2021
@ogumen ogumen changed the title Color Contrast: Change Password: The focus outline does not meet the contrast ratio of 3:1 [low] Color Contrast: Change Password: The focus outline does not meet the contrast ratio of 3:1 Oct 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants