Color helps to distinguish and create consistent experiences across products.
We are committed to complying with the Web Content Accessibility Guidelines (WCAG) 2.1. The design system is built to meet these guidelines automatically. If you choose to identify your own color palettes outside of Daffodil's colors, please make sure to choose primary, secondary, tertiary, and extended colors that will pass the guidelines. Ensure there is sufficient color contrast between elements so that people who are visually impaired can see and use your products.
We have encoded many of the WCAG requirements into our SASS mixins and functions. This means that if you swap to a color palette that does not meet the requirements of WCAG compliance and try to use it within the components, our code will proactively complain and issue errors. This is entirely intentional and will not be changed. The current state of accessibility is lacking, and as a result, we are enforcing accessibility requirements at development time in order to make it easier for developers to accommodate these issues before they are in the hands of users.
To verify contrast ratios, we recommend using this contrast ratio calculator.
Normal Text
Normal text must have a contrast ratio of at least 4.5:1 to pass AA guidelines and 7:1 to pass AAA guidelines. This is accurate only if your font is at least 16px with regular weight or heavier.
Large Text
Large text must have a contrast ratio of at least 3:1 to pass AA guidelines and 4.5:1 to pass AAA guidelines. This is accurate only if your font is at least 18.66px with bold weight or 24px.
The 10-50 steps all meet a 4:5:1 contrast ratio or higher against $daff-neutral, 110 (#070707) or darker, while the 60-100 steps all meet a 4:5:1 contrast ratio against $daff-neutral, 10 (#fafafa).
As a result, we've ensured that in the palettes that we provide, the following are enforced:
There may be smaller increments that allow for the contrast ratios to be met (e.g. "20/70" passes a 4.5:1 ratio), but this is not consistently reliable across and within palettes, so please use this at your discretion.
Tokens replace static HEX values and are used to apply color consistently across products. See the tokens page for the full list of color tokens and their descriptions.