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.

Overview

#5C6AC4
#EFEFEF
primary
AA+
AA
F
AAA

Controls

Name
Description
Default
Controls
name

name of the color, If none, or same as the color value, some color blocks will not display it

string
-
color

color value as a string. accepted hex, rgb, hsl color strings

ColorValue
-

A11y tests

#5C6AC4
#EFEFEF
primary
AA+
AA
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--height-auto.rah-static[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-rmw7lg > tbody > tr > td:nth-child(3) > .css-1mzq7ii

Viewport

#5C6AC4
#EFEFEF
primary
AA+
AA
F
AAA
320px
#5C6AC4
#EFEFEF
primary
AA+
AA
F
AAA
375px
#5C6AC4
#EFEFEF
primary
AA+
AA
F
AAA
768px
#5C6AC4
#EFEFEF
primary
AA+
AA
F
AAA
1024px