created:4/29/2021
updated:4/29/2021
loc
377
comments
3%
TableColor
Color item displaying as a table row, with support for dark mode colors and AA accessibility tests. Design created to accomodate theme-ui-type color palettes. Custom design created by component-controls.
| AA color | AA dark | ||||
|---|---|---|---|---|---|
| color / dark | name | #FFFFFF | #000000 | #FFFFFF | #000000 |
#454F5B #D3D4DB | text | F | AAA | F | AAA |
#FFFFFF #38404A | background | AAA | F | AAA | F |
#5C6AC4 #EFEFEF | primary | AA+ | AA | F | AAA |
#006FBB #B4E1FA | secondary | AA+ | AA | F | AAA |
#E6E6E6 #E6E6E6 | muted | AAA | F | F | AAA |
#69768C #C9CACF | mutedText | AA | AA | F | AAA |
#F49342 | accent | AAA | F | ||
#00044C | darken | F | AAA | ||
#F6F6F6 #4D5866 | gray | AAA | F | AAA | F |
#D9F2F1 #B7ECEC | highlight | AAA | F | F | AAA |
#3B817D #D9F2F1 | action | AA | AA | F | AAA |
#027AC5 #B3D9FF | selected | AA | AA | F | AAA |
RGBA(0, 0, 0, 0.1) RGBA(211, 212, 219, 0.1) | shadow | F | AAA | F | AAA |
| AA color | AA dark | ||||
|---|---|---|---|---|---|
| color / dark | name | #FFFFFF | #000000 | #FFFFFF | #000000 |
#454F5B #D3D4DB | text | F | AAA | F | AAA |
#FFFFFF #38404A | background | AAA | F | AAA | F |
#5C6AC4 #EFEFEF | primary | AA+ | AA | F | AAA |
#006FBB #B4E1FA | secondary | AA+ | AA | F | AAA |
#E6E6E6 #E6E6E6 | muted | AAA | F | F | AAA |
#69768C #C9CACF | mutedText | AA | AA | F | AAA |
#F49342 | accent | AAA | F | ||
#00044C | darken | F | AAA | ||
#F6F6F6 #4D5866 | gray | AAA | F | AAA | F |
#D9F2F1 #B7ECEC | highlight | AAA | F | F | AAA |
#3B817D #D9F2F1 | action | AA | AA | F | AAA |
#027AC5 #B3D9FF | selected | AA | AA | F | AAA |
RGBA(0, 0, 0, 0.1) RGBA(211, 212, 219, 0.1) | shadow | F | AAA | F | AAA |
| AA color | AA dark | ||||
|---|---|---|---|---|---|
| color / dark | name | #FFFFFF | #000000 | #FFFFFF | #000000 |
#454F5B #D3D4DB | text | F | AAA | F | AAA |
#FFFFFF #38404A | background | AAA | F | AAA | F |
#5C6AC4 #EFEFEF | primary | AA+ | AA | F | AAA |
#006FBB #B4E1FA | secondary | AA+ | AA | F | AAA |
#E6E6E6 #E6E6E6 | muted | AAA | F | F | AAA |
#69768C #C9CACF | mutedText | AA | AA | F | AAA |
#F49342 | accent | AAA | F | ||
#00044C | darken | F | AAA | ||
#F6F6F6 #4D5866 | gray | AAA | F | AAA | F |
#D9F2F1 #B7ECEC | highlight | AAA | F | F | AAA |
#3B817D #D9F2F1 | action | AA | AA | F | AAA |
#027AC5 #B3D9FF | selected | AA | AA | F | AAA |
RGBA(0, 0, 0, 0.1) RGBA(211, 212, 219, 0.1) | shadow | F | AAA | F | AAA |
| AA color | AA dark | ||||
|---|---|---|---|---|---|
| color / dark | name | #FFFFFF | #000000 | #FFFFFF | #000000 |
#454F5B #D3D4DB | text | F | AAA | F | AAA |
#FFFFFF #38404A | background | AAA | F | AAA | F |
#5C6AC4 #EFEFEF | primary | AA+ | AA | F | AAA |
#006FBB #B4E1FA | secondary | AA+ | AA | F | AAA |
#E6E6E6 #E6E6E6 | muted | AAA | F | F | AAA |
#69768C #C9CACF | mutedText | AA | AA | F | AAA |
#F49342 | accent | AAA | F | ||
#00044C | darken | F | AAA | ||
#F6F6F6 #4D5866 | gray | AAA | F | AAA | F |
#D9F2F1 #B7ECEC | highlight | AAA | F | F | AAA |
#3B817D #D9F2F1 | action | AA | AA | F | AAA |
#027AC5 #B3D9FF | selected | AA | AA | F | AAA |
RGBA(0, 0, 0, 0.1) RGBA(211, 212, 219, 0.1) | shadow | F | AAA | F | AAA |
| AA color | AA dark | ||||
|---|---|---|---|---|---|
| color / dark | name | #FFFFFF | #000000 | #FFFFFF | #000000 |
#454F5B #D3D4DB | text | F | AAA | F | AAA |
#FFFFFF #38404A | background | AAA | F | AAA | F |
#5C6AC4 #EFEFEF | primary | AA+ | AA | F | AAA |
#006FBB #B4E1FA | secondary | AA+ | AA | F | AAA |
#E6E6E6 #E6E6E6 | muted | AAA | F | F | AAA |
#69768C #C9CACF | mutedText | AA | AA | F | AAA |
#F49342 | accent | AAA | F | ||
#00044C | darken | F | AAA | ||
#F6F6F6 #4D5866 | gray | AAA | F | AAA | F |
#D9F2F1 #B7ECEC | highlight | AAA | F | F | AAA |
#3B817D #D9F2F1 | action | AA | AA | F | AAA |
#027AC5 #B3D9FF | selected | AA | AA | F | AAA |
RGBA(0, 0, 0, 0.1) RGBA(211, 212, 219, 0.1) | shadow | F | AAA | F | AAA |