Issue Summary

On the “IT Platforms and Support“ page, the placeholder text such as “Select…“ and “e.g. 4/26/2024“ are failing the minimum color contrast requirement of 4.5:1.

Steps to Reproduce

1. Open the JSM Product Help Centre
2. Navigate to the “IT Platforms and Support” page
3. Go to the main content area of the page
4. Identify the placeholder text
5. Use a Color Contrast Analyzer (CCA) tool
6. Capture the foreground and background colors of the placeholder text
7. Observe that the color contrast between the foreground text and the background is insufficient.

Screenshot

Actual Results

The placeholder text such as “Select…“ and “e.g. 4/26/2024“ with #6B778C foreground color have a color contrast ratio of 4.1:1 with #F4F5F7 background color.
This will make it difficult for people with low vision and color blindness to read standard text elements that have insufficient contrast.

Expected Results

The mentioned placeholder texts should have a colour contrast ratio of 4.5:1. This helps low-vision users to read the text.
The expected contrast ratio can be achieved by increasing the contrast of the background color until it passes a contrast ratio of 4.5:1

Workaround

Currently there is no known workaround for this behavior. A workaround will be added here when available

Environment

MacBook Pro (16 inch, 2021)
macOs Sonoma 14.7.1 (23H222)
Chrome - Version 131.0.6778.265 (Official Build) (arm64)
Firefox- Version 112.0. 1
Safari- Version 18.2
JAWS- Version 2024
NVDA- Version 2024
Voiceover - Version Latest