created:12/30/2020
updated:12/30/2020
loc
163
comments
6%

ETradeColor

avatar of atanasster

Color item displaying the color as a block with values for hex, class, and sass can be copied to clipboard on hover. Design inspired by E-Trade Design System.

A11y tests

Purple
#5627d8
$link-color
Text links and other interactive elements
Negative red
#cc0000
$negative
Error state
Data trending down
Positive green
#107a1b
.text-positive
$positive
Success state
Data trending up
Body gray
#242424
.body-text-color
$body-text-color
Headers and body text
Background accent color
#f1ecff
.background-accent-color-1
$background-accent-color-1
Background color
Not for text
 
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...

color-contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds...

Viewport

Purple
#5627d8
$link-color
Text links and other interactive elements
Negative red
#cc0000
$negative
Error state
Data trending down
Positive green
#107a1b
.text-positive
$positive
Success state
Data trending up
Body gray
#242424
.body-text-color
$body-text-color
Headers and body text
Background accent color
#f1ecff
.background-accent-color-1
$background-accent-color-1
Background color
Not for text
320px
Purple
#5627d8
$link-color
Text links and other interactive elements
Negative red
#cc0000
$negative
Error state
Data trending down
Positive green
#107a1b
.text-positive
$positive
Success state
Data trending up
Body gray
#242424
.body-text-color
$body-text-color
Headers and body text
Background accent color
#f1ecff
.background-accent-color-1
$background-accent-color-1
Background color
Not for text
375px
Purple
#5627d8
$link-color
Text links and other interactive elements
Negative red
#cc0000
$negative
Error state
Data trending down
Positive green
#107a1b
.text-positive
$positive
Success state
Data trending up
Body gray
#242424
.body-text-color
$body-text-color
Headers and body text
Background accent color
#f1ecff
.background-accent-color-1
$background-accent-color-1
Background color
Not for text
768px
Purple
#5627d8
$link-color
Text links and other interactive elements
Negative red
#cc0000
$negative
Error state
Data trending down
Positive green
#107a1b
.text-positive
$positive
Success state
Data trending up
Body gray
#242424
.body-text-color
$body-text-color
Headers and body text
Background accent color
#f1ecff
.background-accent-color-1
$background-accent-color-1
Background color
Not for text
1024px