-
Bug
-
Resolution: Fixed
-
Low
-
8.4.0
-
Severity 3 - Minor
-
Issue Summary
The Placeholder text "User name, group or email" and "take a look at this page" fails to meet the required color contrast ratio.
Steps to Reproduce
- Navigate to the "View page" page.
- Navigate to the "Share this page" button and activate it.
- Navigate to the mentioned placeholder text.
- With the CCA tool, take the colour contrast of the mentioned instance with the surroundings.
Screenshot 1
Screenshot 2
Actual Results
The placeholder "User name, group or email" and "take a look at this page" text has an insufficient color contrast ratio with the background color.
By Default:
Foreground: #7A869A
Background: #FAFBFC
Ratio: 3.6:1
On hover:
Foreground: #7A869A
Background: #EBECF0
Ratio: 3.1:1
The "Restrictions on this page may prevent people viewing or editing." text has an insufficient color contrast ratio with the background color.
By Default:
Foreground: #808080
Background: #F5F5F5
Ratio: 3.6:1
As a result, low-vision and elderly users won't be able to identify the text. This will cause an unpleasant user experience for users.
Expected Results
Ensure all texts that appear have a colour contrast difference of at least 4:5:1 with the surroundings to ensure that users who cannot distinguish between the colours can still find the texts.
Increase the colour contrast of text to achieve a ratio of 4:5:1 which will help in fixing this issue.
Workaround
Currently, there is no known workaround for this behaviour.
Environment
MacBook Pro (16-inch, 2019)
macOS 13.4.1 (c) (22F770820d)
Chrome - Version 115.0.5790.170 (Official Build) (x86_64)
Firefox- Version 114.0 (64-bit)
Safari- Version 16.5.2 (18615.2.9.11.10)
JAWS- Version 2023.2306.28
NVDA- Version 2022.2.2
Voiceover - Version Latest