Grey font on websites - some so pale they are difficult to read. What is today's design brief on font colour?

Question

What is the design standard for font colour on websites?

I am finding the use of pale grey makes some of the text extremely difficult to read.

Surely readability should also extend to being able to see the text clearly without having to lean in and squint at the screen.

Answer 1

You should refer to the W3 on accessibility.

For guidelines, refer to the w3 guidelines for Understanding SC 1.4.3 : Minimum Contrast

They refer to section 1.4.3

People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable even if the person does not see the full range of colors. It also works for the rare individuals who see no color.

Material design also has a color tool which judges legibility when you select text and backgrounds.

Material Color

As an opinion piece, Wired had a good article last year: How the web became unreadable.

Text that was once crisp and dark was suddenly lightened to a pallid gray. Though age has indeed taken its toll on my eyesight, it turns out that I was suffering from a design trend.

Answer 2

Sufficient contrast is on of the 7 Things Every Designer Needs to Know about Accessibility.

The standard for web accessibility is the Web Content Accessibility Guidelines (WCAG) 2.0, which has several "success criteria" related to colour and contrast. The most basic success criterion related to colour contrast is SC 1.4.3, which says:

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

• Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

• Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

• Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

The primary target group of this success criterion (SC) is people with colour vision deficiencies, but fulfilling this criterion also makes sure that contrast isn't too low for the population at large (or at least most of them; see also SC 1.4.6, which requires a contrast ratio of 7:1).

Insufficient contrast is a very frequent issue, as Julie Grundy points out in her article Three common accessibility pitfalls for developers: colour contrast.

There are many tools to help you either check contrast or find accessible colour combinations, for example:

• WebAIM's Color Contrast Checker,
• The Paciello Group Colour Contrast Analyser (free and open source),
• Color Safe - accessible web color combinations.
• Joe Dolson's Color Contrast Spectrum (you enter a colour and the tool gives you a spectrum of colours with their contrast ratio compared to the colour you entered).