You will notice numbers associated with each color value in our palette. These numbers range from 10 - 70 and represent the tone of a color within our scale. Rather than assign our colors semantic names (ie. "background"), which presents issues in terms of localization and reusability, we have opted for a universal naming convention.
Developers are welcome to map these colors to semantic naming conventions within the context of their application.
Use of Blue 40 (primary40) should be reserved for actions only. (ie. buttons, links, etc.)
Use of Green 50 (success50) should be reserved for success states only.
Use of Yellow 40 (warning40) should be reserved for warning states only.
(ie. a state where a user can continue, but errors may occur as a result)
Use of Red 40 (danger40) should be reserved for error states only.
The BigDesign color palette is consistent with the WCAG 2.0 (Web Content Accessibility Guidelines), specifically in regards to foreground and background color when it comes to the legibility of text. You can learn more about WCAG standards here.
In terms of contrast and legibility: WCAG provides an equation that outputs a number between 0 and 21, with 21 being the highest amount of contrast—black text and a white background—and 0 being no contrast—white on white.
AAA means that your text has a contrast ratio of at least 7.0.
ex: This is an example of AAA contrast.
AA means that your text has a contrast ratio of at least 4.5 or higher.
ex: This is an example of AA contrast.
AA+ means that your text has a contrast ratio of at least 3.0.
ex: This is an example of AA+ contrast.
Fail means that your text has a contrast ratio of 2.9 or lower. (This does not apply to logos, text in logos, and other decorative elements.)
ex: This is an example of Fail contrast.
Grey 10 (secondary10): Canvas background, Hover background
Grey 20 (secondary20): Hover background on canvas
Grey 30 (secondary30): Stroke, disabled control
Grey 40 (secondary40): Placeholder text, Inactive text, Disabled badge
Grey 50 (secondary50): No current specified uses. Do not use as a background color.
Grey 60 (secondary60): Secondary text, Icons, Inactive badge text
Grey 70 (secondary70): Primary text, Tooltip, Background
Blue 40 (primary40): Actions, Buttons, Links
Green 50 (success50): Success, Enabled
Yellow 40 (warning40): Warning
Red 40 (danger40): Error, Destructive Action