Skip to content

[High] Color Contrast: Green color contrast ratio failed against the white background. #8668

@Stutikuls

Description

@Stutikuls

Action Performed:

  1. Using Chrome, open URL staging.new.expensify.com
  2. Navigate to new chat (+) using Tab key.
  3. Check hexa code of the green color button.

Expected Result:

Describe what you think should've happened

Actual Result:

Green color contrast ratio failed against white background. Element has insufficient color contrast of 1.9:1. Foreground:#03D47C
Background:#FFFFFF

The contrast ratio is: 1.9:1

CSS:
background-color: rgb(3, 212, 124);

Other occurrences
Same issue repro on #8725, #8969, #8957, #9534

Workaround:

Yes

Area issue was found in:

New chat floating button

Failed WCAG checkpoints

1.4.11

User impact:

People who have low vision or are colorblind may find difficulty where ther are focusing. if the contrast between the foreground and its background is insufficient.

Suggested resolution:

Use foreground color #03A562 and the original background color #FFFFFF to meet a contrast ratio of 3.0:1.

Refer to:
https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

Platform:

  • Web
  • iOS
  • Android
  • Desktop App
  • Mobile Web

Version Number: v1.1.55-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
Issue reported by: Stuti
#8512 -6 -Green color ratio failed against the white background

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions