Replace hardcoded color values with Semantic UI theme variables - input field - a11y

[Wagner3UB]

Description:
The Pastanaga theme has a hardcoded value for @inputPlaceholderColor: #B8C6C8 against a white background (#FFFFFF), which produces a contrast ratio below 3:1, failing even the minimum WCAG 2.1 Level A requirement for UI components and placeholder text.

Additionally, the placeholder color logic is inverted — the focused state is darker than the default, which is counterintuitive: a focused field should make the placeholder less prominent, not more.

Current behavior:
less@inputPlaceholderColor: #B8C6C8; /* hardcoded, contrast ratio < 3:1 on white */

volto/packages/volto/theme/themes/pastanaga/globals/site.variables

Line 52 in f2903d0

@inputPlaceholderColor: #B8C6C8;

Expected behavior:
Placeholder colors should be derived from @inputColor using relative lightness values, ensuring they meet WCAG contrast requirements and behave correctly across focus states.

Goals:

• Set the placeholder color as black/@textcolor (@inputColor)
• Remove the hardcoded input placeholder color
• Set the placeholder variables correctly - dark color as default, light color on focus (@inputPlaceholderColor, @inputPlaceholderFocusColor)

Related to:
#5127 - DONE/CLOSED
#5144

References:
WCAG 2.1 SC 1.4.3 – Contrast (Minimum)
WCAG 2.1 SC 1.4.11 – Non-text Contrast

Images:

[Wagner3UB]

@sneridagh @robgietema @pnicolli Hey folks, I want to bring this issue to your attention because it can be tricky to solve. While searching for a solution to this a11y problem, I noticed that these variables haven't been changed in 8 years, originally set by Rob, so this has been the case for a long time. There are also some inconsistencies across Volto regarding the correct use of @inputColor and @inputPlaceholderColor.

The most important thing to flag here is that this will be a visual breaking change, all input placeholders using @inputPlaceholderColor and @inputPlaceholderFocusColor will have their colors inverted.

I would like to hear your thoughts on this.

---

Note: Building accessible websites sometimes requires trade-offs with visual design choices. The current input placeholder styling may offer an aesthetically refined appearance for users with full visual acuity, however it does not comply with WCAG contrast requirements, which are in place to ensure usability for users with low vision or related visual impairments.

[stevepiercy]

I have always had issues with finding inputs in Volto. Accessibility helps all users, not just people with vision impairments.