Its getting harder to read texts on a smartphone or laptop. I constantly catch myself on the fact that squinted and held the screen close to the face. I even started to worry for your eyesight.
I have long been irritated by this problem, but the last straw was the fact that the Google App Engine that I work with every day, suddenly out of the clear became barely visible. The text that was just contrast and dark, turned deathly pale. Yes, with age, my eyesight is falling, but in this case I clearly suffer from the fashion trend. In design circles it has become fashionable to reduce the contrast between text and background, making the font difficult to read.
First started by Apple and then this trend has joined Google and Twitter. Maybe not all consider typography as an important element of design, but it actually means a lot. One of the reasons why the Internet has become our main channel of information availability. “The power of the web is in its universality — wrote its Creator Tim Berners-Lee.
— The fact that it is available to everyone, regardless of their physical abilities”. If the information transmitted through the text is hard to read, it automatically reduces its availability to those who have not very good eyesight or not too modern device. Because on the Internet we are not only looking for the information you need, but also receive and provide essential services, every person should be able to see whats happening on the screen.
Web designers should ensure that the text was available for most users regardless of their view. As a physicist by training I decided to find criteria for the visibility of the text. The old design Google App Engine old-fashioned, but everything is perfectly visible. Modern design with small and pale text.
It is easy to guess that the main precondition for the intelligibility of the text is the contrast — the difference between font color and background. In 2008, the organization of the Web Accessibility Initiative has developed a common standard for creating readable pages. This standard uses numeric values. If the text and background have the same color, the contrast between them is expressed by a ratio of 1:1.
For black text on a white background (or Vice versa) is 21:1. In the guide for web designers stipulates a minimum level of contrast of the font to 4.5:1, and its recommended level is not less than 7:1 (to support readers with low vision). These recommendations until recently clearly defined the limits of readability. But todays designers are breaking the boundaries.
The contrast levels in 2008. For example, in the corporate manual of typography Apple stated that designers must adhere to contrast ratio 7:1. The recommendation itself when it is printed with a contrast ratio of 5.5:1.
Excerpt from guide Apple developer. Google offers the user to use the same ratio — 7:1. And then encourages you to add transparency 54%, which ultimately translates into a contrast ratio 4,6:1. It is not surprising that the choice of Apple and Google, who themselves are teetering on the border of readability, sets the standards of web design for other companies.
It was not always so. Initially, the text was very legible. A web browser created by Berners-Lee in 1989, used a clear black font on a white background and the links were blue. This default style has become a standard in the computer NeXT.
And even the Mosaic browser, which was launched in 1993 and then used black text on a gray background, over time, changed the background color to white. Introduced in 1996, HTML 3.2 expanded the set of characteristics web design by specifying a range of colors for text and background. Although this set consisted of 216 colors that hardly existed at the time the 8-bit screens can adequately play them. When they were replaced by screens with a resolution of 24 bits, the designers abandoned the flashy colors of the 1990-ies in favor of more exquisite flowers. Became available pastel backgrounds and elegant fonts.
Then designers were still limited to the set of fonts installed on a particular computer. Most of these fonts were very clear and well-readable, so designers could use the texts for lighter shades. By 2009, the floodgates opened. Have the opportunity to download any of the fonts and add them to any pages of the sites.
With the development of LCD technology and the advent of screens with higher resolution there was a fashion for more delicate outlines of the letters. The leader of the trend was Apple, who appointed Helvetica (Helvetica Neue Ultralight) your system font in 2013 (however, Apple then receded back, entering the option selected text). Thus, the improvement of the quality of the screens designers began to use lighter fonts, thinner lines and less contrast.
When I asked the designers why the gray font has become so popular, many referred to the “Directory printer”. This guide cautions against a too strong contrast, recommending instead a black font (#000) to use a very dark grey (# 333). Many designers believe that black text on white background causes eye strain and the choice of softer colors makes the page easier to read. The author of the blog the Magic of CSS-Adam Schwartz also makes this argument. “The sharp contrast between the black font and white background can create unnecessary eye strain (the reverse is also true.
This is very subjective, but it is worth paying attention to)”. Let me be “captain obvious”. Schwartz himself acknowledges the subjectivity of his withdrawal. Another common excuse is that the contrast the text with difficulty perceive people suffering from dyslexia.
However, research in this area is recommended to reduce the brightness of the background, rather than reduce the brightness of the text. Several designers sent me to the article by Ian storm Taylors “advice to the designer. Never use black color”. In it, Taylor puts the thesis that pure black is more a concept than a color.
“We see dark objects and take them for being black,” he writes, ” whereas in real life it is difficult to find the item really black. The road surface is not black, your chair in the office not a black side panel in the app Sparrow not the black color as the letters on the pages”. Taylor relies on the combination of color shades. Instead of pure black, he uses a dark grey, and the interfaces look great and in bright daylight natural light, and in the dimness of twilight.
More opportunities gives the color white, because the operating system, especially on mobile devices, is constantly changing the brightness and color depending on the time of day and lighting. This brings us to the main problem. Adam Schwartz noted. “The color we see, is not so neither for the computer nor for the human eye”.
What you see, looking at the device, depends on many factors. From your browser device (smartphone or computer), quality of display, lighting, and most of all — the characteristics of your vision. Creating design of a site and not thinking about the consequences (that is, when the values of brightness and contrast that you entered in the code will change depending on the settings of the physical screen), you ignore the result that they themselves create.
Sitting in a perfectly lit office behind a large monitor with fine resolution, you can decrease the contrast of the text and not think about potential users. But isnt that a disclaimer in front of the people for whom you work?. My call is addressed to all web designers. Lets get away from unnecessary frills and get back to printing principles of printing — may the font be black regardless of style and size. So we will support not only people, whose eyesight has weakened due to age, but for all of you who read the texts in small and not very bright screens.
It may not be too stylish or trendy, but lets take care of those who design aesthetic goes sideways.