In this post we will review the color black, a color associated with sophistication, confidence, and power. Black text on white or white text on black produces the highest amount of contrast ratio (21:1) for the Web Content Accessibility Guidelines (WCAG). As far as being a color, it is considered to absorb all other colors, but we can still see it and is located at the very end of the grayscale spectrum. It does not have a wavelength and is not present on color wheels. As stated in the recent blog post about website colors, the color you use on your website can impact the overall impression of your site.
What types of Websites use Black?
Websites that use this color intend to give an elegant and wealthy vibe and is a color that is liked by both men and women. An example would be evening gowns or tuxedos. In accounting you are in the “black” if you have a profit. Other websites want to show their rebellious nature or the durability that is associated with power.
What do different cultures think of it?
In western cultures, this color is often associated with mourning or death. In other cultures, it is a symbol for rebellion and occult. In Latin America this color is worn by men (Eriksen Translations 2020). It is often paired with orange colors during Halloween symbolizing the occult, death, and mystery.
Examples of Websites Using Black?
Black is used a lot for luxury brands or brands with a high-end image. Some examples of luxury brands include Burberry, Chanel, Jaguar, BMW, and Tiffany. Brands projecting a high end image include some of the tech companies such as Sony and Apple. Some Rock music bands use black as statement of rebellion an example of which is Metallica. Some of the watch brands, such as Citizen and Timex use black to show their durability. One of the most famous websites and brands using this color is Amazon in their text, accented by yellow underneath.
What does Black mean on a website and in a Brand?
As stated above, this color when used in a website or a brand is used for displaying luxury and elegance especially when used with gold. It can show glamour, sophistication, and formality as well as exclusiveness.
Different Shades have different Meanings?
The very definition of black is that it absorbs all light, therefore theoretically we do not see it at all. However, oftentimes it is mixed other colors to create other shades similar to it such as midnight blue if really dark or a gray if lighter. The darkest shades bring about the most negative or positive emotions, while shades of gray bring out depressed emotions but not the bottom or top.
Application on a Website?
Being a neutral color, black can dampen more vibrant or brilliant colors. From the start, it has a lot of power, because it impacts all of the colors around it by washing them out. Oftentimes it is used for backgrounds to mute out colors that alone are more brilliant and would be too strong on their own or would not appear. An example would be the color yellow, where on a white background, it does have enough contrast and brightness. However, with a dark background, it pops out, has a lot of contrast, and is not as bright allowing it to be used.
Black can also be used for contrast settings in textual logos and in logos in general. An example would be newspaper or magazine websites where it is used for the name of the site. Another example is the modern day Apple logo, which has a black “apple” on a white background. It’s use in logos projects a modern appearance.
Accessibility Concerns
This color has a lot of power to affect the colors around it and you will want to use it sparingly. A solid black text (#000000), can strain readers eyes and most often a grayer text is used such as the color of the text in this post (#4a5568), which is called very dark grayish blue. The dark grayish blue still has a color contrast of 7.52:1, meeting WCAG 2.1 AAA requirements. On the flip side, using small bright or white text on a dark background can also strain eyes. If using bright text on a dark background it is best to large text to help overpower the dampening effect.
Links of Interest
WP Amelia — Websites with Black Blackgrounds
Awwards.com — Websites designed with this color
CollectiveRay — Dark Website Design
References Cited
Eriksen Translations. 2020. How Translating Colors Across Cultures Can Help You Make a Positive Impact. Link to Eriksen Translations.
