Active link color looks like no style applied in light theme

[raviqqe]

Problem

The active link color in the light theme looks like no style is applied as the color is pretty close to the default blue color in CSS.

Suggestion

Can we use the same color of #20609f as the normal links in other part of the light theme?

I'm not a designer so I'm not sure but if the contrast is too small or something, can we use something like brighter version of #20609f?

[ehuss]

Can you say more about what's wrong with the color? Are you saying you are having trouble identifying which is the active chapter since the color is too close to black? I'm not sure what was meant by "blue" above. Also, maybe my color acuity isn't as good as it used to be, but for me I find the existing #1f1fff to stand out more than the link color, since it uses a much brighter value (100% vs 62%).

[raviqqe]

Are you saying you are having trouble identifying which is the active chapter since the color is too close to black?

No, I don't have any problem! But I mean that the current active link color on the sidebar doesn't look good because the color doesn't match with the other part of the "light" theme. And it rather looks like CSS style for the anchor texts is missing as it's pretty close to the built-in CSS color of blue (#0000ff) which is used for link colors by default by many browsers.

but for me I find the existing #1f1fff to stand out more than the link color, since it uses a much brighter value (100% vs 62%).

Yes, that's why I'm suggesting using something close to #20609f but a little brighter (or less saturated?) WDYT?

[ehuss]

Maybe @tim-seoss could weigh in, as they just recently changed those colors? I personally don't use the light theme, so I may be the wrong person to judge. However, I find that the brighter color on the sidebar makes it stand out better, which can make it easier to quickly see which chapter you are currently on.

[tim-seoss]

Hmm, my main motivation was to increase the contrast for accessibility reasons, and whilst that change did improve the contrast on that element, it probably wasn't thought through enough (I focussed my attention on readability / accessibility for the main text itself).

A few thoughts:

Is text which appears somewhat close to the link colour (either the default link colour, or the light-theme link colour) a good visual signal at all?

i.e. Is the use of same/similar colour to try to impart both "You are currently here", and "You could click this to go somewhere else and get more information" a good idea?

Looking at what other projects have chosen for "you are here" in the sidebar:

readthedocs: bold and inverted text

Kubernetes docs: bold

Lxd: vertical bar text to the current section

"Accessibility Insights for Web" browser extension docs: bold with highlighted background, and vertical bar to the left, and also inverted text for the section number

That was the first four docs sites that sprung to mind, but looking at that, just using colour (alone) to indicate "you are viewing this section" is not commonplace (or at least not universal!).

So I suppose some options would be one or more of:

• Increased font weight
• Change in text background colour
• Change text foreground colour (with clear distinction from link colour?)
• Vertical bar or other symbol to left or right of the current section: e.g. 〉

Any thoughts? IIRC the general advice for accessibility is to not rely on text colour (or colour alone) to impart information, although for non-essential "hint" information, that's becomes a weaker recommendation.

I suppose my only strongly held opinion is that I would really like any changes not to cause an accessibility regression (and a concrete example of this would be a WCAG text contrast regression. Such a regression could be checked for using various browser extensions, e.g. "Accessibility Insights for Web".

p.s. Ideally some sort of automated regression test for WCAG for the mdbook tree would be great, but I've no idea if any exist.

p.p.s. some other ideas for an indicative symbol:

〉
⦒
❯
❭
⎬
|
ǀ
|
ǁ
|
✦
❋
✹

[raviqqe]

Is text which appears somewhat close to the link colour (either the default link colour, or the light-theme link colour) a good visual signal at all?

I think it's not actually although they are made the same in some themes like Coal and Navy.

So I suppose some options would be one or more of:

• Increased font weight
• Change in text background colour
• Change text foreground colour (with clear distinction from link colour?)
• Vertical bar or other symbol to left or right of the current section: e.g. 〉

I like those ideas! Personally, combining different background color and font weight increase or foreground color looks enough for accessibility although we should probably test it in some way. Vertical bars or some symbols might be too noisy as we already put extra information of section numbers depending on configurations like | 1. My Section.