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

ScoreContrast ratioResult
AAA
>= 7.0:1Passes WCAG 2.0 AAA
AA
>= 4.5:1Passes WCAG 2.0 AA
AA+
>= 3.0:1Passes WCAG 2.0 Large Text AA
F
< 3.0:1AA Test failed
 
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(1) > .css-1mzq7ii

Viewport

ScoreContrast ratioResult
AAA
>= 7.0:1Passes WCAG 2.0 AAA
AA
>= 4.5:1Passes WCAG 2.0 AA
AA+
>= 3.0:1Passes WCAG 2.0 Large Text AA
F
< 3.0:1AA Test failed
320px
ScoreContrast ratioResult
AAA
>= 7.0:1Passes WCAG 2.0 AAA
AA
>= 4.5:1Passes WCAG 2.0 AA
AA+
>= 3.0:1Passes WCAG 2.0 Large Text AA
F
< 3.0:1AA Test failed
375px
ScoreContrast ratioResult
AAA
>= 7.0:1Passes WCAG 2.0 AAA
AA
>= 4.5:1Passes WCAG 2.0 AA
AA+
>= 3.0:1Passes WCAG 2.0 Large Text AA
F
< 3.0:1AA Test failed
768px
ScoreContrast ratioResult
AAA
>= 7.0:1Passes WCAG 2.0 AAA
AA
>= 4.5:1Passes WCAG 2.0 AA
AA+
>= 3.0:1Passes WCAG 2.0 Large Text AA
F
< 3.0:1AA Test failed
1024px
Previous
Design Tokens/Colors/SolidColor
Next
Design Tokens/Colors/UniformColor