DuetColor
Color item displaying as a row, with color, name, description, var, and sass variables as well as the contrast ratio ad status. Design inspired by Duet.
| Example | Description | Token | Contrast | Status |
|---|---|---|---|---|
#de2362 rgb(222, 35, 98) | Status Danger Danger red that is accessible with white. Only used in special cases like form validation and messaging. | $color-dangervar(--color-danger) | 4.64:1 | |
#f7b228 rgb(247, 178, 40) | Status Warning Warning orange (non-accessible) is only used in special cases like form validation and messaging. | $color-warningvar(--color-warning) | 1.85:1 | |
#00875a rgb(0, 135, 90) | Status Success Success green that is accessible with white. Only used in special cases like form validation and messaging. | $color-successvar(--color-success) | 4.55:1 | |
#657787 rgb(101, 119, 135) | Gray Darker Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts. | $color-gray-darkervar(--color-gray-darker) | 4.62:1 | |
#909599 rgb(144, 149, 153) | Gray Dark Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text. | $color-gray-darkvar(--color-gray-dark) | 3.02:1 | |
#7a01c4 rgb(122, 1, 196) | Data 01 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-01var(--color-data-01) | 7.99:1 | |
#c21565 rgb(194, 21, 101) | Data 06 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-06var(--color-data-06) | 5.85:1 |
id | description | |
|---|---|---|
aria-allowed-role | Ensures role attribute has an appropriate value for the element... | |
aria-hidden-focus | Ensures aria-hidden elements do not contain focusable elements... | |
avoid-inline-spacing | Ensure that text spacing set through style attributes can be adjusted with custom stylesheets... | |
color-contrast | Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds... | |
empty-table-header | Ensures table headers have discernible text... | |
table-duplicate-name | Ensure the <caption> element does not contain the same text as the summary attribute... | |
td-headers-attr | Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table... | |
th-has-data-cells | Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe... |
| Example | Description | Token | Contrast | Status |
|---|---|---|---|---|
#de2362 rgb(222, 35, 98) | Status Danger Danger red that is accessible with white. Only used in special cases like form validation and messaging. | $color-dangervar(--color-danger) | 4.64:1 | |
#f7b228 rgb(247, 178, 40) | Status Warning Warning orange (non-accessible) is only used in special cases like form validation and messaging. | $color-warningvar(--color-warning) | 1.85:1 | |
#00875a rgb(0, 135, 90) | Status Success Success green that is accessible with white. Only used in special cases like form validation and messaging. | $color-successvar(--color-success) | 4.55:1 | |
#657787 rgb(101, 119, 135) | Gray Darker Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts. | $color-gray-darkervar(--color-gray-darker) | 4.62:1 | |
#909599 rgb(144, 149, 153) | Gray Dark Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text. | $color-gray-darkvar(--color-gray-dark) | 3.02:1 | |
#7a01c4 rgb(122, 1, 196) | Data 01 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-01var(--color-data-01) | 7.99:1 | |
#c21565 rgb(194, 21, 101) | Data 06 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-06var(--color-data-06) | 5.85:1 |
| Example | Description | Token | Contrast | Status |
|---|---|---|---|---|
#de2362 rgb(222, 35, 98) | Status Danger Danger red that is accessible with white. Only used in special cases like form validation and messaging. | $color-dangervar(--color-danger) | 4.64:1 | |
#f7b228 rgb(247, 178, 40) | Status Warning Warning orange (non-accessible) is only used in special cases like form validation and messaging. | $color-warningvar(--color-warning) | 1.85:1 | |
#00875a rgb(0, 135, 90) | Status Success Success green that is accessible with white. Only used in special cases like form validation and messaging. | $color-successvar(--color-success) | 4.55:1 | |
#657787 rgb(101, 119, 135) | Gray Darker Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts. | $color-gray-darkervar(--color-gray-darker) | 4.62:1 | |
#909599 rgb(144, 149, 153) | Gray Dark Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text. | $color-gray-darkvar(--color-gray-dark) | 3.02:1 | |
#7a01c4 rgb(122, 1, 196) | Data 01 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-01var(--color-data-01) | 7.99:1 | |
#c21565 rgb(194, 21, 101) | Data 06 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-06var(--color-data-06) | 5.85:1 |
| Example | Description | Token | Contrast | Status |
|---|---|---|---|---|
#de2362 rgb(222, 35, 98) | Status Danger Danger red that is accessible with white. Only used in special cases like form validation and messaging. | $color-dangervar(--color-danger) | 4.64:1 | |
#f7b228 rgb(247, 178, 40) | Status Warning Warning orange (non-accessible) is only used in special cases like form validation and messaging. | $color-warningvar(--color-warning) | 1.85:1 | |
#00875a rgb(0, 135, 90) | Status Success Success green that is accessible with white. Only used in special cases like form validation and messaging. | $color-successvar(--color-success) | 4.55:1 | |
#657787 rgb(101, 119, 135) | Gray Darker Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts. | $color-gray-darkervar(--color-gray-darker) | 4.62:1 | |
#909599 rgb(144, 149, 153) | Gray Dark Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text. | $color-gray-darkvar(--color-gray-dark) | 3.02:1 | |
#7a01c4 rgb(122, 1, 196) | Data 01 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-01var(--color-data-01) | 7.99:1 | |
#c21565 rgb(194, 21, 101) | Data 06 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-06var(--color-data-06) | 5.85:1 |
| Example | Description | Token | Contrast | Status |
|---|---|---|---|---|
#de2362 rgb(222, 35, 98) | Status Danger Danger red that is accessible with white. Only used in special cases like form validation and messaging. | $color-dangervar(--color-danger) | 4.64:1 | |
#f7b228 rgb(247, 178, 40) | Status Warning Warning orange (non-accessible) is only used in special cases like form validation and messaging. | $color-warningvar(--color-warning) | 1.85:1 | |
#00875a rgb(0, 135, 90) | Status Success Success green that is accessible with white. Only used in special cases like form validation and messaging. | $color-successvar(--color-success) | 4.55:1 | |
#657787 rgb(101, 119, 135) | Gray Darker Darker gray that is accessible with white when used for text. Most commonly used as a text color for interface help texts. | $color-gray-darkervar(--color-gray-darker) | 4.62:1 | |
#909599 rgb(144, 149, 153) | Gray Dark Dark gray is used for form borders that need to pass WCAG Level AA non-text contrast requirements. Please note that this color isn’t accessible when used for text. | $color-gray-darkvar(--color-gray-dark) | 3.02:1 | |
#7a01c4 rgb(122, 1, 196) | Data 01 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-01var(--color-data-01) | 7.99:1 | |
#c21565 rgb(194, 21, 101) | Data 06 Data visualization color that is accessible with white. Please note that this color should not be used for any other purpose. | $color-data-06var(--color-data-06) | 5.85:1 |