Coping With Gray Text

//
I am desperate and angry over the “trend” in graying fonts for the specious reason that it is more readable than black on white. It isn’t. Sometimes it is impossible to fill out a form because the font is so unreadable. Rather than take your time reiterating my lament, may I ask whether there is any recourse. If I thought there was any chance of getting a response, I’d ask Bill Gates himself.

Well, to start with, Bill wouldn’t be any help at all. He’s not been involved in the day-to-day workings of Windows for many years. Besides, this isn’t a Windows problem, it’s a website-design problem.

And it is a problem. It’s one I hear frequently.

Unfortunately, the remedies are either extreme or non-existent.

Become a Patron of Ask Leo! and go ad-free!

Summary

  • Text colors other than pure black are more and more common, with shades of gray being a current design favorite.
  • Many people have difficulty reading text with some of the currently popular colors.
  • There’s no single good solution to work around these poor design choices.
  • Windows has a “high contrast” mode.
  • Google Chrome has a “high contrast” extension.
  • Complain to individual website owners for their design decisions.

Too many shades of gray

Black is out. Gray is in. At least when it comes to text in website design, it appears.

Many shades of gray.
Many shades of gray.

And, of course, there’s no agreed-upon definition what color “gray” should be. Website and theme designers tend to pick something that appeals to them and run with it. The result is that you might have a light gray, a dark gray, a darker gray, or something that is so dark gray that for most people it’s nearly indistinguishable from black.

For most people. And therein lies the problem.

Gray areas aren’t always gray

For a wide variety of reasons, ranging from display brightness and contrast settings to the individual characteristics of someone’s eyesight, it’s possible for what some would consider to be even a darkish gray to appear so light as to be unreadable to others.

For those others, only black will do.

Aside from fiddling with brightness and contrast settings (which may not even be present on some display hardware) there are precious few options.

Too few options

There is no single approach to fixing this.

Well, other than convincing website designers to stop using gray or give visitors a way to make a choice. So far, this approach seems unsuccessful. Even Google’s been called on the carpet for it, and they’ve done nothing.

It’s even hard to call the available tools a “fix”. At best, they’re ugly work-arounds that might make the text readable — at a cost.

Windows high contrast

The extreme approach is to change Windows display to High Contrast.

In Windows 10, just click the Start button and type “contrast”, clicking on Turn high contrast on or off when it appears in the results. That’ll open the high contrast settings. Turn it on and your entire screen will change.

Windows 10 in High Contrast
Windows 10 in High Contrast, including Ask Leo! displayed in Edge.

Yep. That’s ugly. Readable, but ugly.

Windows does include some variations on the high contrast settings you can play with (“High Contrast #1”, “High Contrast #2”, “High Contrast White”, and “High Contrast Black” shown above). None of them are … pretty. But they are readable.

Depending on your circumstance, this may or may not actually help, as websites can explicitly specify colors that bypass the Windows settings. Similarly, images are not altered (as you can see in the Ask Leo! logo in the example above).

Google Chrome high contrast

If you use Google Chrome, there’s a high contrast browser extension.

When installed and enabled, it controls the look of the web pages displayed in your browser.

Google Chrome high contrast
Google Chrome high contrast displaying Ask Leo!

Once again, it might not be pretty, but it works. In this case, of course, it’s limited to what’s displayed in your browser window.

The Google Chrome extension includes additional approaches to play with, including “Increased Contrast”, “Grayscale”, “Inverted Grayscale”, “Yellow on Black”, and “Inverted Color” (shown above).

You are not alone

Grey fonts are definitely a problem for many people.

And, as I indicated, the problem might not be evident to everyone. One thing you can do is let website owners know about your experience.1 While they might not address it based on a single complaint, if enough people let them know, perhaps, maybe, they’ll take heed.

Unless, it appears, they’re Google.

Podcast audio

Play

Video Narration

Footnotes & references

1: An early design of Ask Leo! that I’d commissioned used what I thought was black, but was actually a dark gray. It wasn’t until a reader pointed out the problem to me that I confirmed and fixed the issue. Everywhere, I hope. The complexity of website design is another reason issues like this are sometimes difficult to correct.

50 comments on “Coping With Gray Text”

  1. One of my biggest beefs, especially when it happens on a news, or tech site. How this looks to the Dev, or writer, is not always how it presents to us as readers unfortunately. When I create things, I am often surprised at the difference between what is on my screen when I create the content, and the finished product that people see on the web.

    • I live in New Zealand and used to work for a Government Department. Was in a team that worked in with the IT and Web team, and the one thing they always did was develop a basic page of what they were going to do and then use a test machine to see what it looked like in various browsers, and on not only Windows, but also Macintosh and Linux as well.

      There aim, not always 100% successful, was to have live web pages look visually identical on all 3 major operating systems and the top 5 browsers on each system by usage data statistics. Time consuming? Absolutely. But they only had a handful of people complain about colour issues and as I recall they were all due to flaky or end of useful life of video cards at the viewers end.

    • Thanks for pointing that out. I (hopefully) updated the site to display comments in true black. As a site owner it’s sometimes difficult to catch all the instances of the problem.

  2. I’ve had a similar problem, only due more to a weird problem with my eyesight. I found a Chrome extension called Dark Reader. It is far better than Stylus or Stylish theme colors overlay extensions. Dark reader makes every website “dark”. I mention it here because on its drop-down menu, you can set many different colors- including for the font on every website.

    • I’ll second the recommendation about Dark Reader. It has been designed to solve a different problem, but maybe it can be used against grey text, too.

      It has become painful for me to stare at a white screen all day long. So I enable the so-called dark mode anytime I can.

      Dark Reader is an extension for Firefox, Chrome and Chrome-based browsers. My experience has been it will produce absolutely remarkable combinations of colours on almost any site : very readable, easy on the eyes, and beautiful.

      I have found that two of the pre-sets are enough to cover almost all cases : Dark / Static, and Dark / Dynamic.

      Since what Dark Reader does is change the colours (especially the text colour), and provided you don’t mind a dark mode, it might be a solution to the grey epidemic, too. It has a Light mode, which replaces the dark background with a light (but not white) one.

      To be frank, I haven’t even noticed there was a grey text epidemic, probably because I use Dark Reader. Oh ! and by the way, Dark Reader’s text is grey (more often coloured grey), but since it’s on a dark background (not totally black, either), it’s very, very readable.

  3. I’m red green color blind and the trendy red on black doesn’t work for me. I’ll check out these tricks. One that’s quick and sometimes works is to click in the text a hit control A. It selects everything and makes it readable.

  4. I absolutely agree with the abominations of low contrast. I have a form email I send to many of these sites. Few have taken my complaint seriously. We need more people to complain!

    A great site dedicated to this problem: ContrastRebellion.com

    ContrastRebellion backs up our complaints and opinions with usability experts, experiment reports, etc. I couldn’t make this plainer myself.

  5. Having become one of those to whom the gray text has become a problem, I find that if I highlight that page (either using CTL-A or clicking and dragging my mouse cursor, the text then becomes highlighted against a darker background. I have just resigned myself to using this method since there are (now) fewer sites that use these color schemes. Yes, it’s sometimes a pain using a couple of extra steps, but being retired, what else is demanding my time? Plus, it doesn’t happen that often.

    • For several months before my cataract surgery, I used High Contrast Mode on my Win 7 PC. I also highlighted smaller areas of text to make it readable. As Leo says, it isn’t pretty, and you lose some things, but the images are still in their original form.

  6. The Contrast Rebellion web site looks good.
    I push back on feeble web sites whenever I’m provoked. So far, I haven’t found a “money” site on whom I can impose a cost, e.g. by telling them they’ve lost a sale.

  7. I removed an off-topic hate speech political rant from the comments. We do our best to remove inappropriate content, but we all have other jobs and between the 3 of us we check in a few times a day. If you commented to draw attention to this and can’t find your comment, it’s because when a comment is removed, all direct responses to that comment are automatically removed with it

    • Thank you for your vigilance. I trust AskLeo.com more than any other tech info web site for consistent, useful, and pertinent information, and removing off-putting, off-topic comments adds to my enjoyment of the site.

  8. I, too, am frustrated with the recent trend toward light text. Apparently graphic artists have been taught to use gray text so there’s not so much “black” on the page. The human eye distinguishes items by contrast. When there’s little contrast between the text and the background, it’s harder to read the text. I’ve found an easy solution for both this contrast problem and page clutter, by using an add-on variously called Reader View or something similar, based on which extension is used. Such extensions often let you choose a light color, black, or sepia (a tan color), so contrast is enhanced. They also show only the text on the page, without all of the other clutter. So it’s much easier to just focus on the text, with better contrast. Here’s a link to Reader View that’s found in the Chrome Web store: https://chrome.google.com/webstore/detail/reader-view/ecabifbgmdmgdllomnfinbmaellmclnh. Also, your browser may include such an extension. I use Vivaldi, which avoids Google Chrome but lets you use Chrome extensions. Vivaldi includes such an extension built in, but some pages don’t work on one or the other, so it’s nice to have both.

  9. I am sure that poor readability is intentional when the font is small grey text on slightly lighter grey background. It is used for stuff they don’t want you to read, like unsubscribe or restrictions or automatic spam sign ups. Sort of like the tiny white print that TV commercials flash for 3 seconds to meet legal disclosure requirements.

  10. Another clumsy work around I use is to highlight the text, open Libre or Word and copy the text unformatted into it. Then I have the choice of fonts, etc.

    This is clearly an evil plot on the part of the Left. Or the Right; I’m not sure. Hard to tell them apart.

    • I use this option as well if needed, but it’s rare for me. I sometimes just increase the font size by using control + on the computer or stretch the screen on my phone.

  11. Some web design is almost like a 5 year old with a new box of crayons – use as many as possible. Ditto fonts.
    Now they’ve discovered grey

  12. An important note about recently removed offensive comments

    Ask Leo uses an “after publish” moderation technique. That means that comments are generally published immediately, without moderation (there are some keyword based exceptions). Then several times a day I and my staff review recent comments and remove the inappropriate – almost always simply comment spam.

    This allows you to participate in the discussion immediately. It does mean that offensive comments will appear for “a while”, since we can’t spend 24 hours a day watching for them.

    The only solution I’m aware of would be to switch to be fully moderated – meaning every comment would have to be manually approved before it appears. Not only is that sad, but it’s a bucket of work that I can’t afford. If I ever resort to that I’ll be making other changes to how comments are handled here. The current technique has actually served us well for over fifteen years.

    I apologize to anyone offended by the now removed comment(s).

    Leo

    • Trying to moderate comments on a web site is like standing on the beach with a broom and trying to sweep out the incoming tide.

      • Actually it’s worse — 90% of the water is completely benign. It’s the oily residue that sometimes sneaks in. Separating the two can be a challenge.

      • Yes, some words are blacklisted, but as with spam, you can’t catch everything. As thing come up we can add more words.

      • Actually I don’t truly blacklist — there’s no immediate deletion based on that. There are keywords that will force a comment into moderation. The problem is that any word we might blacklist can often be used in a reasonable context, so we need human eyes on it to make the decision. Similarly links (ANY link) or email addresses in the comment will put a comment into moderation.

        I also run an anti-spam service that does a pretty good job filtering out the worst automatically, though.

  13. I agree with the comments posted by Frank Bacon. I have used the “highlight-copy- paste” into Word for may years in order to get around the unreadable
    “grey” text silliness. There are other website issues where I also use this approach ; eg web pages that make it impossible to “print” or easily read the page. By highlighting and copying the relevant text into a blank word document, after which, one can alter the text to almost any style, color or font you like and then save it and/or print it out in glorious B&W.

  14. My browser has a “Save Page As” command in the File menu with a .txt option; this can be useful when trying to save information on a web page in a compact and highly readable form.

  15. It seems that websites are designed by really good artists. The trouble is that there are likely no coloured blind people on the review team that approve the results. One in 200 women and one in 12 men are coloured blind to one degree or another.
    The worst designs often use red script on a black background. This is true for printed matter too. Then once an organization adopts these colour schemes they get married to them and any remedy takes forever to be implemented.
    KISS needs to be added. If your message is important then make sure it is readable easily and quickly.

  16. I suffered from the “gray” problem (sometimes even “gray on gray”) but found that the Chrome extension “High Contrast” solved all my problems. The “Increased Contrast” setting is the closest to whatever the website’s appearance is, but with all text appearing black on a white background. No funky color changes, just an increase in contrast, especially with text.

  17. I think its much easier in settings, Personalization, under colors just scroll down and select “Light” instead of “Dark”

  18. I’ve had the same complaint with the customer support discussion forums at Comcast. But then I had my cataracts done back in November, and the problem just went away. Sad to say, but yes, the grey stuff really is rough for seniors and others with a vision disability.

  19. When I do a Ctrl + C and then paste the document. The entire document is grayed with a line down the left hand margin??
    Nothing I can find will restore it to black. I am using Windows 10.

    • Which program are you pasting the text into? Notepad is a good choice because it is only black on white with no formatting to mess it up.

  20. A thought on the problem of fonts that are unreadable by persons who are color-blind: They may violate the Americans with Disabilities Act. The prospect of damages, plus attorney’s fees, might get some folks’ attention.

  21. I blog on WordPress.com. Even the free plans now allow writers to customize the appearance of each site, including the color and size of the text. My main site now has a white background with definitely black text in my preferred Verdana font. I was also able to change another one of my sites to a “high contrast” theme with a black background and white or bright colors for the text. Thank you, WordPress!

  22. Thank you, thank you, thank you! I thought I was alone in hating these gray fonts. Contrastrebellion.com is a great addition to my bookmarks. I will immediately add on one or more of the recommended extensions.

  23. Twenty-two years ago I wrote a program which spit out hundreds of web pages to display the 140 “named colours” supported by web browsers, in a variety of ways. Even today, different browsers display many of those colours differently. At that time, I categorized honeydew, oldlace and linen as shades of gray, (based on the Windows Explorer of the time) but modern browsers have fixed them.

    Would you believe that “lightgoldenrodyellow” is probably hard-coded into your browser? That’s how I built the list, by dumping “explorer.exe” in hex and character form.

  24. Bottom line on gray type: There’s no accounting for taste!

    Many people in charge of web “design” are in fact simply web “builders” who may very well be adept at making sites WORK, but not very skilled at making them attractive or readable, two VERY important characteristics.

    What good is it to assure that all the links on a site perform as they’re supposed to….if you can’t READ them?
    What’s the point in having hard-hitting sales copy if it’s created in white type on a yellow background? (Arguably worse than gray on white.)

    Smart site builders have a special person or sometimes an entire department in charge of “look and feel”, but, alas, both “looking” and “feeling” are as prone to individual subjectivity as form and function!

    In short, web design is like everything else. There’s GOOD….there’s BAD……and there’s the truly DIS-FUNCTIONAL.

  25. Whenever I encounter text color or contrast problems on the web, one “workaround” fix I will immediately try is to right-click in a blank area of the web page, and then click “select all.”

    All text on that web page is instantly highlighted — in Windows 7, at least, in an inverted white-on-blue font — which is ugly but usually MUCH more readable than the website’s own choice.

    Hope this is of help…

  26. There is too much on this page for me to read, however, I think that Apple are among the worst offenders.
    All the paper work supplied with their sold products, iPhones, iPad etc is in this form, pale grey text on white paper. Completely unreadable.

  27. In response to BobD’s comment I have recently changed my Power Supplier from Scottish Power to Octopus and I informed them that the reason I was changing supplier is because it is impossible to read their website because of their exceedingly poor text colour choices, for example yellow text on a pale green background. In conversation with their customer services I told them it didn’t matter how many offers they made me for cheaper power unless I could see my account the whole thing was pointless……..

  28. The simplest and quickest fix is to hit CTRL-A or select All and this highlights and contrasts the text without having to change settings. You can also highlight with your mouse.

  29. If you use Chrome browser, navigate to the Chrome Web Store and add the extension Font Rendering Enhancer. I’ve been successfully using it for years on my Chromebook laptop and it has a 5-star rating.

    “Font Rendering Enhancer for Chrome. Darker and clearer text on the pages (http and https).
    Description:
    Font Rendering Enhancer comes from Opera Font Rendering by thunder13. Darker and clearer text on almost every page (http and https). Modified and ported Mac OSX Font Rendering by proxxy (from Opera on Presto engine).”

    • I was very hopeful that Font Rendering Enhancer would work for me because I use Chrome a lot. However, installing it made no difference even though I moved the font width slider from 0% to 100% and back again, and refreshed pages after each slider movement. Web sites checked included Wikipedia (which normally looks just fine), hackernews.com (which uses quite faint text; mentioned at contrastrebellion.com), and Google search results.

      BTW, the extension was last updated in 2014. The web store says the extension is compatible with my device.

      Am I doing something wrong?

      • I’m not quite sure … I’ve had the extension for years without entering the options but checking now, all I’m seeing is the slider to move the font thickness. Whereas when I installed it, there were several options including choosing a specific font from a list for webpage rendering, some fonts being much easier to read. And this continues working on my extension, even though it appears the option is no longer available, thus I assume the ease for me of reading webpages continues from a prior setting that continues. I wear glasses for nearsightedness; for reading they are terrible. This is why my laptop is so good because I can read it without the glasses. So … when you are on the Font Rendering Enhancer page, there will be a link for similar extensions. See if anything else they have will work. It’s very easy to try and remove all of theses Chrome extensions.

  30. Are the Chrome extensions available on an iPad? I can’t find them here if they are. I deal with four machines and three or more browsers usually but if I could do just one thing to help the grey on gray problem I’d use it a lot.

  31. re….am desperate and angry over the “trend” in graying fonts

    Why is the word trend in quotes?
    Why is such a trivial issue enough to cause such severe emotions?

      • If web designers want users to be “sticky,” to stay engaged, to keep reading, they will not make it tiring to spend time reading.

        Here’s another commentary on this trend:

        “It’s been getting harder for me to read things on my phone and my laptop. I’ve caught myself squinting and holding the screen closer to my face. I’ve worried that my eyesight is starting to go. These hurdles have made me grumpier over time, but what pushed me over the edge was when Google’s App Engine console — a page that, as a developer, I use daily — changed its text from legible to illegible. 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.”

        https://www.wired.com/2016/10/how-the-web-became-unreadable/

Leave a reply: