Hyperlinks contrast in dark mode

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 topic here.


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

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?

1 Like

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

1 Like

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 are professionals with much experience in user interface design. These are subtle adjustments. No heavy-handed modifications are being proposed or requested here.

1 Like

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

1 Like

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:

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

2 Likes

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.

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 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?

1 Like

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

1 Like

Checking out your version number, it looks like you were updated on the 4th June, so you should have those updates. :+1:

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.

1 Like

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.

4 Likes

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, 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, 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 is still below WCAG guidelines, so room for improvement.

(Here on Discourse Meta, blue #4288C3 on grey #3F3F3F at 4.34:1 is similarly better but below AA and AAA.)

3 Likes

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.

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.

I really like the high-contrast dark.

2 Likes

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 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?

1 Like

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


This particular test site was created late Oct '21.

2 Likes

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

1 Like

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. :slightly_smiling_face:

2 Likes

How about your version?

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

1 Like

It was on 17227e9e53 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 and still has the same dark theme tertiary colour code (0f82af).

1 Like