Color
Because it is a part of our name Black is the most prevalent color we use throughout our Visual Identity System. But nothing should feel overly dark or too heavy, in short don't overuse it. The rest of our color palette offsets the presence of black with vibrancy, brightness, and warmth.
Primary palette
Since our primary palette is limited, we use all of the core colors for component backgrounds with some careful restrictions, which are detailed out in the color useage tab.
*Note: Click on any of the swatches to copy the hex code.
Neutral palette
We use our neutral palette in a very limited capacity; divider lines, inactive button states, and to emphasize an area inside a dense block of content (mainly under a stack of black or white components).
*Note: Click on any of the swatches to copy the hex code.
Accessibility & text color
As a global firm, we must adhere to ADA compliance WCAG 2.0 Level AA.
Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1) based on its luminance (the intensity of light emitted), which represents how different one color is from another color. How does a headline or call-to-action read over a certain color background? We must keep this in mind when designing for a wide range of users.
At BlackRock, we need to meet AA standards:
• Text must have a contrast ratio of at least 4.5:1. An exception is large text (at least 24px book / 18px bold) which must have a contrast ratio of 3:1
• As a rule of thumb, we set all type to BLK Black for all component background appearances except for components set with black background appearances, which we set to BLK White
• The only text we set in a color other than black or white is our Eyebrow text, which is used to highlight a topic or theme in smaller text above headlines
Color hierarchy
With a palette as vibrant as ours, we need to be careful when applying it across our digital system. Black should be the most prevalent color we use throughout our Visual Identity System. We use it for our wordmark, typography, and backgrounds. The balance for black is around 33% of the color applied.
We recommend using an equal amount of white to ensure our pages do not become too overwhelming, with our remaining 3 primary colors to support black or white. The percentage for orange, pink, and yellow palettes should be around 12% each.
This does not mean use all 5 brand colors on any single page, rely on black, white, and a pop or two of color.
Color pairing
Don’t over use any one particular color across our site, we want to achieve an equal balance throughout our experiences. While any of the colors can be stacked with black or white, we strongly recommend not pairing more than 3 colors sequentially. We feel this adds too much visual noise to our pages.
Note: A stacking of 2 colors max is allowed per page. This helps drive focus to a special content piece.
Stacking multiple colors
We strongly recommend not pairing more than 3 colors sequentially. We feel this adds too much visual noise to our pages. The exception to this rule is the use of black or white in succession, which are encouraged. Black and white should be the most prominent.
Neutral palette
Use our neutral palette in a very limited capacity; mainly to emphasize related content between either a black or white space. Think of these sections as a continuation of a product/topic thought-piece where 3 sections are tied together but need a subtle visual separation.
Complex color hierarchy
This color wheel illustrates the balance between our brand color palette and our data vis color palette.
The goal should be for a mix of the colors from the brand palette to be used starting with orange, followed by yellow and pink, with pops of green present in our data visualization.
The data vis color palette is used once the brand BlackRock brand color palette has been exhausted to differentiate complex segments of charts and graphs.
Data-vis palette
Our data visualization colors should be used only once the brand BlackRock palette has been exhausted. These are not meant to be used as a secondary palette, nor for background or text colors.
We place data visualizations only on black or white backgrounds.
*Note: Click on any of the swatches to copy the hex code.
Accessibility & text color
As a global firm, we must adhere to ADA compliance WCAG 2.0 Level AA.
Contrast ratios can range from 1 to 21 (commonly written 1:1 to 21:1) based on its luminance (the intensity of light emitted), which represents how different one color is from another color. How does a headline or call-to-action read over a certain color background? We must keep this in mind when designing for a wide range of users.
At BlackRock, we need to meet AA standards:
• Text must have a contrast ratio of at least 4.5:1. An exception is large text (at least 24px book / 18px bold) which must have a contrast ratio of 3:1
• As a rule of thumb, we set all type to BLK Black for all component background appearances except for components set with black background appearances, which we set to BLK White
• The only text we set in a color other than black or white is our Eyebrow text, which is used to highlight a topic or theme in smaller text above headlines