Topic excerpt unreadable on dark theme (contrast issue)

On the default dark theme (such as here), the background for .topic-list .topic-excerpt is calculated by SASS as #646464, a color that is just lighter than medium-gray with 2.68 contrast to the default background #222 per WCAG methods. Consider using something with a more dramatic lightness change like $secondary-middle for that (currently used for :visited, a tad better), or just always base it on the primary instead (excerpts are supposed to be text anyway).

To reproduce it here, enable the dark theme and try to read the excerpt for the pinned topic.


FIle affected: https://github.com/discourse/discourse/blob/master/app/assets/stylesheets/common/base/_topic-list.scss
Major dependency: https://github.com/discourse/discourse/blob/master/app/assets/stylesheets/common/foundation/variables.scss (search dark-light)

My suggestion is to just always use $primary-high, and also revisit places where the pattern dark-light-choose($primary-SOMETHING, $secondary-SOMETHING) is used. Having styles that vary between primary and secondary is likely a semantic issue.

3 Likes

Yeah I agree that it’s too dark, we should ideally be matching the contrast ratio of the light theme. I’ll check it out.

7 Likes

This is fixed by Increase contrast of pinned excerpt for dark themes · discourse/discourse@2f70bd8 · GitHub

31%20AM

8 Likes

This topic was automatically closed after 31 hours. New replies are no longer allowed.