[terra-form-select] non-selected option does not have high enough contrast

[dv297]

Bug Report

Description

When running aXe on terra-form-select's doc page, this "serious"-level problem occurs.

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds

Steps to Reproduce

1. Ensure select has non-selected option selected
2. Run aXe test

Additional Context / Screenshots

Example of terra-form-select with nothing selected

Expected Behavior

aXe test should pass

Possible Solution

Increase contrast

Environment

• Component Name and Version: terra-form-select@4.17.1
• Browser Name and Version: Chrome Desktop Version 69.0.3497.100 (Official Build) (64-bit)
• Operating System and version (desktop or mobile): Windows 10 Enterprise Desktop

[StephenEsser]

My understanding from previous conversations with UX was that certain non-interactive or disabled content was not required to pass WCAG 2 AA contrast ratio, but was required to pass another contrast ratio standard.

That said, I don't think there is a way to circumvent this aXe failure so if there is a way to bring the placeholder text into the right contrast threshold to pass this test I think we should, assuming UX agrees with the change and can provide a new set of colors.

cc: @neilpfeiffer

[bjankord]

@scottwilmarth Do you have any thoughts on this?

[bjankord]

#757575 seems like a good choice. It is one of the lightest greys that when displayed on a white background, pass WCAG AA Normal and Large text contrast ratio guidelines. I understand the desire not to have placeholder text look like the value text, but at the same time, the placeholder text should still be easy to see/read.

[neilpfeiffer]

Thanks @dv297 and @StephenEsser @bjankord.

We can update the placeholder text color to #70787c (has a ratio of 4.50008:1 on white) -- it is the new color we landed on for form-input and other form elements so that we can pass the aXe tests, but still is light enough to look like placeholder.

For reference to match:

terra-core/packages/terra-form-input/src/Input.module.scss

Lines 25 to 26 in cb128f5

	&::placeholder {
	color: var(--terra-form-input-placeholder-color, #70787c);

terra-core/packages/terra-form-input/src/Input.module.scss

Lines 47 to 48 in cb128f5

	&[disabled]::placeholder {
	color: var(--terra-form-input-placeholder-disabled-color, #70787c);

and

terra-core/packages/terra-form-textarea/src/Textarea.module.scss

Lines 34 to 35 in cb128f5

	&::placeholder {
	color: var(--terra-form-textarea-placeholder-color, #70787c);

terra-core/packages/terra-form-textarea/src/Textarea.module.scss

Lines 55 to 56 in cb128f5

	&[disabled]::placeholder {
	color: var(--terra-form-textarea-placeholder-disabled-color, #70787c);

Feel free to do a quick PR for the fix, thanks again @dv297