-
Notifications
You must be signed in to change notification settings - Fork 66
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Too much contrast #54
Comments
I agree that it can be done wrong. But |
@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? |
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.
|
#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. |
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:
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.
In my case, I do not make choices about what font end-users get, so I think black on white is the best choice. |
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. |
|
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 There's a CSS media feature and client-hint for contrast preferences, called 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:
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). |
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/ |
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. |
I find the site when |
@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 👍 |
once again, on OLED displays it causes pixel delay on scrolling, obfuscating the text; it also causes halation. |
Even the 'contrast rebellion' you linked to uses #1b1b1b text color on their off-white #f0efd1 background. Yes contrast is important, but to much of it is just painful.
The text was updated successfully, but these errors were encountered: