skip to main content
skip to navigation sidebar
skip to context sidebar
A next-generation tool to create blazing-fast documentation sites
API
Blog
Tutorial
Showcase
twitter
github
Edit this page
created:4/29/2021
updated:4/29/2021
loc
377
comments
3%

TableColor

avatar of atanasster

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.

A11y tests

AA colorAA dark
color / darkname
#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
 
impact
id
description
serious
color-contrast

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

summary
target
Fix any of the following: Element has insufficient color contrast of 4.31 (foreground color: #000000, background color: #5c6ac4, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > table > tbody > tr:nth-child(3) > td:nth-child(3) > .css-1mzq7ii
Fix any of the following: Element has insufficient color contrast of 3.99 (foreground color: #000000, background color: #006fbb, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > table > tbody > tr:nth-child(4) > td:nth-child(3) > .css-1mzq7ii
Fix any of the following: Element has insufficient color contrast of 1.24 (foreground color: #ffffff, background color: #e6e6e6, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > table > tbody > tr:nth-child(13) > td:nth-child(1) > .css-1uyif2x > .css-1owxv8o

Viewport

AA colorAA dark
color / darkname
#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
320px
AA colorAA dark
color / darkname
#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
375px
AA colorAA dark
color / darkname
#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
768px
AA colorAA dark
color / darkname
#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
1024px
Previous
Design Tokens/Colors/SolidColor
Next
Design Tokens/Colors/UniformColor