1. What is Contrast?
You might like the Oxford Languages definitions for its basic idea. As of October 2021, the word 'Contrast' indicates a striking difference between any two ideas. But we are interested in its implications for the visual content forms.
Even these letters or fonts that you see now are shapes. And these shapes contain lines, curves and spaces. For these reasons, you can draw the following conclusions about the text body contrast.
2. The Contrast in Online Content
You can increase the contrast between a letter and its background. How to do this?
- Font ( Stroke ) Thickness. E.g., bold, extra-bold etc.
- Font Family / Font Face. E.g., Serif, Sans Serif fonts, Montserrat, Verdana etc.
- Colour of the background and text. E.g., Dark Grey text on the light grey background.
- Size of letters. E.g., larger text is easier on your eyes.
- Space between the text elements. E.g., letter spacing, words spaces, sentences length, line height, paragraph spacing, the free area surrounding the text or images.
- The number and sizes of the objects available at a time.
- Motion, animation and shadows.
- Placement of the content. E.g., central position, right corner, header section etc.
- Amount and nature of the decorative or non-content elements. E.g., buttons, SVG icons etc.
- Blur or filter effect for the background images or textures ( if applicable ).
- Borders and width of elements. E.g., border colour, thickness etc.
- Velocity differences during the Page Scrolling. E.g., the sidebar and header might cat like a sticky or fading menu. But page scrolling is fast enough.
- Changes in the transparency, hover or on-click states. E.g., the links, visited links, unselected items etc.
- Font style combinations. E.g., heading font features might be different than the body content.
These are the 14 possible ways to increase or decrease the contrast. Of course, you can expand this list with your own ideas. But at this point, you must know the different use cases of the Contrast Principle.
3. Using Contrast in Small Text Body
Assume that you are creating your small business card. As per Vistaprint.com, your business card size might be 1050 px wide and 600 px tall. Now, you want to highlight your Name and Phone Number. But you don't want your email ID to attract more attention.
Perhaps, you are using an unprofessional email ID. And if you don't own a domain, getting a custom email ending is out of the question.
So, you can do the following activities.
3.1 | Steps to Create a Generic Business Card with Low Priority for Unprofessional Email ID
- Increase the Font Size for your name and phone number. And use a smaller font for your email ID.
- Your name and number must use a dark shade of your branding colour. And your email ID should use a lighter shade.
- Place your name as well as your number in the Top Left Corner. Or, put them in the central zone. Also, your email ID should be at the bottom right corner.
Note that I am assuming that your want to use a light tone of your branding colour for your entire card. So, I must neglect the contrast building possibilities of using multiple monochromatic or geometric objects.
Let's see an example of that business card creation philosophy.
 |
| Sample 1: Email ID has lighter colour. |
And you could use a Light or Extra-light Font Thickness to reduce the importance of your Email ID. In this same manner, you can make your name or profession bolder. Such thickness variants of the same font are known as Font Weights.
Now, you might want to use the same concepts for your blogs, articles, PDFs, slideshows or illustrated graphics. But please wait for a moment. Because designing a business card or a poster might be quite different than making similar decisions for a long article.
4. How to handle Contrast for a Group of Paragraphs?
Line Height is a CSS property that helps you decide the verticle distance between any two lines. If you use a small line-height value, your readers see a lot of words per unit scrolling distance. But this experience can cause confusion.
And if you leave too much space between any two lines, paragraphs or objects, that choice leaves a bad impression. Because you are forcing your readers to scroll a lot. After doing so, they obtain a small amount of new information.
In an ideal world, you can use 1.4 to 1.5 as your line height factor. So, you are using fifty percent extra space than the height of a single letter.
4.1 | Line Spacing and Font Sizes in Reality
But in the real-life, your fonts might feel larger or smaller even for the same font size. Because you might be using more than one font type. For example, if I use Crimson Text font, I have to increase the font size. Or, I might decrease the line height factor.
For the same font size of 16px, I feel that Verdana font creates bigger and spacious words. And I have to increase the line spacing or line-height for this reason. But if I use Roboto, Arial or Calibri, I need to increase the font size. Otherwise, I would be decreasing the line spacing.
So, you need to find your feels-okay combination of font sizes, line spacing and font family. Only through experimentation, you will achieve this goal. Else, you can follow the expert tips to stay safe.
5. Contrast Modifications and Your Web Page Loading Time
If you use too many custom web fonts, your website will load slowly. And during this time interval, it will show the web-safe fonts such as Arial or Roboto. So, you should use a combination of a web font and a web safe universally installed font.
Why should you use the Font Combinations? Because if you keep using the same fonts, your website might have a neutral personality.
Thus, you want to understand the following insights.
- Not every Website Theme or Computer will support all the Font Weights.
- If you use a custom font, it will need to communicate to an external location. And loading for each web font can affect your web page loading time. E.g., your PageSpeed Insights.
- Contrast Management can work well using a websafe Serif font with a websafe Sans Serif font. But this combination might have been overused. So, your website might feel boring or neutral.
- The most practical way to address this problem is using a Websafe Font and a Custom Web Font in combination.
Finally, we must discuss the Unreadability of the Low Contrast Web! After all, you should know why akp.one, a project by Akp51v, is dedicated to high contrast experiences.
6. The Era of Low Contrast Hairline Thin Fonts: Akp51v's Frustrations
Yes, I am not happy. I used to open a hundred background tabs when I wanted to read. And back then, most websites featured a dark font colour. Also, the font had thicker legs and arms. I would believe that the website owners and writers wanted me to read the content.
Then, I went to college. To gain more knowledge, I reduced my online activities. After graduating in 2019, I was free. And I could resume my online activities.
But all I encountered was nothing but total disappointment. Why was I heartbroken? Well, during my four years of college life from 2015 to 2019, the internet malfunctioned. At first, I thought that my eyes had begun betraying me. So, I kept worrying.
After many months of suffering at the hands of the so-called 'modern' or 'flexible' design decisions, I arrived at the origin of this madness of low contrast thin fonts. This origin was, is and will be known as Design Philosophies or Guidelines.
WCAG Minimum Contrast Recommendations and Opacity are the only rules of this Anti-Reader Web. - Akp51v, 14 October 2021.
6.1 | The Initial Causes of Anti-Reader Websites
Quick question: If some experts use the word 'Minimum', what do you understand by it? That should indicate that it is not the absolute value of anything, right? Now, imagine that some online standard says that a Contrast Ratio* of 4.5:1 is the minimum requirement for your normal text body.
(*) - Here, the highest contrast ratio of Black Text on White BG has 21:1 contrast ratio. So, think on the scale of 4.5 to 21. And this is the AA Level of Web Accessibility.
And I love that! Because in the direct sense, 4.5 number gives you good results. Yes, even the Grey Font ( #767676 ) on white background meets this requirement. Of course, I am not complaining about this part of the story. See for yourself.
This is a Paragraph Element with #767676 as the font colour and #ffffff as the background colour white.
The real problem begins when everyone starts using this minimum requirement as the go-to Font Colour! And I used to believe that human stupidity can have some type of upper limit. The above font colour might be okay for Image Captions or Copyright Footers.
But it is the most irresponsible method of formatting and designing your paragraphs. Sadly, these so-called experts or wannabe minimalists did not stop at #767676.
6.2 | When did the Web become so Unfriendly to the readers? Answer: Opacity 'guidelines'
To reduce the Sharp Edge effect, fonts are slightly transparent. Remember that transparency is the opposite of opacity. So, if a glass is 99% transparent, its opacity is almost zero. And if you use True Dark ( #000000 ) as your font colour value, it is good to make the font a bit transparent.
Without such transparency, you might feel as if the bright background is trying to enter your text letters. And this effect is more noticeable in the case of the serif fonts. E.g., Times, Times New Roman, Garamond etc.
So, what went wrong? Remember that Grey ( #767676 ) font colour of minimum requirement? What would happen if you use that font colour with 0.8 ( 80% ) opacity? First, see this situation with the True Dark Fonts.
This sentence uses rgba(0, 0, 0, 0.8) where a or alpha value defines opacity. So, this is a Pure Dark #000000 Text with 20% or 0.2 transparency.
This sentence uses rgba(0, 0, 0, 0.6). So, this is a Pure Dark #000000 Text with 40% or 0.4 transparency.
Now, let's use the above method for Grey #767676 fonts on White #ffffff background.
This sentence uses rgba(118, 118, 118, 0.8). Thus, this is a Grey #767676 Text with 20% or 0.2 transparency.
This sentence uses rgba(118, 118, 118, 0.6). Here, you are seeing a Grey #767676 Text with 40% or 0.4 transparency.
Do you see that? So, these are the realities of your 'default' themes. And your eyes are completely okay. A few irresponsible website designers want to pretend to understand low contrast or WCAG guidelines. Yes, those statements are guidelines only, it is neither a rule nor the law.
This conclusion is similar to how Captain Jack Sparrow viewed the Code in a certain movie franchise. But let me assure you that the world has many designers who take pride in showing you those 50% transparent fonts!
Enough of complaints. Because you will have to read those research papers on Astigmatism, Perceived Contrast or how the Non-Designers don't understand web design.
What you need is the solution set to this problem of Reader Unfriendly Web. And let me share with you what I do when I encounter such a Transparent Thin Grey Font website.
7. Make the Low Contrast Content reader-friendly by 'any means necessary'
First and foremost, stop visiting the less important websites using that low contrast ideology. Because if the website owner companies don't care about you, then why should you waste your time and eye-strain on their websites?
Now, let us explore how you can turn your important websites into a reader-friendly contrast zone.
Before we begin: Your operating system's High Contrast mode will not help you always. In fact, the rest of your device user interface might be okay for you. So, these solutions are focusing on websites.
7.1 | Options for Computer Browsers and Simple ( Reader ) Mode for Phones
If you use Chrome, Firefox, Edge or Opera, you can add the High Contrast features to your computer browsers. Some browsers call them Add-ons, Plugins or Extensions. I use multiple plugins to deal with the low contrast nightmare websites with those hairline thin transparent grey fonts.
But on a smartphone, your browser app might not support the high contrast or reader mode features.
7.1.1 | Opera App Dark Web Pages Option for phones
In Opera browser app, you can find the Night Mode setting. But it adds an orange or warm screen overlay to protect your eyes from the blue light at night. So, you should move the slider to its zero value. And make sure that the option Dark Web Pages is ticked. Also, this option is different from the Dark Theme button that changes the looks of your browser.
Now, this approach makes you read in the Dark Mode. But the low contrast thin fonts are actually good for the dark mode environment. Otherwise, you feel as the bright fonts might vibrate or spread over the dark background. So, you are still in a better position.
7.1.2 | Firefox App's Dark Reader Add-On for phones
You can use it by clicking on this add-on in the Firefox list. And if you use Private Mode, you need to click on the Enable in Private Tabs option. Then, your websites will use dark mode. And again, it works well when a site has a thin grey font.
Finally, you need to be lucky to use the Simplified View on Chrome and Edge app. Because sometimes, that option does not appear.
7.2 | Other Methods of making the Web Text readable
Perhaps, you cannot find the above methods useful to your situation. If you do not have a computer, the methods below would help you. But remember, you are going to use other apps to improve your reading experience. So, check their privacy policies before using these solutions.
I use these methods in some cases. So, you might be uncomfortable with some approaches. Do not worry though. I use the following methods only for the anti-reader low contrast sites.
7.2.1 | Share to Pocket App
You should know that in the Pocket app you can read an entire article. All you need to do is install their app from the Playstore. And you can add a Pocket plugin to your PC browsers as well. After that, you can visit any website. Then, in the browser menu, click on the Share option.
Now, that web page link is saved in your Pocket app. Hence, open your Pocket app. And click on that article title. Congratulations! You can use a good serif or sans serif font. Also, white, sepia and dark background colours are available.
And all of this is free. Only for an advanced group of fonts, you might want to upgrade. But I have been using it for a while now. So, the free fonts are thick and readable enough for most readers.
7.2.2 | Textise the Webpage Link
- Copy the webpage link from the address bar or URL box in your browser app.
- Then, go to the textise.net website.
- Paste that URL in the search field.
- Do not click the Search button. Instead, click the Textise button.
After textising that web link, you will get a plain text version of that link. And you can customise the text and colours as per your needs.
7.2.3 | Select All Copy Paste Approach
- As the name suggests, you long-press on a word. Then, use the Select All option.
- Now, click on the Copy option.
- Later, install and open Google Docs or Microsoft Word app on your smartphone.
- And paste your text into those app documents.
- Congrats! Because you get complete control over the content and its formatting.
Doing so helps you win against those transparent grey thin fonts. And you get a reader-friendly version of that article.
7.2.4 | Share to Printer ( Save as PDF approach )
Important: I am aware of the Save as PDF option in OPera app for android. And if you use Opera browser, welcome to this side, But the following details are for the readers who don't use the Opera app.
Now, this is a more involved method. You are going to convert a webpage into a PDF. Then, in a good PDF reader app, search for the reader mode or dark mode. For doing so, you should click the Share option in your browser app. Next, click on the printer icon.
In the print preview interface, select the pages that you want in your PDF. And save this PDF in your Downloads or Documents folder.
Tip: What to do if you cannot find a Reader or Dark Mode?
Open your PDF in the Microsoft Word app for android. And use the Pencil icon to start converting your PDF into a DOCX word file. Remember, you must have a stable internet connection. Also, you need to agree to Microsoft's online file conversion Privacy Policy.
Once the conversion is complete, save that file as a new DOCX file in your Documents folder. And you can edit it in any way you see fit. The only problem with this method is that it is the same as the Select All Copy Paste approach as in point 7.2.3 above. But PDF conversion could take more time.
7.2.5 | Capture and Edit a Continuous Screenshot
I request you to avoid this method. Because while it works for me, it might take just too much effort. But if you are interested, keep reading on.
- Click a Screenshot or a Continuos Screenshot* and save it on your smartphone.
- Then, open it with a good image editing program or app.
- Try the different filter or Sharpening and Contrast options.
- And you will be able to increase the contrast between the text and its background.
Again, this method is too demanding. So, you should use it as a last resort.
8. The Endnote
I have deliberately excluded the Download Page or HTML saving method. Because not everyone can handle the HTML/CSS customisations. Also, I do not think that textising or using the Pocket app can reduce ad revenue for anybody.
If your users are using the textise.net or Pocket app ( or Ad Blockers ), maybe you should consider stopping your obsession with those hairline thin grey transparent fonts.
And if you are showing too many ads or pop-ups to your users, you probably deserve to get Ad Blocker hits on your website. Because you have chosen the Ad Revenue and Design Ideologies over your readers.
It is a simple ethical equation. As website owners, we are not immune to our karma. If a site designer annoys the readers with some "low contrast is clean design" idiosyncrasy, the readers have a natural right to leave the site.
And if the writers or site owners cannot see this reality, high bounce rates or immediate exits shouldn't surprise anyone.
Again, this is my personal opinion and my knowledge base. And let me assure you that I have to use the methods above at least once a week! That is the extent of low contrast hairline thin grey font obsession.
To my fellow readers, writers, designers, editors and site owners, I leave you with these methods to win against the Anti-reader Low Contrast Design Nightmares.
Regards,
AK Patil - Akp51v
A freelance content writer, editor and blogger. Tweets as @akp51v
Feedback: akp51v.creator@gmail.com
Work: akp51vmedia@gmail.com
Further Reading: webaim.org has an article about WCAG 2 guidelines regarding contrast.