Make the current link easier to see

[djmtype]

The documentation has grown up alot since a couple years ago. https://www.11ty.dev/docs/ There are many more links in the sidebar navigation now. Please consider making the current page link appear more obvious. Just inverting the colors would be very helpful for someone like me, with poor vision, to see it. Thanks!

[tannerdolby]

Does the blue background color on :active not make it clear? This might not have been added to the site when the issue was created so I wanted to double check.

.elv-toc-list li.elv-toc-active>a {
    background-color: #dff7ff;
}

What would you suggest adding to the :active state if you do think it still needs work? @djmtype

[djmtype]

At the time I was viewing it in dark mode on a Chromium browser. In dark mode, the background color on active state doesn't provide enough contrast, at least to me, someone with glaucoma in both eyes. If I really concentrate, it looks like a faint gray.

.elv-toc-list li.elv-toc-active>a {
    background-color: #353535;
} 

In light mode, it's more obvious – light blue against white background.

However, for me, it's more difficult to look at a white background even with flux https://justgetflux.com/. It's still like looking directly at the sun with glaring feedback – which is why I prefer dark mode.

I'll use Stylebot on sites I frequently visit, and just add a custom style. No big deal. I understand, I'm one of very few who have this condition.

[tannerdolby]

At the time I was viewing it in dark mode on a Chromium browser. In dark mode, the background color on active state doesn't provide enough contrast, at least to me, someone with glaucoma in both eyes. If I really concentrate, it looks like a faint gray.

Ah I better understand now. Yeah I agree, with Chromium's dark mode enabled. The :active state for where you are in navigation has extremely low contrast. I doubt its even the required 4:5:1.

Thank you for the details!

I'll use Stylebot on sites I frequently visit, and just add a custom style. No big deal. I understand, I'm one of very few who have this condition.

Although I applaud you for making it work, I think fixing up the color contrast on :active nav links for users with dark mode enabled on 11ty.dev would be ideal moving forward here.

[tannerdolby]

@djmtype or @Ryuno-Ki Do you happen to know the hex color code that is used as the background for chromium with dark mode enabled? I was going to head over to https://webaim.org/articles/contrast/ and check its contrast ratio and then find something that is more suitable to replace #353535.

I see that Chrome has a darkmode background of #121212 so if we could find a hex color code for chromium, I will do some tinkering to see if there is a more suitable combination for a better contrast ratio.

[Ryuno-Ki]

is reporting a background-color of #dff7ff for .elv-toc-list li.elv-toc-active > a with a text color of #222222 selected by a, a[href]. If I add that to https://coolors.co/contrast-checker/222222-dff7ff - I get the values for light theme :o

I toggled the flag #enable-force-dark in chrome://flags to check.

[Ryuno-Ki]

Congratulations! You picked my interest.

I hit the kebab icon, selected „More tools”, then „Renderin”, scrolled a bit down to „Emulate CSS media feature prefers-color-scheme” to pick a dark preference.

Now the Elements tab report #ffffff on #353535. (Compared to transparent / #000000 via user agent style). https://coolors.co/contrast-checker/ffffff-353535

Looks better.

[djmtype]

Honestly, just making the gray color appear a bit lighter like #555555 would do the trick while still satisfying AAA contrast. Otherwise, using one of the theme's accent colors as an HSL and toning down the lightness until it passes for accessible might be another idea?

[Ryuno-Ki]

The dark turquoise has something :-D

I agree with the shading suggestion (= adding more dark resp. reducing lightness).

[tannerdolby]

I'm seeing the same thing, this is much more readable at a 12.26:1 color ratio which greatly exceeds AA and AAA contrast ratio expectations.

Honestly, just making the gray color appear a bit lighter like #555555 would do the trick while still satisfying AAA contrast. Otherwise, using one of the theme's accent colors as an HSL and toning down the lightness until it passes for accessible might be another idea?

Yeah I agree with this.

[Zearin]

I don’t have any of the vision problems that @djmtype has, but I also agree that as the navigation on the docs site has gotten significantly longer, the current navigation styling needs some love.

Some sort of color differentiation from the main body content would go a long way. The site is so text-heavy that I think the navigation would benefit from a very slight background-color to help the eyes more easily identify it as a block of text that is distinct from the main body.