created:12/30/2020
updated:12/30/2020
loc
128
comments
8%

CometColor

avatar of atanasster

Color item displaying as a row, with color, name sass variable name and AA/AAA tests Design inspired by Comet.

A11y tests

05
$comet-color-midnight-05
#020D17
AAA
10
$comet-color-midnight-10
#041B2F
AAA
20
$comet-color-midnight-20
#08365E
AAA
30
$comet-color-midnight-30
#0C518D
AAA
40
$comet-color-midnight-40
#106CBC
AA
50
$comet-color-midnight-50
#1487EB
AA
60
$comet-color-midnight-60
#439FEF
AAA
70
$comet-color-midnight-70
#72B7F3
AAA
80
$comet-color-midnight-80
#A1CFF7
AAA
90
$comet-color-midnight-90
#D0E7FB
AAA
 
id
description
avoid-inline-spacing

Ensure that text spacing set through style attributes can be adjusted with custom stylesheets...

color-contrast

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

table-duplicate-name

Ensure the <caption> element does not contain the same text as the summary attribute...

td-headers-attr

Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table...

th-has-data-cells

Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe...

Viewport

05
$comet-color-midnight-05
#020D17
AAA
10
$comet-color-midnight-10
#041B2F
AAA
20
$comet-color-midnight-20
#08365E
AAA
30
$comet-color-midnight-30
#0C518D
AAA
40
$comet-color-midnight-40
#106CBC
AA
50
$comet-color-midnight-50
#1487EB
AA
60
$comet-color-midnight-60
#439FEF
AAA
70
$comet-color-midnight-70
#72B7F3
AAA
80
$comet-color-midnight-80
#A1CFF7
AAA
90
$comet-color-midnight-90
#D0E7FB
AAA
320px
05
$comet-color-midnight-05
#020D17
AAA
10
$comet-color-midnight-10
#041B2F
AAA
20
$comet-color-midnight-20
#08365E
AAA
30
$comet-color-midnight-30
#0C518D
AAA
40
$comet-color-midnight-40
#106CBC
AA
50
$comet-color-midnight-50
#1487EB
AA
60
$comet-color-midnight-60
#439FEF
AAA
70
$comet-color-midnight-70
#72B7F3
AAA
80
$comet-color-midnight-80
#A1CFF7
AAA
90
$comet-color-midnight-90
#D0E7FB
AAA
375px
05
$comet-color-midnight-05
#020D17
AAA
10
$comet-color-midnight-10
#041B2F
AAA
20
$comet-color-midnight-20
#08365E
AAA
30
$comet-color-midnight-30
#0C518D
AAA
40
$comet-color-midnight-40
#106CBC
AA
50
$comet-color-midnight-50
#1487EB
AA
60
$comet-color-midnight-60
#439FEF
AAA
70
$comet-color-midnight-70
#72B7F3
AAA
80
$comet-color-midnight-80
#A1CFF7
AAA
90
$comet-color-midnight-90
#D0E7FB
AAA
768px
05
$comet-color-midnight-05
#020D17
AAA
10
$comet-color-midnight-10
#041B2F
AAA
20
$comet-color-midnight-20
#08365E
AAA
30
$comet-color-midnight-30
#0C518D
AAA
40
$comet-color-midnight-40
#106CBC
AA
50
$comet-color-midnight-50
#1487EB
AA
60
$comet-color-midnight-60
#439FEF
AAA
70
$comet-color-midnight-70
#72B7F3
AAA
80
$comet-color-midnight-80
#A1CFF7
AAA
90
$comet-color-midnight-90
#D0E7FB
AAA
1024px