Clarity: The contrast ratio is less than 4.5:1 for gray background and blue/green foreground colors

[mathisscott]

Priority:
P1

URL: http://clarity-ks.surge.sh/progress-bars

Tools: Web Accessibility Toolbar (WAT2.0)

Reproduced Steps:

1. Login Clarity Kitchen Sink with web browser.
2. Go to Progress tab.
3. Use WAT contrast analyzer to select foreground and background colors from the screen.
4. Check the contrast ratio.

Actual Results:
The contrast ratio is less than 4.5:1 for gray background and blue/green foreground colors.
For more details, please refer to "Progress-LowContrastRatio.png".

Expected Results:
The contrast ratio is 4.5:1 or greater when comparing all background and foreground colors.

Violation of Section 508 Standards:
Section 1194.31(b) At least one mode of operation and information retrieval that does not require visual acuity greater than 20/70 shall be provided in audio and enlarged print output working together or independently, or support for Assistive Technology used by people who are visually impaired shall be provided.
User Impact: Low vision.

Screen shot:

1. Progress-LowContrastRatio.png

NOTE: this may also be pointing to an issue with a button state...

[mathisscott]

@reddolan

[mathisscott]

Per @lil-kim
The ghost buttons should be changed to #0077b7

(this includes text inside the ghost button)

[jeeyun]

@lil-kim could you recommend a color for the success outline button as well? That one also fails the color contrast ratio at the moment.

[lil-kim]

@jeeyun
Color for Success outline button (and text) #308300

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.