Text has low contrast with background on Windows

[TimvdLippe]

I checked out https://tooling-report.web.app/ today and I am having trouble reading the text on the website. The contrast between the blueish/grayish text on white and grayish text on gray makes it difficult to distinguish the text for my eyes.

For some reason, I can't see the accessibility info for the text on the white background (iirc that is WAI @aerotwist ?), but for the gray background, it is not hitting the 7.0 AAA score:

Could you increase the contrast for the text to make it more readable? Maybe increasing the font weight might be a solution as well.

[surma]

Thanks @TimvdLippe. This is in the light theme, yes?

@argyleink obv I’ll leave the color choice up to you, but darkening --backpack-blue fixes this without having a significant impact on the color palette in my non-designer-y opinion :D

[TimvdLippe]

Yes this is the light theme. I was using Chrome on Windows 10. The text looks sharper on my Macbook, so this might actually be a general font issue. Still, increase the font weight or changing the color would fix it.

[argyleink]

@TimvdLippe we want you to be able to read our site! 👍 thx for sharing

Were there particular areas of the site you struggled more, cuz the description outlines pretty much all the text on the site as being an issue (everything is grey on white, or grey on grey)? Like, I would love to know which element you were showing us the contrast score for 🙂

Bug also backtracks a little bit once on a Mac (can you talk more about this please, I have windows and can seek to reproduce the poor text rendering). Perhaps Windows rendered extra thin making it hard to read?

Here's our typography stats for body copy on the site:

• default system font
• default browser font size (paragraphs)
• 300 font weight (book weight)
• AA passing contrast scores

Proper contrast for low vision folks is important to us. AAA is a score we'd strive for if we had a prefers-high-contrast media query or something and wanted to really go that extra contrast mile. Interestingly, AAA isn't just a color comparison indicator: "Note that in order to achieve a true AAA rating, section 1.4.8.1 of the WCAG also states that "Foreground and background colors can be selected by the user." - source.

I took some more screenshots as I went around the site looking for ratios barely passing or failing. Here's the most polar ones I found:

This text is slightly smaller than the body copy, is grey on grey and only 0.2 over the required AA ratio. I assume this is the hardest text to read?

We pass AAA with our text on white, but you still had issues reading it? This is what makes me think there was a font rendering issue in your Windows render.. I've seen really thin aliased type before in Windows, super hard to read stuff. Maybe our 300 weight is being rounded down to the 100 thinnest weight..? I dunno. Let's dig in more!? Nudging backpack blue a few percentage points doesnt really feel like it's going to resolve this issue, there's something deeper here I smell!?

[surma]

I assumed Tim was talking about the opener paragraph.


[TimvdLippe]

Yes I was talking about the opener paragraph and the "What is tooling.report". It seems like the font rendering on Windows is a lot more blurry than on Mac. Let me try to make some screenshots.

[TimvdLippe]

Overall picture:

Zoomed in:

Both images show blurry on my screen (it might very well be my monitor as well, although that would surprise me).

[argyleink]

Chrome or Edge or Edgium or all?

[argyleink]

fwiw, the screenshots are not blurry..

[TimvdLippe]

(This comment is posted on my Mac): The second screenshot does look blurry to me, even when I see it on my Mac retina screen. I have trouble reading the text. On my Mac retina screen, the webpage looks fine to me.

[argyleink]

we found out the issue! Windows font weight of book or 300 round down to lighter or 100! yielding type that is too thin yes.

[argyleink]

resolution will be!

• fixing Windows Chromium font weight (not acceptable to have 100 font weight for reading text)
• colors remain the same

Tim to try and debug why "just our site has blurry aspects on his monitor but not in his screenshots"

sound good?

[TimvdLippe]

Fwiw the screenshots look blurry to me 😛 So Windows 400 is 💯 readable to me and would solve the issue I saw on my Windows machine.

[surma]

The screenshots don’t look blurry but definitely not easy to read on my dpr=1 display.

[TimvdLippe]

To clarify: with "blurry" I mean "the text is hard to distinguish and read for my eyes". It might not be "blurry" per definition, but I mostly mean that I am not able to read the text without focusing my eyes and putting a lot of effort in it.

[surma]

Just read better, Tim.

There is a notable lack of antialiasing or sub-pixel rendering. So something is definitely off. But I think adding weight should sufficiently fix it.

[argyleink]

i chose to sniff and patch! then this solution isnt leaky and only patches the 1 use case that needed the weight nudge.

[jakearchibald]

I think the 'blurryness' folks are seeing is the aggressive LCD sharpening that Windows uses. A screenshot of this will always look worse than reality, since the screenshot won't be lining up correctly with monitor dots.