created:12/30/2020
updated:12/30/2020
loc
81
comments
12%

FinastraColor

avatar of atanasster

Color item displaying the color as a small block, with name and hex color on the side. If the color is a primary color, will display as a circle. Design inspired by Finastra.

Overview

V
V 100
#cf1322

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

V
V 100
#cf1322
 
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 2.42 (foreground color: #a2a7ad, background color: #ffffff, 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-i2js1t > .css-1iveljz

Viewport

V
V 100
#cf1322
320px
V
V 100
#cf1322
375px
V
V 100
#cf1322
768px
V
V 100
#cf1322
1024px