Why do a lot of websites use a text color other than #000000 black when the background is white?
For instance, this text will be displayed using a dark grey:
.post-text {
color: #333;
}
Have some studies been made on that topic?
asked Jul 25, 2012 at 15:04
-
1@QPaysTaxes Oops, I meant to link contrastrebellion.com– NavinCommented Mar 2, 2017 at 6:24
Add a comment
|
13 Answers
High contrast such as black on white can cause eye strain. Also there is evidence that it is particularly bad for people with dyslexia. For further info read articles at UX Movement and The Bristol Dyslexia Centre.
WCAG provide details on what is acceptable colour contrast, but dont state an upper limit. Personally, I like to use a different algorithm that provides an upper contrast warning. For further info, see this article at Spider Trax: "Does W3C Get Its Contrasts Wrong?"
Slightly off topic, but check out Contrast-A, a good tool made by Das Plankton for picking accessible color schemes.
-
3Yes, it's a contrast issue. That's also why early computer screens were green or amber on black rather than white.– DA01Commented Jul 25, 2012 at 15:33
-
39I think the choice of light text and black screen in old computer systems was a function of the slow refresh rates, rather than any concern for health or aesthetics. A full screen of "white" takes longer to paint, and a slower phospor response time (decay rate etc) makes each pixel linger.– horatioCommented Jul 25, 2012 at 21:05
-
1As did I. reread what I wrote: I said that it was a functional choice rather than an aesthetic one.– horatioCommented Aug 28, 2012 at 14:45
-
2I can't find any sources for high contrast causing eye strain. Commented Mar 2, 2017 at 17:21
-
1@DA01 It's as likely that green/amber were used so often as they typically only required one type of phosphor, where as white screens typically needed a mix of different phosphors and presumably would be more expensive. Commented Jun 30, 2017 at 14:16
Off black colors (#333, #222, #2a2a2a, #444) simulates print material contrast on web typography. It can also improve readability more so than pure white and pure black as Sheff already stated above.
-
-
6
-
@TonyBolero Take a look around you with your own eyes at printed materials. The fact that monitors are back lit is what creates the harsh readability of pure black on pure white for web. You can get away with black on white for print easier than the web because the best white paper is never absolutely white and the best black ink is never absolutely black. Paper displays a different color, depending on the light source under which you are viewing it. So contrast on print material is never the same for anyone viewing the material.– rohicksCommented Oct 2, 2012 at 18:40
-
@TonyBolero ...continued... To soften web contrast and make it more readable like print material you generally want to reduce to an off black or off white for users because they are viewing it on a monitor of some sort that's back lit. Creating problems when a pure black and pure white combination is in place.– rohicksCommented Oct 2, 2012 at 18:41
-
Sounds legit. I have a discussion with a client and I want to show him some hard facts. Commented Oct 3, 2012 at 7:41
Here's an interesting piece on this: Design Tip: Never Use Black
It's not a study, but I found that interesting. The thinking is that in real world thing's aren't really black on really white and that it didn't matter some time ago, but now the displays have such high contrast that pure black on white just isn't good for you.
Black text is not the problem. Glaring white background is. That background glare is the cause of eye-strain. Grey text just makes that worse as users often strain to read - which is why grey text often takes longer to read than black text. In fact, many people can "see" a whole page of black text and get a sense of the message in an instant - almost impossible to achieve such a quick scan with grey text. In this vein, white on black can be easier o the eye - although font and size are important. The Classic Windows Desktop (white on a mid-blue/grey) is very easy to read.
On a related matter, the trend to "Flat" design has seen entire pages turn white. Apart from the glare, clickable areas become indistinguishable from the passive areas. How does that improve usability? What's wrong with: - Menus / Links / Contents being on contrasting panels? -"Buttons" having shade, gradients or bevels? - Icons remaining multicoloured and textured rather than primtive and monotone?
-
1Is there a particular study you can link to regarding the reading speed of black text versus grey text? Commented Jul 22, 2014 at 12:50
-
I like what you have to say about the glare. It feels to me like you veered off-course though when you started talking about affordance in flat design... Commented Jul 22, 2014 at 13:21
-
1I would have thought faster reading with high contrast (blacker) is self evident - but here's a study. laurenscharff.com/research/agecontrast.html - and a report: journalofvision.org/content/5/8/812. The point about "flat" design is that it seems to go hand in hand with grey text - i.e. most "Flat" websites have acres of white space. It follows that with less text there is less content to be absorbed in a given time. Combine "flat" with grey text and some people won't bother returning.– TarianCommented Jul 22, 2014 at 22:02
I am dyslexic, and have a problem with grey on white and grey on grey. I do not have a problem with black on white or black on light grey. Not all dyslexic people are the same, and not all people can read the Websites with ridiculously poor contrast that we have foisted upon us these days. Try talking your user Website and computer software people.
There is a problem for dyslexic readers by using extremely high contrast, but it has been greatly exagerated and propagated to the point of myth (see this seminal report, which nevertheless recommends "to provide sufficient contrast between elements of a page" and "use a dark text on a pale background"). There's also a trend of abuses using unduly light grey text on white backgrounds propagated by popular blogs, mainly by designers trying to achieve a pretty effect, but hurting readability.
Numerous academic papers* show that high contrast text can be read faster than low contrast; the W3C web accessiblity guidelines provide a formula for minimum contrast (see AERT). The opinionated website Contrast Rebelion provides a collection of links to academic research articles on text readability, and a rationale for avoiding light grey on white backgrounds.
*I tried to post a couple, but this site's reputation system won't let me post more than two links. Visit the links at ContrastRebelion site as the starting point for the actual research (I'm not afiliated with the site in any way).
-
If you have useful links you can still post them as text, and if they're OK one of the other users will edit them into your post for you.– JonW ♦Commented Jun 15, 2015 at 13:43
-
Thanks, I didn't know that would work. These are the links I wanted to add: laurenscharff.com/research/text_display_lvs.html , jov.arvojournals.org/article.aspx?articleid=2132608 Commented Jun 15, 2015 at 15:57
-
The Jakob Nielsen group also reminds us that Low-Contrast Text Is Bad for Usability (But You Already Knew That). Commented Jun 29, 2015 at 21:14
Using black text on white background can obviously make your screen contrast. To make your screen comfortable to view, you can change the brightness and apply for an app called F.lux. This is a freeware to make your computer color automatically changed by the time of day, no-glare on your eyes.
Actually the color is not the point, the time on staring at it matters. And the most dangerous part of your monitor and computer screen is the blue light. It can easily hurt your ocular, bring eye strain and other problems. Know more dangers of blue light with human health is really important for the further eye protection.
To avoid confusion and confirm that the question asked is still valid as of today:
Tools like Firefox Reader or Safari Reader (Desktop & iPhone) as well as major web platforms like m.twitter.com, facebook, Medium (Web and (Android-)App), apple.com, Google, recently relaunched TechCrunch as well as this website here all DO actually use 'almost black' text on white background as of today (Mar 2018) — in the technical sense the question is asking about: Not really gray but not a 100% deep black either: Values like rgba(0,0,0.84), #111111, #14171a or #333333
Some use full contrast from #ffffff to #000000 though, e.g. Amazon Kindle (Android) or www.w3.org. At least mobile screens are usually dimmed anyways.
Recently i have been involved in the building the UX of a social collaboration platform, and we were pretty serious about accessibility as well. As a part of complying to accessibility guidelines checking color contrast for key components communicating information was a major task. WCAG 1.4 (http://www.w3.org/TR/2005/WD-WCAG20-20050630/#visual-audio-contrast ) requires the color contrast to be within a certain level. I completely second the answer by sheff
When non-dark RGB colors on a screen are translated into XYZ colors in the eye and then to something similar to hue-saturation-lightness colors by the brain, small changes in RGB values will result in small changes XYZ which will then yield small changes to hue and saturation (which I will refer to collectively as chroma). When darker colors are translated to HSL, the same-absolute-size changes in RGB values will lead to larger changes in XYZ, and thus larger changes in chroma. When a darker area of a given hue/saturation is next to a lighter area with the same hue/staturation, the boundary will generally be blurred slightly (since the eyeball focuses well but not perfectly) but all areas on the boundary should have the same chroma. Even if there are non-linearities in the process of converting RGB colors in memory to XYZ colors in the eyeball, any consequent non-uniformity in the chroma will be slight.
With colors that are overly dark, however, tiny changes in RGB values may result in large changes in chroma. If there are any non-linearities in the process of converting RGB colors on the computer to XYZ colors in the eye, the variations in perceived chroma may be quite large. If an RGB value of (0,0,0) is perceived as though it's (0.0001, 0, 0) then it will appear reddish; if it's perceived as (0,0,0.0001) it will appear bluish. If one uses a background color of (96,128,128) and a foreground color of (3,4,4) the foreground and background will appear to have the same chroma. If instead one uses a foreground color of (0,0,0) the perceived chroma of parts of the text might not only differ from that of the background, but it could easily be non-constant and non-uniform. Even though the chroma of such dark objects isn't meaningful, that doesn't mean the meaningless chroma variations won't be distracting.
I am a senior citizen, still active in normal life functions. My anger is aimed at the lack of awareness on products/services that provide options to select the text, color and background most adaptable for customization, but not for practicability.
Microsoft and the collection of browsers are not in tune with the general public. MS provides a wide range of visual solutions to their "Windows" and visual offerings. Yet, the one important factor is the readability of news/media textfor the user. One would hope that MS and the browser group would provide a selection of text and color options that more closely meet the needs of individuals. My personal frustratioms carry over into ebery aspect of publication. Try reading the instructions on a food prep oackage, light tan on orange. Or white on light gray. Looks good for visual effect but ZERO for practicability. Personnaly, I tend to purchase items that compliment my life style and needs. I wish I could give up this computer and other electronic devices. Based on the single minded stupidity of the providers, that option may become reality sooner than not. I want to be ab;e to select the background, text and color (Black) allowing meto easile read the text on my computer screenwithout strain.. Period.
I am 100% with the above contribution. |All this grey text makes it extremely difficult to read on screen and paper documents, books, medication instructions etc. And it seems to be getting worse, greyer and greyer text. Has the obvious need for contrast been completely lost, till it reaches a point where text looks aesthetically sweet or cool, but has no practical purpose. I think it adds to the relegation of reading and the value of print, gradually moving towards journalism and analysis being disseminated through videos, web-inars, and pictorial media. Good as they are for some purposes they can never contain the detail and sophistication of a written report and analysis. Anyone who values print and written information content should campaign for visibility of print.Not to mention of course the social exclusion it creates for people with visual difficulties.
No, there is no problem with black text on white background. It has been a standard for decades. For this reason it is highly unlikely that it can cause problems for a majority of users. If you decide to use grey text, keep in mind that often people cannot read text in low contrast situations e.g. on mobile devices or when they are visually impaired.
A very likely reason is that grey text is visually appealing. It can often be seen in cooperate designs, in productive environments it is rarely used.
Mozilla states on their support sites that one of the functions of Reader View is to add contrast, which usually isn't necessary when you haven't reduced contrast in the first place. Their choice of colors for Reader View is a widely accepted reference of minimum contrast you should provide.
