Comment by Jolter

3 days ago

To the author: please use a darker font. Preferably black.

I’m only in my 40’s, I don’t require glasses (yet) and I have to actively squint to read your site on mobile. Safari, iPhone.

I’m pretty sure you’re under the permitted contrast levels under WCAG.

70 comments

Jolter

Reply
kaszanka  3 days ago

Surprisingly only the headings (2.05) and links (3.72) fail the Firefox accessibility check, the body text is 5.74. But subjectively it seems worse and I definitely agree with you that the contrast is too low.

  • mhitza  3 days ago

    Contrast looks good for the text, but the font used has very thin lines. A thicker font would have been readable by itself. At 250% page zoom it's good enough, if you don't enable the browser built-in reader mode.

  • KwanEsq  3 days ago

    I wonder if it's because of the font-weight being decreased. If I disable the `font-weight` rule in Firefox's Inspector the text gets noticeably darker, but the contrast score doesn't change. Could be a bad interaction with anti-aliasing thin text that the contrast checker isn't able to pick up.

    • captainbland  3 days ago

      I'd say it looks pretty readable on android although I still wouldn't describe it as good. I wouldn't say I feel encouraged to squint. But possibly different antialiasing explains it.

  • zachrip  3 days ago

    I think the accessibility checks only take into account the text color, not the actual real world readability of given text which in this case is impossible to read because of the font weight.

shortformblog  3 days ago

The problem is less the color than the weight. If it was 500 rather than 300 it would be perfectly fine.

argsnd  3 days ago

Safari’s reader mode is good for this. All you have to do is long press the icon on the left edge of the address bar.

  • dwayne_dibley  3 days ago

    LONG PRESS????!?! you legend. How does one find these things out.

    • Jolter  3 days ago

      Like this, by word of mouth. That’s how Apple has done UI design since they stopped printing paper manuals.

      - ctrl-shift-. to show hidden files on macOS - pull down to see search box (iOS 18) - swipe from top right corner for flashlight button - swipe up from lower middle for home screen

      Etc, etc

      8 replies →

    • finger  3 days ago

      So that’s why Reader mode sometimes shows up directly when I click on the icon, I must be long clicking it by accident.

  • Jolter  3 days ago

    Yes, it’s a great workaround but website owners should not make me do that.

vovavili  3 days ago

I instinctively use Dark Reader on any page with a white background so I was genuinely surprised by your comment at first.

readingnews  3 days ago

Completely agree with this comment. Had to cut / paste it into vim and q! when done, was getting a headache.

  • prmoustache  3 days ago

    Even as a Vim user I find this completely overkill when you can just press the reader mode button on the browser.

  • maalhamdan  3 days ago

    document.querySelectorAll('p').forEach(p => p.style.color = 'black');

    Use this command in the developer tools console to change the color.

rrreese  3 days ago

Your feedback is noted! I'll darken it down a few nootches and test it on mobile. Thanks for the feedback

  • billev2k  3 days ago

    Please: Not "a few notches". All the way. Black. That is if you actually care if people read your posts.

contravariant  3 days ago

I'm also pretty sure 14 points font is a bit outdated at this point, 16 should probably be a minimum with current screens. It's not as if screens aren't wide enough to fit bigger text.

  • ncts  3 days ago

    That's good guidelines and all, but meanwhile you are posting it on a site with..

      .default { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color:#828282; }
  .admin   { font-family:Verdana, Geneva, sans-serif; font-size:8.5pt; color:#000000; }
  .title   { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color:#828282; overflow:hidden; }
  .subtext { font-family:Verdana, Geneva, sans-serif; font-size:  7pt; color:#828282; }
  .yclinks { font-family:Verdana, Geneva, sans-serif; font-size:  8pt; color:#828282; }
  .pagetop { font-family:Verdana, Geneva, sans-serif; font-size: 10pt; color:#222222; line-height:12px; }
  .comhead { font-family:Verdana, Geneva, sans-serif; font-size:  8pt; color:#828282; }
  .comment { font-family:Verdana, Geneva, sans-serif; font-size:  9pt; }

    • dsr_  3 days ago

      Which is why Firefox has memorized that this site needs 170% zoom.

    • nottorp  3 days ago

      Haha I keep forgetting that. Fortunately the browser remembers my zoom settings per page. I'm pretty sure the font is now at 16 or something via repeated Cmd +.

  • skydhash  3 days ago

    10 point at 96 dpi or with correctly applied scaling is very readable. But some toolkits like GTK have huge paddings for their widgets, so the text will be readable, but you’ll lose density.

jasode  3 days ago

macOS/iOS Safari and Brave browsers have "Reader mode" . Chrome has a "Reading mode" but it's more cumbersome to use because it's buried in a side menu.

For desktop browsers, I also have a bookmarklet on the bookmarks bar with the following Javascript:

  javascript: document.querySelectorAll('p, td, tr, ul, ol').forEach(elem =>  {elem.style.color = '#000'})

It doesn't darken the text on every webpage but it does work on this thread's article. (The Javascript code can probably be enhanced with more HTML heuristics to work on more webpages.)

  • silvestrov  3 days ago

    Some css files abuse !important so you might have to add that too:

        {elem.style.color = '#000 !important'}

Aerroon  3 days ago

On my android phone it's perfectly legible. Moving my phone away it's only a tiny bit worse than HN.

Is this maybe a pixel density of iphone issue?

I wouldn't mind a darker and higher weight font though.

bayindirh  3 days ago

The font is dark enough, yet the weight is too light. Hairline or ultrathin or something. It's eye straining.

specialp  3 days ago

>I don’t require glasses (yet)

One day try throwing a pair on you'll be surprised. The small thin font is causing this not the text contrast. This and low light scenarios are the first things to go.

  • nottorp  3 days ago

    > The small thin font is causing this not the text contrast.

    Whatever causes it, I do wear glasses (and on a recent prescription too) and the text is still very hard to read.

avazhi  3 days ago

Your iPhone has this cool feature called reader mode if you didn’t know.

As for mentioning WCAG - so what if it doesn’t adhere to those guidelines? It’s his personal website, he can do what he wants with it. Telling him you found it difficult to read properly is one thing but referencing WCAG as if this guy is bound somehow to modify his own aesthetic preference for generic accessibility reasons is laughable. Part of what continues to make the web good is differing personal tastes and unique website designs - it is stifling and monotonous to see the same looking shit on every site and it isn’t like there aren’t tools (like reader mode) for people who dislike another’s personal taste.

  • Jolter  3 days ago

    I don’t know, I got 140 upvotes on a nitpick so I think others agree with me it’s hard to read.

    • avazhi  3 days ago

      Didn't say it wasn't. I said invoking an accessibility standard when it comes to a guy's personal website is laughable because the way it was said implied he was compelled to change his site because some bureaucratic busybodies somewhere said he should. Unless you are a business or a government, most people aren't overly concerned about accessibility, nor should they be - especially if it comes about only through guilt tripping or insinuated threats.

      1 reply →

  • gkanai  3 days ago

    Many here at HN find that site hard to read, not just the original commenter.

baq  3 days ago

+1

Firefox users: press F9 or C-A-R

JLCarveth  3 days ago

> Please don't complain about tangential annoyances—e.g. article or website formats, name collisions, or back-button breakage.