Some text on the Dashboard does not meed WCAG 2.0 contrast requirements.
Search button in non-hover/non-focus state - #ffffff text on #7cbc48 background - Contrast Ratio: 2.3:1 - Fails WCAG AA at all sizes; while the button passes in the hover state, a visitor has to be able to see that the button is of interest (and see the button for that matter) in order to lead the site visitor to hover.
Links in shaded areas - #0678be text on #f6f6f2 background - Contrast Ratio: 4.37:1 - Fails WCAG AA for normal text. (Also noted for #2207271: Color Contrast Issues with Current Issue Queues for the issues queue.)
| Comment | File | Size | Author |
|---|---|---|---|
| #10 | Screen Shot 2018-07-16 at 2.44.28 PM.png | 6.74 KB | nicklundy |
Comments
Comment #2
charles belovComment #3
charles belovComment #4
charles belovComment #5
charles belovComment #6
dddave commentedComment #7
drumm#2207271: Color Contrast Issues with Current Issue Queues
Comment #8
charles belovRemoving the content that duplicates #2207271: Color Contrast Issues with Current Issue Queues and reopening for the portion that does not duplicate that issue or which affects the Dashboard.
Comment #9
drummComment #10
nicklundy commentedContrast ratio between foreground and background should be 4.5:1.
For all buttons that are currently #7cbc48 background color, there are two options:
Option 1: Either make the background color #578238 (or darker) and keep white text.
Option 2: Switch to black text and leave #7cbc48 background color.
Comment #11
andrewmacpherson commentedThe white-on-#7cbc48 colour is used in several other places, such as the "Try Drupal" link in the header, and I think it's used for the confirm user button too.
Option 1 in #10 is the least disruptive to existing design. The suggestion for white-on-#578238 takes us just over the threshold to contrast ratio 4.51:1
Option #2 takes us to a contrast ratio of 9.1:1 - black-on-#7cbc48. This is a more disruptive change, and it looks a bit Halloween TBH.
Other possibilities from the Asquatasun Contrast Finder - a tool which finds passing colours close to the original: https://app.contrast-finder.org/result.html?foreground=%23ffffff&backgro...