Does white text on an dark background hurt your SEO?
There’s a lot to think about when it comes to the use of colors on your site. Are your colors consistent? Are they in line with your brand? Are you using weird hues or strange gradients on various areas of your website? – White Text Dark Background
The majority of these issues are rather obscure, however one is coming more to the forefront in the last couple of years. Are white or light colored text over a dark or black background harm SEO?
A Simple Solution
I’ll like the other articles I write, provide you a simple and straightforward answer straight away. Yes lighter text with dark backgrounds isn’t likely to harm search engine optimization, assuming you’ve done it correctly. What does doing the right thing mean? To answer that question you’ll need to read the remainder of this post and decide for yourself, won’t you? – White Text Dark Background
Usability is a Matter of Concern
Google has two primary factors behind almost every decision they make when it comes to their algorithm for searching. The first is the confirmation to confidence. One of the major purposes that the algorithm aims to achieve is encourage reliable content and degrade the less reliable content. The algorithm doesn’t always function in the way it’s intended, however. There’s a wealth of highly circulated fake news , as well as various anti-vaccination or climate change-related information or whatever and their own network of believers and bolster their “trust” even when actually false. – White Text Dark Background
In addition, it’s an issue Google will need to address in the near future. So far, they’ve maintained an impartial position and allowed information to be filtered towards the top of the list in accordance with popularity, and not on the basis of fact. They’ve chosen not to decide on the truth. We’re now at a critical stage in our history in which the spread of misinformation can be directly damaging the natural world, society as well as the lives of individuals. What will Google take on their role as an information broker? Maybe that’s why they have retracted the “don’t do bad” goal statement. – White Text Dark Background
In any event the third element that Google’s algorithm examines is the user experience. It’s evident that almost every website that ranks highly in Google has a good user experience. You won’t see strange animated gif backgrounds with tiled tiles white text on yellow backgrounds, hidden buttons between buttons or any other usability problems. – White Text Dark Background
Google believes that the user experience is as a major aspect of their work and that’s the reason many of Google’s webmaster guidelines as well as their webmaster recommendations as well as a lot of their tools for analysis focus on providing advice and tips in ensuring user-friendliness. – White Text Dark Background
The Historical Perspective
We imagine the black text with a white background as a typical, standard setting for the internet. But, why do we? How many of the websites you browse feature white backgrounds nowadays? I’m sure a majority of sites I frequent have off-white, light gray backgrounds, or colored backgrounds. Google is among the very few sites to still have pure white. – White Text Dark Background
The reason we see the black-on-white standard is because of the prior computer technology. It’s paper! Paper is white most often printing presses and hand tools usually use black ink as their default. Everything from newspapers to books to magazines uses white on black as the standard. – White Text Dark Background
The reason obviously is that the paper is in a natural white, beige or a different off-white hue. The white that we’re used to seeing from printer paper is a result of bleaching during production yet it’s lighter in color. It’s also easy to create dark-colored inks with dark colored pigments. An array of dyes can be used to create dark colored inks however lighter colored dyes can be more difficult to make. – White Text Dark Background
When computers were invented and the internet exploded from the minds of few genius individuals, the default was an attractive, usable black-on-white. You can forget about the green-on-black period, won’t? Keep that in mind. I’ll talk about it in the near future. – White Text Dark Background
The move to the standard of black and white was based on several reasons however, the fact that we’re typically used to this format was the main reason. of the reason.
Modern Design
Between the introduction computer technology and in the present decade, the issue of whether to go with black-on-white or white-on black has been an issue of heated debate. The majority of webmasters choose to use black-on-white simply because it’s more convenient to work with, it’s the standard option, it’s less confusing and more familiar to the users. When you go to a website and see light-on black it will give you the impression of being in a pause. it takes some time to change. – White Text Dark Background
But, many changes have occurred in the past few years, including the rise to mobile technology. Smartphones have, as you may know have had a massive influence on the design of websites, and I’m not referring to Google’s emphasis on mobile-first indexing, and all that. White – Text Dark Background
Have you got an idea of the subject I’m talking about? This is Night mode. Night mode comes with a number of various meanings for various apps and types of design.
The first one is based on the current understanding about blue lights being harmful for your eyes, especially in the evening. Many apps, including F.Lux and the Android Night Mode can shade your screen with in a shade of orange, which will reduce the blue light and decrease intensity during the darker times during the daylight hours. It’s a more natural hue of light, and it’s less likely to cause eye damage. I’m not particularly concerned about this type of night mode, however. – White Text Dark Background
Another night mode is what that you can find in the latest apps. Reddit includes it as a setting for accounts. It is also available on Twitter. The color scheme changes of the website. Consider Twitter images you can find floating all over. Some have white backgrounds and blue and black text. Some backgrounds have an aqua blue background and white text. – White Text Dark Background
Both of these websites are equally useful as a whole, aren’t they? Night mode is designed to perform the exact kind of thing that the f.lux apps do. They make it easier to view the screen in the night.
That’s probably the biggest impact mobile computing has created in design. Users are increasingly using their phones at night. You may glance at your phone while driving in a vehicle at night. You could play on your tablet at night when you’re asleep. It is possible that you will work for long in your night and end up spending most of the daytime sleeping. What do you think? – White Text Dark Background
The reason is that in certain ways, the night mode has evolved into an accessibility feature. It is possible to turn on night mode during the night and reduce eye strain, and decrease blue light that could harm your eyes and affect the quality of your sleep. – White Text Dark Background
What are the Problems with Dark Design
Darker designs, such as night mode – as well as older green-on-black designs are not without their problems. One reason is that people who suffer from astigmatism may be affected by it. Astigmatism is a normal defect within the eye that alters its shape and the appearance of the eyes. It’s not difficult to correct it with contact lenses or glasses, but it could still affect the vision. One of the things that was observed when using the design with black and green was that people with astigmatism were unable to read light text against the dark background. – White Text Dark Background
In essence, and to put it simply, bright backgrounds cause pupils to shrink. On the other hand, dark backgrounds allow your pupil to dilate , allowing more light into. This is fine those who suffer from astigmatism. The bigger pupil allows the lens to be shaped differently to create greater effect to the words, which makes it appear blurrier. – White Text Dark Background
Naturally, we don’t always think about people with visual impairments when creating websites. Mobile usage is more frequently into the picture in this case. Night mode is great for the night, but during the day , it can cause it to be extremely difficult to view the app’s screen, particularly if you’re out in the sun and battling the heat that the sun’s rays create. – White Text Dark Background
This is the reason each of these features is choices. Twitter and Reddit offer a night mode that allows you to turn it off or on at moment’s notice, using only two clicks or taps. The f .lux app is dynamically adjusted based to the times of the the day and even the location of the user in order to accommodate the time of day that sunlight is present. – White Text Dark Background
The main thing to do here, in order to link things back to Google’s focus on user-friendliness is the option. Users are able to choose whether they would like to browse the website in night or day mode. Google will index the website in whatever mode the default is, which is usually day mode. And this is the case. – White Text Dark Background
Correctly using Night Formatting
If you’re looking to apply an evening mode, or simply want a light-on-dark design for your website is acceptable. You won’t get penalized by Google except if you’re doing something that harms users experience. – White Text Dark Background
Although technically, forcing users to switch to night mode throughout the day could hurt some of them – like the issues with vision, for instance or the difficulties with browsing a website at all times of the day, Google will not consider that. Google has millions of users to think of, and a small portion of users aren’t likely to implement massive changes in the design. – White Text Dark Background
What you should do when you’re using a light font on dark background is to make sure it’s going to load. This means you must specify the light font’s color and the darker color of your background directly in your code. You shouldn’t make use of an external CSS script, file or image to specify either attribute.
One example I’ve come across is a site that has a dark background, with white text on over it. This is fairly commonplace for certain restaurants, websites with a space theme, and also other sites that are night-themed.
So, what happens if your background image does not load? If you’ve not specified any other details, the site will use the fallback color that’s white. You’ll see light text with a white background which is a big no-no when it comes to web design. What you must choose is the color of your fallback, which could be basic black. This is enough to cover the following:
Background:url(yourimage.jpg) #000000;
If the image isn’t loading it defaults to the default color that is black. Of course, you can choose an alternative color that fits your design better.
How Not To Do
I’ve focused on making sure that I address accessibility for users and the user experience. this should be the basis of your design.
Here are some of the things you shouldn’t do.
- Don’t use light-on light and dark-on-dark. You need enough contrast to let users discern the content. The use of colors that are too similar can cause an Google penalty in the event of seeking to conceal content since it was a misuse of the SEO techniques a while ago.
- Don’t use colors that clash. Bight yellow on a vibrant pink background could be look good for a 4- year old’s birthday however it will make any adult feel uncomfortable in about 5 minutes.
- Never permit failure states where your site is inaccessible. Play with your layout by using script blockers or element blockers that block certain images advertisements, scripts, or images and check out how your site appears. If the site is broken, repair it.
If you can offer your users the option of choosing between a night and day night mode. It’s not difficult to make a switch CSS style sheet as well as the script that can change the style of it. You can enjoy the most beneficial of both by offering your users the option of choosing.
Need help in SEO for your company or site? We can help. Take a look at our extensive SEO directory to locate the perfect SEO agency to meet your needs.
