A Whiter Shade of Pale, Backgrounds
There are a lot of websites on the internet, and if you take the time to go through them, you’ll notice that the percentage of websites with a white background is quite high. The reasons for this are quite varied: however, there have doubtlessly been people who have opted to use a plain white background simply because their ubiquity and popularity makes it seem like they’re automatically the best for any given project, and that’s not always the case.
This is why we’re drilling down into some of reasons (both simple and complex) of why web designers often gravitate towards a white backdrop. Understanding those motivations and design choices can help you determine whether going all white is right or wrong for your project.
Gallery
As a sample of a few options available, the following list of images are ready to use for any application. To download, right click and select “Save Image As...”
Accessibility issues
Possibly the simplest explanation for why so many websites lean on a white background image is because of something called “the default effect.” The default effect simply states that when you make an option the default option, most people will go ahead and select that one above all other options. The reasons for this are manifold: people may assume that a given choice’s selection as the default option serves as a recommendation or endorsement, some people may get overwhelmed and would rather not spend mental energy deciding on something when a default option exists, and the list goes on. Web developers know that CSS and HTML styling in browsers automatically defaults to white, and so they tend to stick to white as the default option. It’s akin to putting white wallpaper on top of a painted-white wall.
Readability
A common theme in discussions about why a plain white background tends to be de rigeur in web design is that a white background with black text is the pinnacle of readability. This is because the prevailing concept is that, when it comes to a website being easy to read, contrast is key. And contrast is generally achieved by pairing two opposite ends of the color spectrum together.
So why black text on a white background and not the other way around? There’s an interesting theory that since the earliest days of mankind putting a pen to paper, we’ve been using dark ink on white paper (or on parchment, or on vellum, or on papyrus etc.) and that persists to this day: therefore, those of us who were raised on books before personal computers could be found in most homes would need to be visually reminded of books. Hence, black text on a white background, like the stories we grew up on. This theory doesn’t necessarily hold much water though, if you were around in the days of glowing green text against the dull black background on your family’s Apple IIc. If readability is your only reason for selecting a plain white background to go beneath black text, it’s a completely valid one. But black text against a white backdrop isn’t the only readable option out there.
Cultural considerations of white
Color psychology is the study of how various colors may have an effect on human behavior. The subject posits that we may be influenced by certain hues, even unconsciously. Color psychology is an invaluable tool when it comes to marketing and branding, because the way certain audiences generally react to certain colors or color combinations can have a very direct effect on how a product is perceived. Things like logos and packaging design can have a direct impact on sales, so it’s not a leap to say that the color choices you use on a website can be key when it comes to attracting - or repelling - audiences. Knowing a little bit about color psychology can help you make sure that you don’t inadvertently offend potential clients or customers.
Some people think of white as a neutral color. While this may be true in interior design, that’s not necessarily true in web design. Your website could reach people all over the world, but unless you include a picture of your real-life white wallpaper as your digital white background image, your living room decor choices won’t be nearly as widely seen. Therefore it’s important to think about how your color choices might be perceived in cultures other than your own.
In most Western cultures, white most often signifies purity and peace: that’s why you’re likely to find white dresses and white doves both at weddings. But in several Asian countries, including China and Korea, white is symbolic of death, mourning, and ill luck. While Westerners tend to dress wear the color black to funerals, in countries where white signifies death, mourners traditionally wear white to funerals. As a side note, people in Italy often place white chrysanthemums by grave sites: chrysanthemums are considered a flower of mourning in many European countries, including Italy, Spain, Hungary, Croatia, and Poland, so the white chrysanthemum is doubly laden with symbolism.
Colors can have some cultural overlap. For instance, a white flag is considered to be a symbol of truce in countries all over the world. Also, some cultures consider white to be a symbol of cleanliness while others refer to it as a signifier of sterility: while those may seem to be synonyms, cleanliness tends to have a much more positive association than sterility does. The takeaway from all of this is to remember to keep in mind who your audience is and whether you think they are likely to have negative or positive associations with the color white, and to plan accordingly.
Historical significance in art
Website design is an art in and of itself. So it makes sense to look at how the color white has been used in art throughout the years and see if that gives you any inspiration as you’re deciding whether a white background is right for you. (It’s probably worth noting that many museums and art galleries feature white painted walls or white wallpaper as a backdrop for the pieces they display, which may serve as a metaphor for your website if the project you’re working on is image-heavy.)
The Lascaux Cave drawings in France feature drawings from approximately 17,000 years ago . They primarily feature drawings of animals done with a mixture of charcoal and iron that prehistorics artists would have made themselves. They also used calcite and chalk to create a white backdrop or to create highlights against the dark pigment. Even several millennia ago, our predecessors knew what we still know to be true: when it comes to making an impact, contrast is key. These artists weren’t alone. In ancient Greece, people saw the world in darkness and light, so their work featured the contrast between black and white more heavily (although, they really only used four colors, so that may not have been a choice that was made entirely by design).
Perhaps the most interesting use of white in art came from the Dutch painter Piet Mondrian, who pioneered 20th century abstract art. When you think of him, you probably remember well-known works like Composition with Large Red Plane, Yellow, Black, Gray, and Blue painted in 1921. This was part of his series of definitively abstract paintings that changed the art world. He limited his palette to the three primary colors, plus black, white, and gray. Odds are you can picture in your mind the austere black lines that delineate the painting into squares and rectangles, and you can probably even picture the large, boldly red squares and the smaller buttery yellow ones. But if you look at it again you can see just how much work the color white is doing in the piece. The white background is what provides the contrast and the drama.
Making white work for you
Now that you’ve read a bit about why people gravitate towards the color white and understand the cultural and psychological components associated with it as well as the design perspective, feel free to explore the color for your website, social media layouts, or even your desktop or mobile wallpapers. Ultimately, design is kind of all about your aesthetic. If you’re going for a sleek and minimalist feel a plain white background is a great choice. It also remains the gold standard for blogs and other websites with a lot of written content because of the readability factor.
A plain white background isn’t your only option, though. You can play around with our Trianglify tool and create a white texture background featuring varying shades of white and off-white for a more subtle and textured feel on a white-on-white background. A CSS gradient wallpaper featuring whites and light grays is another fun twist on the white background, because it adds a little dimensionality and flair without overshadowing the content on your website. You can even channel your inner Mondrian and explore the concept of using geometric shapes in a white abstract background and play with white as a contrast color. As we discussed earlier, white isn’t neutral, so don’t be afraid to use it to express yourself just like you would with any other color.
Colophon
While Cool Backgrounds is a fine resource for generating images from popular javascript libraries, the real heavy lifting comes from the library authors themselves. When it comes to customer support, Quinn Rohlf from Trianglify.js is incredibly responsive and a really smart guy to boot. Particle.js is developed by Marc Brüderlin with a wonderful API and is being actively maintained. Gradient Topography is a newly minted project by me as a response to the amazing work by the Codrops crew. And of course Unsplash is one of the best internet treasures of all time, built by the former Crew team as a side project.
Oh yea and can’t forget CSS Gradient and Rellax.js which is the “cool background” that powers those sliding parallax shapes in the content section of this site!