created:12/30/2020
updated:12/30/2020
loc
105
comments
10%

IBMDLColor

avatar of atanasster

Color item displaying the color as a row with the color name and display option of HEX, RGB, PMS, or CMYK color values. Design inspired by IBM's Design Language.

A11y tests

Red 100
2d0709
Red 90
520408
Red 80
750e13
Red 70
a2191f
Red 60
da1e28
Red 50
fa4d56
Red 40
ff8389
Red 30
ffb3b8
Red 20
ffd7d9
Red 10
fff1f1
 
id
description
aria-allowed-attr

Ensures ARIA attributes are allowed for an element's role...

aria-allowed-role

Ensures role attribute has an appropriate value for the element...

aria-required-attr

Ensures elements with ARIA roles have all required ARIA attributes...

aria-required-children

Ensures elements with an ARIA role that require child roles contain them...

aria-required-parent

Ensures elements with an ARIA role that require parent roles are contained by them...

aria-roles

Ensures all elements with a role attribute use a valid value...

aria-valid-attr-value

Ensures all ARIA attributes have valid values...

aria-valid-attr

Ensures attributes that begin with aria- are valid ARIA attributes...

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...

duplicate-id-aria

Ensures every id attribute value used in ARIA and in labels is unique...

nested-interactive

Ensure controls are not nested as they are not announced by screen readers...

tabindex

Ensures tabindex attribute values are not greater than 0...

Viewport

Red 100
2d0709
Red 90
520408
Red 80
750e13
Red 70
a2191f
Red 60
da1e28
Red 50
fa4d56
Red 40
ff8389
Red 30
ffb3b8
Red 20
ffd7d9
Red 10
fff1f1
320px
Red 100
2d0709
Red 90
520408
Red 80
750e13
Red 70
a2191f
Red 60
da1e28
Red 50
fa4d56
Red 40
ff8389
Red 30
ffb3b8
Red 20
ffd7d9
Red 10
fff1f1
375px
Red 100
2d0709
Red 90
520408
Red 80
750e13
Red 70
a2191f
Red 60
da1e28
Red 50
fa4d56
Red 40
ff8389
Red 30
ffb3b8
Red 20
ffd7d9
Red 10
fff1f1
768px
Red 100
2d0709
Red 90
520408
Red 80
750e13
Red 70
a2191f
Red 60
da1e28
Red 50
fa4d56
Red 40
ff8389
Red 30
ffb3b8
Red 20
ffd7d9
Red 10
fff1f1
1024px