# Hyperlinks contrast in dark mode

**URL:** https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045
**Category:** UX
**Created:** [June 5, 2022, 3:23am UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045 "2022-06-05T03:23:02Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![mlgtechuser](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mlgtechuser/32/262708_2.png) [@mlgtechuser](https://meta.discourse.org/u/mlgtechuser)
#### Post date: [June 5, 2022, 3:23am UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/1 "2022-06-05T03:23:02Z")

</div>

Posting here because the source topic has been closed.

Hello @sam and @chapoi. Thank you for the speedy response to @hugovk’s report on code highlighting in dark mode. The team over at Python Discourse had also noted the dark forefround color for hyperlinks but this was omitted from the [Almost unreadable code highlighting](https://meta.discourse.org/t/almost-unreadable-code-highlighting-in-dark-mode/226334/12) topic here.

 ![Screenshot_20220605-121500_Chrome](https://global.discourse-cdn.com/meta/original/4X/6/5/3/6530719f3b9a8898d8b6e6b3d19d58ef7efbc17b.jpeg)  
You can see that the unbolded hyperlink sort of sinks into a hole..

Could you guys revisit the coloring of hyperlink text in dark mode?

The same shade used for the `hljs-builtin-names` will probably work well. The message body background color will give it a different shade from the code block text scheme and the color will contrast stronger with the darker message body background.

Thanks! -Leland

---

<div class="post-metadata">

### Author: ![daemon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/daemon/32/256632_2.png) [@daemon](https://meta.discourse.org/u/daemon)
#### Post date: [June 5, 2022, 5:07am UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/3 "2022-06-05T05:07:04Z")

</div>

> [@mlgtechuser](#):
>
> Could you guys revisit the coloring of hyperlink text in dark mode?

Please not!

Not everybody seems to be blind!

In dark mode the normal text is white and hyperlinks are blue.  
So what is the problem with that?

---

<div class="post-metadata">

### Author: ![Jonathan\_Poyer](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan_poyer/32/258087_2.png) [@Jonathan\_Poyer](https://meta.discourse.org/u/Jonathan_Poyer)
#### Post date: [June 5, 2022, 6:21am UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/4 "2022-06-05T06:21:26Z")

</div>

I do not have the exact same shade as you. The blue I have is a bit more bright and works perfectly.

 ![Screenshot 2022-06-05 at 08.20.01](https://global.discourse-cdn.com/meta/original/4X/0/5/b/05b7730fc87aa21f1d6461fde5886d3dd0ec623f.png)

---

<div class="post-metadata">

### Author: ![mlgtechuser](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mlgtechuser/32/262708_2.png) [@mlgtechuser](https://meta.discourse.org/u/mlgtechuser)
#### Post date: [June 5, 2022, 6:30am UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/5 "2022-06-05T06:30:17Z")

</div>

It’s just a matter of tweaking the shade to get more contrast, Alex. The hyperlinks are slightly dark, so they sink back into the background as shown in the screenshot. A shade level or two is all that it will take.

Bear in mind that Discourse developers and most of the team at [Python.org](http://Python.org) are professionals with much experience in user interface design. These are subtle adjustments. No heavy-handed modifications are being proposed or requested here.

---

<div class="post-metadata">

### Author: ![daemon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/daemon/32/256632_2.png) [@daemon](https://meta.discourse.org/u/daemon)
#### Post date: [June 5, 2022, 7:50am UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/9 "2022-06-05T07:50:38Z")

</div>

You can easily change the colors of the hyperlinks for yourself in the theme settings with CSS.

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 5, 2022, 8:19am UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/10 "2022-06-05T08:19:29Z")

</div>

I’m getting the same as @Jonathan_Poyer where the hyperlinks on here/my screen are already a slightly brighter blue than the ones in your screenshot:

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/a/2/2a2ea28ebc9b637a252a77476b93ea6594fdcc86.jpeg)

Could this be a colouring choice on the theme you’re using?

---

<div class="post-metadata">

### Author: ![mlgtechuser](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mlgtechuser/32/262708_2.png) [@mlgtechuser](https://meta.discourse.org/u/mlgtechuser)
#### Post date: [June 5, 2022, 12:15pm UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/11 "2022-06-05T12:15:56Z")

</div>

Thank you for the comparisons, @Jonathan_Poyer and @JammyDodger. That’s very helpful. Yes, my hyperlinks also show up better here. I’d say it’s about the exact amount of adjustment that I had in mind. Here’s a screenshot showing the hyperlink and screenshot from the OP here.

> ![20220605_210447](https://global.discourse-cdn.com/meta/original/4X/4/6/6/4662162a2c8f6b8373df6a1093cc50cc2d081710.jpeg)

> [@JammyDodger](#):
>
> Could this be a colouring choice on the theme you’re using?

As far as I know, we’re running the default CSS setup. The admin group are the Python core development team, so they understandably prefer to focus on administering Python rather than administering Discourse.

They had a discussion about code highlighting that Sam Saffron participated in and Charlie ‘Chapoi’ made the adjustment for the next release. We just forgot to include the topic of the hyperlinks. (Interestingly, the code highlighting is now better over there even though the adjusted release is pending. Perhaps someone found the color assignment and tweaked it.)

At first I thought that [discuss.python.org](http://discuss.python.org) is running a different Discourse build. However, we’re currently running 2.9.0.beta4 and the page element viewer shows the same here:

`<meta name="generator" content="Discourse 2.9.0.beta4 - https://github.com/discourse/discourse version 8a58ce6578ab697f29cea211049c37c2ab341ba5">`

Do you know where the hyperlink color specification is, by chance?

---

<div class="post-metadata">

### Author: ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [June 5, 2022, 12:28pm UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/12 "2022-06-05T12:28:17Z")

</div>

> [@mlgtechuser](#):
>
> (Interstingly, the code highlighting is now better over there even though the adjusted release is pending.

Why is the release pending? Most forums use test-passed and not beta for updating. The name of the version is not the only information you get

> [@Finding what version of Discourse you're using](https://meta.discourse.org/t/how-do-i-tell-what-version-of-discourse-i-am-on/104326):
>
> bookmark This guide explains how to find the version of Discourse you’re using by inspecting the website’s source code. person_raising_hand Required user level: All users Understanding what version of Discourse you are using can be important for troubleshooting, ensuring compatibility with plugins, and staying up-to-date. Here are the steps you can follow to determine the version of Discourse running on a given site. Summary This guide will cover: Viewing the source code of a Discour…

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 5, 2022, 12:36pm UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/13 "2022-06-05T12:36:57Z")

</div>

> [@mlgtechuser](#):
>

Checking out your [version number](https://github.com/discourse/discourse/commits/8a58ce6578ab697f29cea211049c37c2ab341ba5), it looks like you were updated on the 4th June, so you should have those updates. 👍

> [@mlgtechuser](#):
>
> Do you know where the hyperlink color specification is, by chance?

I believe it’s the tertiary colour, which you can find at `/admin/customize/colors` and select the dark theme. Meta and my test site both have `0f82af` for the colour code.

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [June 5, 2022, 2:07pm UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/14 "2022-06-05T14:07:10Z")

</div>

We now ship an additional high-contrast dark color scheme in core that probably solves your issue. You can try that scheme out here on meta, it is called WCAG Dark.

I do see that scheme is not available on the Python community though (most likely because the community was established before we added the WCAG schemes to core). So, your best bet here is to reach out to the administrators on that site and ask them to enable WCAG color schemes.

---

<div class="post-metadata">

### Author: ![hugovk](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/hugovk/32/256348_2.png) [@hugovk](https://meta.discourse.org/u/hugovk)
#### Post date: [June 5, 2022, 3:02pm UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/15 "2022-06-05T15:02:12Z")

</div>

It is a bit better here on Discourse Meta, but I’m pretty certain we’re using default colours on the Python Discourse.

# Hyperlinks

On the Python Discourse, hyperlinks are [blue #306897 on grey #222222, which has contrast ratio 2.69:1](https://webaim.org/resources/contrastchecker/?fcolor=306897&bcolor=222222), and is below the W3C’s Web Content Accessibility Guidelines (AA level: 4.5:1, AAA level: 7:1).

(Here on Discourse Meta it’s a bit better: [blue #0F82AF on same grey #222222, ratio 3.61:1](https://webaim.org/resources/contrastchecker/?fcolor=0F82AF&bcolor=222222), but still below AA and AAA.)

# Code blocks

On the Python Discourse, the code blocks fix has been deployed now, and it’s definitely a big improvement.

But [blue #4288C3 on grey #3F3F3F at 2.77:1](https://webaim.org/resources/contrastchecker/?fcolor=4288C3&bcolor=3F3F3F) is still below WCAG guidelines, so room for improvement.

(Here on Discourse Meta, [blue #4288C3 on grey #3F3F3F at 4.34:1](https://webaim.org/resources/contrastchecker/?fcolor=14AEEA&bcolor=3C3C3C) is similarly better but below AA and AAA.)

---

<div class="post-metadata">

### Author: ![mlgtechuser](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mlgtechuser/32/262708_2.png) [@mlgtechuser](https://meta.discourse.org/u/mlgtechuser)
#### Post date: [June 5, 2022, 3:27pm UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/16 "2022-06-05T15:27:14Z")

</div>

> [@pmusaraj](#):
>
> We now ship an additional high-contrast dark color scheme

Thank you for this. Wow! That’s pretty masterful. Everything is so visible that I actually turned my brightness down! The active post editor at the bottom really makes itself evident. It’s not as prominent in the normal dark theme.

> ![Screenshot_20220606-001612_Chrome](https://global.discourse-cdn.com/meta/original/4X/5/1/f/51fcd1e86b49aa89905f71bc19d110bbc4a36ac7.jpeg)

The editor has a bit of a “street neon” underglow, though. You might consider toning it down a notch or two (either darken the hue or add more red/green). Thinning the colored border by one pixel would possibly be ideal but I assume that border thickness isn’t one of the theme parameters.

> ![Screenshot_20220606-002312_Chrome](https://global.discourse-cdn.com/meta/original/4X/3/9/7/397b3f96964a6a6bb4322e9185075d61680e60c4.jpeg)

I really like the high-contrast dark.

---

<div class="post-metadata">

### Author: ![mlgtechuser](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mlgtechuser/32/262708_2.png) [@mlgtechuser](https://meta.discourse.org/u/mlgtechuser)
#### Post date: [June 5, 2022, 3:39pm UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/17 "2022-06-05T15:39:34Z")

</div>

I’d say that the contrast levels here are pretty well-balanced. The various UI elements also need to contrast with each other.

For example, if hyperlinks are moved too close to the W3C foreground/background contrast ratio, they’ll start to [blend](https://python.org) into the body text. So the contrast between body text and hyperlink colors is similarly important, especially when it’s short hyperlink text in the center of a paragraph of body text.

@sam and @chapoi, do you know if Discourse Meta’s hyperlink and code highlighting colors have been adjusted off of default here?

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 5, 2022, 4:16pm UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/18 "2022-06-05T16:16:51Z")

</div>

> [@mlgtechuser](#):
>
> @sam and @chapoi, do you know if Discourse Meta’s hyperlink and code highlighting colors have been adjusted off of default here?

Disclaimer: I’m not Sam or Chapoi 🙂, but these are the default dark scheme colours from my test site (which are also the ones on Meta):

 ![Dark colour scheme (a)](https://global.discourse-cdn.com/meta/original/4X/a/c/c/accc727c59e63569e8feb280895573d7b39a695d.jpeg)  
 ![Dark colour scheme (b)](https://global.discourse-cdn.com/meta/original/4X/b/7/a/b7a34319da01ff2d546ede7e1d0078c8674b528b.jpeg)

This particular test site was created late Oct '21.

---

<div class="post-metadata">

### Author: ![mlgtechuser](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mlgtechuser/32/262708_2.png) [@mlgtechuser](https://meta.discourse.org/u/mlgtechuser)
#### Post date: [June 5, 2022, 4:21pm UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/19 "2022-06-05T16:21:37Z")

</div>

Is **`0f82af`** the current default tertiary color for the Dark theme?

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 5, 2022, 4:24pm UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/20 "2022-06-05T16:24:10Z")

</div>

I believe so. I’ve not touched my colour palettes on my test site, so I think that’s a fair assumption. However, someone more knowledgeable may have more info. 🙂

---

<div class="post-metadata">

### Author: ![mlgtechuser](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mlgtechuser/32/262708_2.png) [@mlgtechuser](https://meta.discourse.org/u/mlgtechuser)
#### Post date: [June 5, 2022, 5:04pm UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/21 "2022-06-05T17:04:59Z")

</div>

How about your version?

`<meta name="generator" content="Discourse 2.9.0.beta4 - https://github.com/discourse/discourse version 8a58ce6578ab697f29cea211049c37c2ab341ba5">`

---

<div class="post-metadata">

### Author: ![JammyDodger](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jammydodger/32/254611_2.png) [@JammyDodger](https://meta.discourse.org/u/JammyDodger)
#### Post date: [June 6, 2022, 6:04am UTC](https://meta.discourse.org/t/hyperlinks-contrast-in-dark-mode/229045/22 "2022-06-06T06:04:56Z")

</div>

It was on [17227e9e53](https://github.com/discourse/discourse/commits/17227e9e5336e5eb2941b62c8b1b0623c60c3ed2) when I checked the colour palettes, but I noticed it was a few commits behind you so thought I’d update just to be thorough. It’s now on [42683d4874](https://github.com/discourse/discourse/commits/42683d48741cc9ec9e4cb2fe1589d0411cc0ca2b) and still has the same dark theme tertiary colour code (`0f82af`).
