Description
Expected Behavior
Placeholder text for Search, Select, Textarea and Textfield components should comply with WCAG 2.1 AA contrast ratio requirements with a contrast ratio between the foreground text color and the background color or at least 4.5:1.
Actual Behavior
Currently, Coral-Spectrum uses var(--spectrum-global-color-gray-600); from Spectrum-CSS, for the ::placeholder text color in Search, Select, Textarea and Textfield components, which results in placeholder text with a contrast ratio of 3:1, which does not comply with WCAG 2.1 AA contrast ratio requirements.
Spectrum-CSS includes a fix for this in v3.0.1, (see adobe/spectrum-css@011ca54), updating Coral-Spectrum to use this version of Spectrum-CSS is not trivial.
A simpler suggested fix would be to change the value in Coral-Spectrum to use var(--spectrum-global-color-gray-700); to satisfy the requirement.
Reproduce Scenario (including but not limited to)
Steps to Reproduce
- Go to https://opensource.adobe.com/coral-spectrum/examples/#textfield, https://opensource.adobe.com/coral-spectrum/examples/#textarea, https://opensource.adobe.com/coral-spectrum/examples/#select, https://opensource.adobe.com/coral-spectrum/examples/#clock.
- Inspect the placeholder text element in the sub-dom for any of the enabled textfield examples that use placeholder.
- Observe that the color specified in CSS for the placeholder element has a contrast ratio of 3:1, for the
.coral-lightesttheme it'srgb(149, 149, 149).
Browser name/version/os
Version 89.0.4389.114 (Official Build) (x86_64) on macOS
Coral Spectrum version
v4.10.16
Sample Code that illustrates the problem (use the Playground if possible)
Coral Spectrum Playground Example:
<!DOCTYPE html>
<html>
<head>
<title>Placeholder text color contrast example</title>
<link rel="stylesheet" href="https://opensource.adobe.com/coral-spectrum/playground/dist/css/coral.css"/>
<script src="https://opensource.adobe.com/coral-spectrum/playground/dist/js/coral.js"></script>
<style>
body {
margin: 1rem
}
</style>
</head>
<body class="coral--lightest">
<p>
<label for="lifestory" class="coral-FieldLabel">Life Story</label>
<input id="lifestory" placeholder="Enter your life story" name="field" is="coral-textfield"/>
</p>
<p>
<label for="lifestory2" class="coral-FieldLabel">Life Story</label>
<textarea id="lifestory2" placeholder="Enter your life story" name="field" is="coral-textarea"></textarea>
</p>
<p>
<label id="country-label" class="coral-FieldLabel">Country</label>
<coral-select placeholder="Choose an country" labelledBy="country-label">
<coral-select-item value="tza">Tanzania - United Republic of Tanzania, Northwest</coral-select-item>
<coral-select-item value="are">United Arab Emirates</coral-select-item>
<coral-select-item value="gbr">United Kingdom</coral-select-item>
<coral-select-item value="usa">United States of America and the republic for which it stands, one nation</coral-select-item>
</coral-select>
</p>
</body>
</html>Screenshots (if applicable)
Current behavior:
Desired behavior:
