# Topic excerpt unreadable on dark theme (contrast issue)

**URL:** https://meta.discourse.org/t/topic-excerpt-unreadable-on-dark-theme-contrast-issue/104231
**Category:** Bug
**Created:** [December 13, 2018, 11:39pm UTC](https://meta.discourse.org/t/topic-excerpt-unreadable-on-dark-theme-contrast-issue/104231 "2018-12-13T23:39:20Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Artoria2e5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/artoria2e5/32/109009_2.png) [@Artoria2e5](https://meta.discourse.org/u/Artoria2e5)
#### Post date: [December 13, 2018, 11:39pm UTC](https://meta.discourse.org/t/topic-excerpt-unreadable-on-dark-theme-contrast-issue/104231/1 "2018-12-13T23:39:20Z")

</div>

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: [discourse/app/assets/stylesheets/common/base/\_topic-list.scss at main · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/master/app/assets/stylesheets/common/base/_topic-list.scss)  
Major dependency: [discourse/app/assets/stylesheets/common/foundation/variables.scss at main · discourse/discourse · GitHub](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.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [December 13, 2018, 11:44pm UTC](https://meta.discourse.org/t/topic-excerpt-unreadable-on-dark-theme-contrast-issue/104231/3 "2018-12-13T23:44:40Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [December 14, 2018, 3:08pm UTC](https://meta.discourse.org/t/topic-excerpt-unreadable-on-dark-theme-contrast-issue/104231/5 "2018-12-14T15:08:49Z")

</div>

This is fixed by [Increase contrast of pinned excerpt for dark themes · discourse/discourse@2f70bd8 · GitHub](https://github.com/discourse/discourse/commit/2f70bd83a3b20b0ab89f6cdd596b8bc8d4402c70)

 ![31%20AM](https://global.discourse-cdn.com/meta/original/3X/b/6/b614e8775e934c1ac04b93b4573ebf50c244048b.png)

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [December 15, 2018, 11:00pm UTC](https://meta.discourse.org/t/topic-excerpt-unreadable-on-dark-theme-contrast-issue/104231/6 "2018-12-15T23:00:16Z")

</div>

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