Accessibility: Color contrast

[kevinrobinson]

This is split out from the master accessibility thread: Accessibility audit and shepherd for making improvements. Previously directly related issues: Accessibility: Improve contrast of text styling in default UI and Contrast and accessibility and https://meta.discourse.org/t/improving-color-and-contrast-on-topic-progress-widget/27076.

The overall accessibility question here is: do foreground and background text have sufficient contrast? This is of course dependent on theming, but the idea for this issue is that out-of-the-box defaults should be accessible.

The Tanaguru Contrast Finder Tool can help with conversations about contrast and accessibility.

The specific examples that came out of an accessibility audit we did were:

1. The text that appears for post excerpts
2. The reply field area text

Both have a color combination of #919191/#ffffff, which has a contrast ratio of 3.15, which is not sufficient. At this size, you will need a ratio of at least 4.5. Consider using the following foreground/background combination: #767676/#ffffff / has a ratio of 4.54

In our instance, we just updated the styling for this directly, but it’d be good to update the default so it meets this accessibility threshold as well.

1. The text that appears for post excerpts
Here’s what this change would look like for post excerpts on meta.discourse.org on Desktop (#919191 → #767676):

before:

after:

2. The reply field area text
(edit: oops, this got cut out of my initial post)
Here’s what this part of the UI looks like, with the image from the original report in March 2017:

Looking at this part of the UI now, it appears that this is implemented with a placeholder attribute on <textarea /> and that the current color on Mac Chrome Desktop is #626262 (with great contrast ratio of 6.0)!

At the same time I’m looking at this, I notice that several other bits of text have the same #919191 color though, including “kevinrobinson” at the top, “saved” and “hide preview” on the bottom strip, and the “uploading” message when uploading an image (not shown here):

These appear to be defined with the $primary-medium variable in SASS. There were some recent changes here in initial pass at color simplification by awesomerobot · Pull Request #4975 · discourse/discourse · GitHub in July 2017 that might be relevant, and we could revisit those colors to audit them across the UI in the default themes exhaustively. The short-term change here could be just to tweak that variable to #626262.

[awesomerobot (Kris)]

I know @sam at some point questioned the need to change the composer’s input placeholder text contrast, as the placeholder text could be considered incidental guidance rather than something a user absolutely requires.

The suspected downside is that too-high contrast might make the input look less like an input.

I was curious about any existing thoughts/guidance on placeholder text specifically and found a collection of placeholder details on the W3C’s site.

The minimum contrast success criterion (1.4.3) applies to text in the page, including placeholder text and text that is shown when a pointer is hovering over an object or when an object has keyboard focus. If any of these are used in a page, the text needs to provide sufficient contrast.

So that’s a pretty strict recommendation.

I feel like increasing the contrast could benefit people with sight issues more than it would detract from normally-sighted users, but I’m curious if there are any other thoughts. If you look around for examples, most other sites seem to fail on placeholder contrast.

[Mittineague]

Yes, the web is ubiquitous with poor examples of poorly contrasted placeholder text.

I’m thinking maybe a subtle outline might help it be distinguishable and less jarring. Kind of a “middleman” thing.

I’ll play a bit and post screen caps of anything worth showing.

[kevinrobinson]

I updated the initial post here - some had been mistakenly left off previously when I posted.

FWIW I think the most immediate change here is revising $primary-medium from #919191 to #626262, which has minimal visual impact and then meets the recommendations for contrast from Tanaguru. We could then do a similar pass on other low-contrast areas based on the default theme colors.

[supermathie (Michael Brown)]

Those are some good points - we’ll evaluate the recommended changes. Additionally, how would you feel about helping us add a High Contrast theme we could point people at (or possibly ship)?

[kevinrobinson]

@supermathie Thanks! I think making Discourse accessible by default seems like a better path to reach the most users (versus making accessibility “opt-in” only). There might be places where there are tough compromises to make, but I’m hoping some smaller changes like #919191 > #626262 with the visual impact shown above are closer to quick wins

[supermathie (Michael Brown)]

Agreed, the few people that have to “make changes” to use the software, the better. We’ll find that balance!

[kevinrobinson]

@supermathie Awesome, thanks for your help! I’m still posting the rest of the issues (to get these all up here by the end of the day), and would love to help chip away with these especially if there are smaller ones that could quickly help improve things for folks on screen readers!

[Mittineague]

More a rough idea than a suggestion.

textarea::placeholder {
    color: #000;
    text-decoration: underline;
    text-decoration-color: rgba(130, 130, 130, 0.5);
    text-decoration-style: double;
    text-shadow: 2px 2px 10px #FFF;
}

[sam (Sam Saffron)]

I support both of the changes in the OP seem very minor to the regular user and would have a positive impact on the impaired user.

[codinghorror (Jeff Atwood)]

I do not support placeholder text changes but the rest seem ok, I guess just the text excerpt.

[Kellner114 (Kristina Kellner)]

@Mittineague

textarea::placeholder {
color: #000;
text-decoration: underline;
text-decoration-color: rgba(130, 130, 130, 0.5);
text-decoration-style: double;
text-shadow: 2px 2px 10px #FFF;
}

textarea::placeholder {
color: #000;
text-decoration: underline;
text-decoration-color: rgba(130, 130, 130, 0.5);
text-decoration-style: double;
text-shadow: 2px 2px 10px #FFF;
}

[awesomerobot (Kris)]

I just pushed a change that addresses the color contrast in the composer for the “Reply to” text, draft status, and hide preview. I also included topic excerpts, but forgot to mention it in my commit message.

https://github.com/discourse/discourse/commit/fe907aaf741b64367899fdda15b52d92b215601b

[kevinrobinson]

Awesome y’all, and thanks @awesomerobot for the help! From my perspective we can consider this issue resolved.

And if other folks find other problematic color combinations we could add them in here and discuss then, or add tools that could do this in an automated way if we find this regresses or comes up more frequently.