# Selected list item background colour

**URL:** https://meta.discourse.org/t/selected-list-item-background-colour/292487
**Category:** UX
**Tags:** design-experiment
**Created:** [January 22, 2024, 11:11am UTC](https://meta.discourse.org/t/selected-list-item-background-colour/292487 "2024-01-22T11:11:13Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [January 22, 2024, 11:11am UTC](https://meta.discourse.org/t/selected-list-item-background-colour/292487/1 "2024-01-22T11:11:13Z")

</div>

The current `selected` and `hover` colours are both shades of the `primary` variable. This small experiment changes `selected` to be a shade of `tertiary `instead, to add some differentiation.

### before

 ![image](https://global.discourse-cdn.com/meta/original/4X/f/a/b/fab530f2e032beaaee0f7a8653b1b1af9ca979c5.png) ![image](https://global.discourse-cdn.com/meta/original/4X/f/b/9/fb9198777bb6fed054cd1f565dd4e235b3f7d311.png)

### after

 ![image](https://global.discourse-cdn.com/meta/original/4X/4/a/5/4a528b1cb5e713d210667c7bd8b84f1bc13385d3.png) ![image](https://global.discourse-cdn.com/meta/original/4X/6/1/f/61f6506657dbb857f6544a90e346645e1bf104ef.png)

It’s now using `tertiary-300` which was the maximum I could use without having to change text-colour (which would be a lot of manual work), while still maintaining a decent contrast ratio.

 ![image](https://global.discourse-cdn.com/meta/original/4X/e/1/b/e1bae9e7582961aac03a91a12d924d418af66a2d.png)

---

<div class="post-metadata">

### Author: ![chapoi](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/chapoi/32/537252_2.png) [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [January 31, 2024, 8:20am UTC](https://meta.discourse.org/t/selected-list-item-background-colour/292487/4 "2024-01-31T08:20:23Z")

</div>