[lrpe]

If readability is truly your pursuit, then it is my humble opinion that you should avoid high contrast white/lightgrey on pitch black colors when designing a dark theme for your app or website, or consider adding a toggle to switch to a light theme. I gave up at the end of the first section of this article because it was just too much.

[ajxs]

Hi, author here. What was too much? Are you talking about my colourscheme, or my writing? I've actually been trying out different colourschemes for my site lately, and I'm genuinely open to suggestions. I actually took the contrast into account when picking colours, and consciously lowered the overall contrast by saturating the text and background colour a little. I don't think the contrast is much higher than many other dark-themed sites I look at often, like Github for example. I'm sorry you didn't enjoy it either way.

[lrpe]

No your writing is fine, and sorry if I'm being a negative nancy. It's just that light text on black backgrounds cause me eye strain so they're not really my cup of tea. The light grey font color does help a litte though. I often experience lines of text being burned into my vision with these themes, and that effect was not as noticeable here.

I am admittedly not a fan of dark themes in general, but I feel they are done right when the dark background is toned down a bit so you're not staring at a pitch black screen. And not just by a few shades.

As an aside, I didn't even know GitHub had a dark theme. I just tried it and it was horrible. Then I switched from dark default to dark dimmed and it was much more tolerable, although I still prefer light.

[ajxs]

That's okay, I really appreciate the feedback! I'll give this some thought and see if I can tweak the colours a little. I often find myself falling back on Firefox's 'Reader View' if I find a website's colour theme a bit too jarring.

[DHPersonal]

Would you consider it against the intention of your site to include either a dark/light theme toggle, a prefers-color-theme CSS style, or both?

[ajxs]

I'll have a look at what I can do with prefers-color-scheme. It seems like a good solution. Thank you for the suggestion!

[kyleyeats]

The colors are fine. It's the text measure (around 90) that's having the user do too much work. That should be around 55-60.

[ajxs]

I've never heard this term 'text measure' before. Do you mean the number of characters per-line in the main content column? I tried to research the optimal column width, but the answers seem to vary so much. Just doing a quick search online right now: This source[1] says 55-100, which is a pretty big range. Although this source[2] claims that research suggests that "Reading speed was highest at 95cpl, and lowest at 35cpl on screen".

I'll take your suggestion on-board at any rate, and might make some adjustments to the font-size, or cpl. Thanks for your help!

1: https://medium.com/ben-shoemate/optimum-web-readability-max-...

2: https://www.viget.com/articles/the-line-length-misconception...

[kyleyeats]

Yep, that's the one. It depends on how many curveballs you're throwing at the user. I'm working on a monospace library that looks wide at 48 characters per line.

That's what the inverted text is here, a curveball. It's not the problem itself but it is asking more of the user every line. Just eyeballing it, .blog-entry looks correct, at least text measure wise, with a max-width of 500px.

[olddustytrail]

If you have to use Reader View that is a clear sign that the website is broken.

[Andrex]

The point of a dark theme is to be... dark. What darkness of gray would be agreeable to you? Just curious. #111 too dark? #444?

Anything #666 or higher is way too light for an aesthetically-pleasing dark background imo.

[cratermoon]

Web accessibility guidelines suggest a minimum contrast ratio of 4.5:1, or for AAA success 7:1. https://webaim.org/articles/contrast/

At 13.5:1, the contrast ratio on your site (#D8DAD7/#0F100F) is a bit much. With a background of #444444 the ratio would be 6.92:1, just shy of a AAA result.

You can check your colors at https://webaim.org/resources/contrastchecker/

[selfsimilar]

WCAG doesn't define a maximum contrast.

edit:

Interesting discussion about the effect of fonts, dyslexia, and dark-mode wrt "too much contrast" in this UX StackExchange thread. https://ux.stackexchange.com/questions/123504/maximum-contra...

[cratermoon]

Yes, I know. The question was about what is "dark enough", given a light foreground text. #444444 is dark enough.

[Andrex]

I'm out of date then, I thought high contrast was desirable.

Edit- also I'm not the OP.

[zamadatix]

I don't think you're out of date rather the parent is conflating WCAG saying "don't have contrast less than" as if it meant "your contrast should be near".

[chaxor]

I think it's perfect fwiw

[jkercher]

I think he's saying the text should be more muted like the copyright at the bottom.

[mxmlnkn]

Interesting to see another opinion. I love #FFF on #000 and I hate those low-contrast off-white + off-black "dark" themes like they are on codeberg and forgejo. Bonus trigger points if they have some color mixed in, e.g., #D4D4D8 on #171E26. I was always wondering why would anyone would do that.