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 color
colorname
#FFFFFF
#000000
#FAFAF9
background
AAA
F
#B6DEE2
blue
AAA
F
#247BA0
blueDark
AA+
AA
#B2E4DC
green
AAA
F
#2D5948
greenDark
F
AAA
RGBA(0,0,0,.1)
muted
F
AAA
#F25F5C
primary
AA
AA+
#B51916
primaryDark
AA+
AA
#FCBAB1
primaryLight
AAA
F
 
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.41 (foreground color: #000000, background color: #247ba0, 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 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(6) > td:nth-child(1) > .css-1uyif2x > .css-1dkv0g4
Fix any of the following: Element has insufficient color contrast of 3.19 (foreground color: #ffffff, background color: #f25f5c, 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(7) > .css-1u8qly9 > .css-1mzq7ii
Fix any of the following: Element has insufficient color contrast of 3.11 (foreground color: #000000, background color: #b51916, 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(8) > td:nth-child(3) > .css-1mzq7ii

Viewport

AA color
colorname
#FFFFFF
#000000
#FAFAF9
background
AAA
F
#B6DEE2
blue
AAA
F
#247BA0
blueDark
AA+
AA
#B2E4DC
green
AAA
F
#2D5948
greenDark
F
AAA
RGBA(0,0,0,.1)
muted
F
AAA
#F25F5C
primary
AA
AA+
#B51916
primaryDark
AA+
AA
#FCBAB1
primaryLight
AAA
F
320px
AA color
colorname
#FFFFFF
#000000
#FAFAF9
background
AAA
F
#B6DEE2
blue
AAA
F
#247BA0
blueDark
AA+
AA
#B2E4DC
green
AAA
F
#2D5948
greenDark
F
AAA
RGBA(0,0,0,.1)
muted
F
AAA
#F25F5C
primary
AA
AA+
#B51916
primaryDark
AA+
AA
#FCBAB1
primaryLight
AAA
F
375px
AA color
colorname
#FFFFFF
#000000
#FAFAF9
background
AAA
F
#B6DEE2
blue
AAA
F
#247BA0
blueDark
AA+
AA
#B2E4DC
green
AAA
F
#2D5948
greenDark
F
AAA
RGBA(0,0,0,.1)
muted
F
AAA
#F25F5C
primary
AA
AA+
#B51916
primaryDark
AA+
AA
#FCBAB1
primaryLight
AAA
F
768px
AA color
colorname
#FFFFFF
#000000
#FAFAF9
background
AAA
F
#B6DEE2
blue
AAA
F
#247BA0
blueDark
AA+
AA
#B2E4DC
green
AAA
F
#2D5948
greenDark
F
AAA
RGBA(0,0,0,.1)
muted
F
AAA
#F25F5C
primary
AA
AA+
#B51916
primaryDark
AA+
AA
#FCBAB1
primaryLight
AAA
F
1024px
Previous
Design Tokens/Colors/SolidColor
Next
Design Tokens/Colors/UniformColor