“Color” Design Component
Color is used in the IxDF Design System to draw attention, add visual interest, as well as indicate different states of a component. It should be used only when appropriate to prevent visual overload.
Corresponding Color Names in Code
All these shades have a corresponding name in css so that we can create simple classes like “background-accent-01”.
|Design Name||Name in Code|
To comply with WCAG AA standards, the color contrast of text and components should be at least 4.5:1.
Color contrast is concerned with the relative colors of the foreground and background elements. Hence, there are different permitted colors for text and components (like forms and buttons) based on the different background colors used.
Note that since external brand colors cannot be changed, they shall be used even if they violate WCAG’s AA standards for color contrast.