Hacker News Reader

Hacker News

Comment by ffpip | Hacker News Reader

Full thread

ffpip

Your site is too hard to read on. Make the color of the font darker or the background lighter please.

I had to copy to a notepad so I could read it.

Edit:

Apparently, dark mode users get this - https://i.imgur.com/5PHYac1.png

I get this - https://i.imgur.com/5PHYac1.png

Light mode is terrible, dark mode is okay. Please increase the contrast in both places.

View on HN

You linked the same image twice. I'm curious what the other image was.

edit: nevermind, switched to dark mode using the dev tools. It looks like this just to be complete: https://i.imgur.com/qPv7guO.png

My bad. I must have messed up just before updating with the edit, because I definitely check the links I post

You can do that yourself as a one-off change using the web tools. On Chrome, just right click on some whitespace and click inspect. On the bottom right, you'll find an option to the change the background color of the body section. There's something similar on firefox as well.

(ideally, the website should get the fix rather than you doing it... but this works better than notepad!)

Lower the contrast? Strongly disagree. Its use of gray text on a dark blue background is pretty common. If anything, the contrast is too low; I'd brighten the text if I were the designer. But it's readable.

In my opinion, what makes it a bit difficult to read is the use of a fixed-width font for body text. Fixed width is great for code, but proportional-width fonts are easier for reading prose.

I agree with ffpip's comment. I too found the contrast to be too low for my comfort. Here are the colors used for the body element in the CSS (see https://inoads.com/style.css):

  background-color: #FDF6E3;
  color: #657B83;

Now plug those values into https://webaim.org/resources/contrastchecker/ and we can see that this color scheme fails even the WCAG AA check (see https://i.imgur.com/iK7FRfU.png for a screenshot). I think the WCAG AA is the absolutely bare minimum accessibility guideline any color scheme should conform to, otherwise we risk making the text hard to read for many people just like the text in this website is hard for me to read.

Ah, it seems this site is aware of my preference for a dark color scheme.

    @media (prefers-color-scheme: dark) {
      /* defaults to dark theme */
      body {
        background-color: #002B36;
        color: #AAA;
      }
    }

You are seeing the bright color scheme and I am seeing the dark. So when ffpip said either "darken the text or brighten the background," and I'm looking at the dark theme, that would mean reduce the contrast.

I think we're all of the same opinion: the contrast should/could be higher.

Ah! That makes sense. Indeed you had mentioned in your comment:

> Its use of gray text on a dark blue background is pretty common

That should have been a clue for me that you were seeing the dark color scheme.

There is an interesting thing happening here. It appears the colors on the site are largely either similar to solarized-light or solarized-dark, depending on whether the user's browser has a dark-preference or not.

The OP comment evidently looks at the light version (which is grey text on tan background, and which I also find a bit annoying to read). I would guess that the parent comment is seeing the dark-mode version.

Reply on news.ycombinator.com