Black and white are a match made in color heaven. As the darkest and lightest hues on the visible light spectrum, they are known for creating bold contrast. From advertising to cars to interior design to clothing, the combination of these two colors is near-universally appealing.
Despite the prevalence of black and white in our world, there are times when these colors, in their purest forms, may not be suitable. While this palette has become standard in web design, it may not be the best option for your site.
Reasons to Rethink
Nearly every website you visit features black text on a white background. However, the combination of the deepest black (#000000) and the brightest white (#FFFFFF) isn’t always the ideal choice for display on screens.
Digital Eye Strain
Pure, undiluted black and white are great for creating eye-catching contrast, but bolder is not always better. High contrast is associated with digital eye strain, which is a group of vision-related problems that result from prolonged screen exposure. Symptoms include eye strain, blurred vision, headaches, dry eyes, and trouble sleeping.
Plus, staring at a stark white screen can feel like looking directly into a flashlight after a while. You want visitors to spend more time on your site, not click away after a few minutes when they’re tired of squinting.
Accessibility Issues
People with certain vision impairments may have a hard time reading extremely high-contrast text. However, the opposite is also true — too little contrast, and their eyes may have a hard time differentiating between colors. To test the contrast between two colors, you can use online accessibility tools.
Examples From Around the Web
To see how black and white (and their subtle variations) are used on some of the Internet’s most popular sites, we used a color picker to determine the exact hex code of the colors used. (While some of these sites offer a “dark mode” with inverted colors, we went with the default version.) Here’s what we found:
Pure Black and White
Among the websites we tested that use black and white in their purest form are Google Docs and Instagram. For Google Docs, this makes sense — you’ll likely be printing black text on white paper, so you’ll want what’s displayed on your screen to mirror the finished product.
For Instagram, we can speculate why they’ve decided to stick with this color scheme. As a platform that’s used mostly for sharing images and videos, a clean, high-contrast interface makes the content pop. Plus, they want you to keep scrolling instead of getting caught up in reading captions. If the intense contrast causes eye strain, you’re more likely to give up and move on to the next post, descending ever farther down your endless feed.
Pure White With Off-Black
Facebook is used to share a bit of everything — photos, videos, and text — so it makes sense that their interface uses pure white along with off-black and pale gray. These colors still have a high enough contrast to be easily readable and make the content pop but aren’t so intense that they cause eye strain when reading your friends’ updates.
YouTube uses a similar color scheme, with a stark white background, off-black text for titles and headings, and medium gray for less-important text.
Pure White With Dark Gray
Sites whose main function is to provide written content—like news sites—are seemingly more likely to choose colors that reduce eye strain. The New York Times and Washington Post are great examples of this, utilizing shades of dark gray rather than pure black. Google uses a similar palette on its search results pages.
However, this is not always the case. Wikipedia, CNN, and CNBC all use pure black text on a stark white background.
Alternative Color Choices
As you can see, there’s not much of a pattern within the shades of black and white used on the internet’s most popular websites. Most internet users are used to a bit of digital eye strain, so harsh contrast probably won’t make or break your success. Ultimately, it’s up to you to decide whether your website will stick with classic black and white or go with a gentler variation.
As an alternative to pure white, try a shade of off-white. Add a tiny bit of color to it — try yellow to make it warmer or blue to make it cooler. These shades still look white at first glance but won’t cause as much eye strain. Rather than black, try a hue so deep it’s almost black. Dark greens, grays, and blues can be effective choices.
Web Design by PDM
At Performance Driven Marketing, we are experts in all things web design, including color schemes. Don’t leave your website in the hands of amateurs — for maximum success, you need help from the professionals. Contact us today for a free consultation and see how we can help you bring your brand to the next level!
