created:12/30/2020
updated:12/30/2020
loc
155
comments
6%

AtlassianColor

avatar of atanasster

Color item displaying the color as a block with AA color contrast tests. Design inspired by Atlassian Design System.

Overview

APASS
APASS
APASS
APASS
NAME
Blue400
HEX
#2270EE
RGB
34, 112, 238

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

APASS
APASS
APASS
APASS
NAME
Blue400
HEX
#2270EE
RGB
34, 112, 238
 
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...

Viewport

APASS
APASS
APASS
APASS
NAME
Blue400
HEX
#2270EE
RGB
34, 112, 238
320px
APASS
APASS
APASS
APASS
NAME
Blue400
HEX
#2270EE
RGB
34, 112, 238
375px
APASS
APASS
APASS
APASS
NAME
Blue400
HEX
#2270EE
RGB
34, 112, 238
768px
APASS
APASS
APASS
APASS
NAME
Blue400
HEX
#2270EE
RGB
34, 112, 238
1024px