carbon
carbon copied to clipboard
Sage
[Accessibility] Text-based input placeholders (excluding `Search`) fail colour contrast validation
Description
There is an accessibility failure regarding the colour contrast of placeholders in text boxes (with the exception of the Search component). Using a colour contrast checker, the value returned sits at 2.1, far short of the 4.5 required to be deemed accessible.
Reproduction
https://stackblitz.com/edit/placeholderaccessibility?file=src%2FApp.tsx
Steps to reproduce
Using Chrome's shadow DOM, you can inspect the colour of the placeholder text which looks to be set to var(--colorsUtilityYin030). I ran the hexadecmial version of it through this tool to arrive at the 2.1:1 ratio above.
JIRA ticket numbers (Sage only)
No response
Suggested solution
Given that placeholder text must meet a minimum colour contrast ratio of at least 4.5:1 (WCAG 1.4.3), the same colour used for the hint text (var(--colorsUtilityYin055)) could be used (as this has a ratio of 4.74
Carbon version
latest
Design tokens version
No response
Relevant browsers
Chrome
Relevant OSs
MacOS
Additional context
No response
Confidentiality
- [X] I confirm there is no confidential or commercially sensitive information included.
:tada: This issue has been resolved in version 127.0.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
