Too much contrast

[keenrivals]

Too much contrast

[KeenRivals]

I agree that it can be done wrong. But #000 on #fff or the inverse is doing it right.

[Seirdy]

White text on a black background causes halation, esp. for readers who have astigmatism. If you'd like a source on that: I have astigmatism and am a primary source. More seriously, there has been some experimental and plenty of anecdotal evidence.

I personally think that a background color of #0c0c0c and a foreground color of #eee is probably the maximum amount of b/w contrast that also balances accessibility.

There's a CSS media feature and client-hint for contrast preferences, called prefers-contrast. It takes no-preference, less, and more. You can serve increased-contrast pages to those who request more, and vice versa.

In addition to the contrast being too high for regular text, it's too low for link text. Rob Pike explains how color deficiency is nuanced and how blue on black can be especially tricky. The developers of the Advanced Perceptual Contrast Algorithm (APCA) for WCAG 3.0, the successor to the naive contrast algorithms used in WCAG 2.x, have treated blue as a "dark" color and yellow as a "light" one to account for how human eyes have fewer blue cones. Yellow/orange/green foregrounds stand out on dark backgrounds, and blue/purple foregrounds stand out on light backgrounds. It also takes into account the fact that small/thin text requires higher contrast.

Right now, the purple visited links have an APCA score of -63.5% and the blue links have a score of -77.86%. You should try to hit at least the mid-80s, preferably the mid-90s. Options to improve the score include:

• Changing the hue to green/orange/yellow
• Increasing the lightness
• Increasing the font width
• Increasing the font size

You can use the APCA by enabling it in Chromium's "experimental" pane in DevTools alongside the "CSS Overview" (if both aren't already enabled).

[KeenRivals]

You could come up with eye-hurting combos like blue on yellow that are bad. But I think black on white or white on black is good.

[KeenRivals]

That research doesn't seem to carry a strong recommendation, and the w3c recommendation seems to be advocating a minimum level of contrast. From the research:

They collected data from a web site where they asked many subjects to rate the combinations of many different color combinations. Their general findings were: 1) Black and white were consistently rated as the most readable; 2) Color combinations that included black were rated more readable than those that did not; and 3) Darker text on lighter backgrounds were rated higher than lighter text on darker backgrounds.

1-3 there seem to advocate the use of black, either as a foreground or a background, though foreground is better. They mention edge cases where sometimes black on light gray or green on yellow rated better, but it depended on the font used.

There are very few experimental studies of readability of web pages, based on font/background colors (Hill and Scharff 1997). One exception is a series of two experiments conducted by Hill and Scharff (Hill and Scharff 1997, Hill and Scharff 1999). The results of these studies are consistent with the pre-web research in that higher contrast was generally found to be more readable. However, again, the relationship was far from perfect. For example, they found that green text on a yellow background and black text on a light gray background were both more readable than black on white in different experiments. Just to make matters more complicated, their results often differed as a function of font-type. So, for example, the readability of green on yellow mentioned above was primarily with times new roman, but was not as strong with aerial font.

In my case, I do not make choices about what font end-users get, so I think black on white is the best choice.

[jimcullenaus]

black text on a light gray background [was] more readable than black on white in different experiments

This is the key part. While there is not an enormous body of research into this, what research there is seems fairly consistent. Black on light grey is better than black on white, and that the maximal extreme contrast is not ideal.

[fallingcats]

@KeenRivals I am not sure I follow. You agree that there is a thing such as too much contrast, but absolutely white text on an a pitch back background does not qualify?

[jimcullenaus]

#eeeeee on #111111 is so much easier on the eyes than pure white on pure black. This website is a lot better than number 2 in every other respect, but you're letting your personal uninformed opinion get in the way of creating a better website, when the actual research does not agree.

[KeenRivals]

Black and white were consistently rated as the most readable

[Seirdy]

Another good overview on the issues with pure-white-on-black: https://uxmovement.com/content/why-you-should-never-use-pure-black-for-text-or-backgrounds/

[KeenRivals]

The site is using your browser's prefers-color-scheme setting. White text on black is happening because of that. I could certainly make it so a media query detects if you want less contrast, but looking through Firefox and Chrome and I don't see any way for a user to set that. I see layout.css.prefers-contrast.enabled in Firefox which looks related but nothing at all in Chrome.

The site you linked also says that pure black on white is easier to read for people with low vision. So by fixing the site for astigmatic users I might make it worse for that group of users. I don't think there is a good way for this site to be perfect for everyone. If you can think of a clever way to serve both needs I'd take a PR. Just keep in mind javascript is not allowed.

The link colors are unintentional. I have not styled them at all. That is something I should fix. It's a side effect of implementing a very simplistic dark mode. I made #63 so I can have the satisfaction of closing it via PR later.

[turtlegarden]

I find the site when prefers-dark is enabled to be nearly unreadable. Black on white is fine, but the inverse has too much contrast. Maybe a nice #1a1a1a could help ease halation.

[Offirmo]

@KeenRivals I just discovered your site and thanks for enlightening me about strong contrast and linking to "contrast rebellion".

While I guess we all agree to a strong contrast, sites such as https://ianstormtaylor.com/design-tip-never-use-black/ advocate for slight greys. However looking at your site, your clear black on white is much crisper than https://perfectmotherfuckingwebsite.com/ (admittedly I have a quality screen)

I follow you in sticking on black/white 👍

[turtlegarden]

once again, on OLED displays it causes pixel delay on scrolling, obfuscating the text; it also causes halation.