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

[med] Color Contrast: Many Pages: Placeholder text fail contrast requirements. #8430

Closed
Stutikuls opened this issue Apr 1, 2022 · 1 comment

Comments

@Stutikuls
Copy link

Stutikuls commented Apr 1, 2022

Action Performed:

  1. Using Chrome, open URL staging.new.expensify.com
  2. Select (+) button.
  3. After expanding the + button select new group control.
  4. New group window is appearing, Notice placeholder text for the search button.
  5. Measure the color contrast ratio for the placeholder text (Name. email or phone no.)

Expected Result:

The contrast ratio for the placeholder should be at least 4.5:1.

Actual Result:

The contrast ratio for the placeholder text is 1.7:1.

Other Occurrences:
Similar type of issues repro on PR #8226 #8019, #8452, #8448, #8375, #8604, #8694, #8535, #8730, #8730, #8778, #8818, #8828, #9144, #9351, #9400, #9031 #9472

Similar type of issues repro on PR #9486 for the placeholder text of all form fields.
Similar type of issues repro on PR #7702 for the placeholder text of "Search" fields.
Similar type of issues repro on PR #9534 for the placeholder text of "Write Something" text field.
Similar type of issues repro on PR #9534 for the placeholder text of "Write Something" text field and for the placeholder text of "Search" text field which becomes available after clicking on emoji button..

Workaround:

No

Area issue was found in:

New group window and all places where placeholder text is placed.

Failed WCAG checkpoints

1.4.3

User impact:

Those who have low vision or color deficiencies may not be able to see the text with low contrast and will not know that this element is there.

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 ##757575 which will give a color contrast ratio of 4.5:1.

Platform:

  • Web
  • iOS
  • Mobile Web

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

7530_CCA fail for placeholder text

@melvin-bot
Copy link

melvin-bot bot commented Jun 17, 2022

@Stutikuls, this Monthly task hasn't been acted upon in 6 weeks; closing.

If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.

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

No branches or pull requests

2 participants