skip to navigation sidebar

skip to context sidebar

API

Blog

Tutorial

created:12/30/2020

updated:12/30/2020

loc

182

comments

BoltColor

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

Navy

#001f5f

var(--bolt-color-navy)
Text size	Aa	Aa
#ffffff (15.43)	pass	pass
#000000 (1.36)	fail	fail

Teal

#10a5ac

var(--bolt-color-teal)
Text size	Aa	Aa
#ffffff (3.00)	pass	fail
#000000 (7.00)	pass	pass

Orange

#f76923

var(--bolt-color-orange)
Text size	Aa	Aa
#ffffff (3.00)	pass	fail
#000000 (7.00)	pass	pass

Yellow

#ffc836

var(--bolt-color-yellow)
Text size	Aa	Aa
#ffffff (1.55)	fail	fail
#000000 (13.57)	pass	pass

Wine

#661d34

var(--bolt-color-wine)
Text size	Aa	Aa
#ffffff (11.73)	pass	pass
#000000 (1.79)	fail	fail

Pink

#e63690

var(--bolt-color-pink)
Text size	Aa	Aa
#ffffff (3.97)	pass	fail
#000000 (5.29)	pass	pass

Berry

#ac1361

var(--bolt-color-berry)
Text size	Aa	Aa
#ffffff (6.95)	pass	pass
#000000 (3.02)	pass	fail

Violet

#5f67b9

var(--bolt-color-violet)
Text size	Aa	Aa
#ffffff (5.09)	pass	pass
#000000 (4.13)	pass	fail

Gray

#8d8e99

var(--bolt-color-gray)
Text size	Aa	Aa
#ffffff (3.25)	pass	fail
#000000 (6.46)	pass	pass

Black

#151619

var(--bolt-color-black)
Text size	Aa	Aa
#ffffff (18.09)	pass	pass
#000000 (1.16)	fail	fail

White

#ffffff

var(--bolt-color-white)
Text size	Aa	Aa
#ffffff (1.00)	fail	fail
#000000 (21.00)	pass	pass

impact

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 1.36 (foreground color: #000000, background color: #001f5f, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-1mhhg7b > .css-dcz2zc:nth-child(1) > .css-1bi9of6 > .css-1jpi3rg > .css-29pkkv > .css-h61ct6 > tbody > tr:nth-child(4)
	Fix any of the following: Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #10a5ac, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-1mhhg7b > .css-dcz2zc:nth-child(2) > .css-1bi9of6 > .css-vi2uxm > .css-29pkkv > .css-1dq08qi > tbody > tr:nth-child(3)
	Fix any of the following: Element has insufficient color contrast of 3 (foreground color: #ffffff, background color: #f76923, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-1mhhg7b > .css-dcz2zc:nth-child(3) > .css-1bi9of6 > .css-16sblc6 > .css-29pkkv > .css-1dq08qi > tbody > tr:nth-child(3)
	Fix any of the following: Element has insufficient color contrast of 1.54 (foreground color: #ffffff, background color: #ffc836, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-1mhhg7b > .css-dcz2zc:nth-child(4) > .css-1bi9of6 > .css-a32o78 > .css-29pkkv > .css-1dq08qi > tbody > tr:nth-child(3)
	Fix any of the following: Element has insufficient color contrast of 1.79 (foreground color: #000000, background color: #661d34, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-1mhhg7b > .css-dcz2zc:nth-child(5) > .css-1bi9of6 > .css-14k01gw > .css-29pkkv > .css-h61ct6 > tbody > tr:nth-child(4)
	Fix any of the following: Element has insufficient color contrast of 3.96 (foreground color: #ffffff, background color: #e63690, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-1mhhg7b > .css-dcz2zc:nth-child(6) > .css-1bi9of6 > .css-77s4t4 > .css-29pkkv > .css-1dq08qi > tbody > tr:nth-child(3)
	Fix any of the following: Element has insufficient color contrast of 3.01 (foreground color: #000000, background color: #ac1361, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-1mhhg7b > .css-dcz2zc:nth-child(7) > .css-1bi9of6 > .css-efsw8b > .css-29pkkv > .css-h61ct6 > tbody > tr:nth-child(4)
	Fix any of the following: Element has insufficient color contrast of 4.12 (foreground color: #000000, background color: #5f67b9, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-1mhhg7b > .css-dcz2zc:nth-child(8) > .css-1bi9of6 > .css-z73dv4 > .css-29pkkv > .css-h61ct6 > tbody > tr:nth-child(4)
	Fix any of the following: Element has insufficient color contrast of 3.24 (foreground color: #ffffff, background color: #8d8e99, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-1mhhg7b > .css-dcz2zc:nth-child(9) > .css-1bi9of6 > .css-1mpib1s > .css-29pkkv > .css-1dq08qi > tbody > tr:nth-child(3)
	Fix any of the following: Element has insufficient color contrast of 1.16 (foreground color: #000000, background color: #151619, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1	.rah-static.rah-static--height-auto[aria-hidden="false"] > div > .css-154oin1[data-testid="story"] > .story-render-container.css-dhmrnb > .css-1mhhg7b > .css-dcz2zc:nth-child(10) > .css-1bi9of6 > .css-144s81h > .css-29pkkv > .css-h61ct6 > tbody > tr:nth-child(4)

Viewport

Navy

#001f5f

var(--bolt-color-navy)
Text size	Aa	Aa
#ffffff (15.43)	pass	pass
#000000 (1.36)	fail	fail

Teal

#10a5ac

var(--bolt-color-teal)
Text size	Aa	Aa
#ffffff (3.00)	pass	fail
#000000 (7.00)	pass	pass

Orange

#f76923

var(--bolt-color-orange)
Text size	Aa	Aa
#ffffff (3.00)	pass	fail
#000000 (7.00)	pass	pass

Yellow

#ffc836

var(--bolt-color-yellow)
Text size	Aa	Aa
#ffffff (1.55)	fail	fail
#000000 (13.57)	pass	pass

Wine

#661d34

var(--bolt-color-wine)
Text size	Aa	Aa
#ffffff (11.73)	pass	pass
#000000 (1.79)	fail	fail

Pink

#e63690

var(--bolt-color-pink)
Text size	Aa	Aa
#ffffff (3.97)	pass	fail
#000000 (5.29)	pass	pass

Berry

#ac1361

var(--bolt-color-berry)
Text size	Aa	Aa
#ffffff (6.95)	pass	pass
#000000 (3.02)	pass	fail

Violet

#5f67b9

var(--bolt-color-violet)
Text size	Aa	Aa
#ffffff (5.09)	pass	pass
#000000 (4.13)	pass	fail

Gray

#8d8e99

var(--bolt-color-gray)
Text size	Aa	Aa
#ffffff (3.25)	pass	fail
#000000 (6.46)	pass	pass

Black

#151619

var(--bolt-color-black)
Text size	Aa	Aa
#ffffff (18.09)	pass	pass
#000000 (1.16)	fail	fail

White

#ffffff

var(--bolt-color-white)
Text size	Aa	Aa
#ffffff (1.00)	fail	fail
#000000 (21.00)	pass	pass

320px

Navy

#001f5f

var(--bolt-color-navy)
Text size	Aa	Aa
#ffffff (15.43)	pass	pass
#000000 (1.36)	fail	fail

Teal

#10a5ac

var(--bolt-color-teal)
Text size	Aa	Aa
#ffffff (3.00)	pass	fail
#000000 (7.00)	pass	pass

Orange

#f76923

var(--bolt-color-orange)
Text size	Aa	Aa
#ffffff (3.00)	pass	fail
#000000 (7.00)	pass	pass

Yellow

#ffc836

var(--bolt-color-yellow)
Text size	Aa	Aa
#ffffff (1.55)	fail	fail
#000000 (13.57)	pass	pass

Wine

#661d34

var(--bolt-color-wine)
Text size	Aa	Aa
#ffffff (11.73)	pass	pass
#000000 (1.79)	fail	fail

Pink

#e63690

var(--bolt-color-pink)
Text size	Aa	Aa
#ffffff (3.97)	pass	fail
#000000 (5.29)	pass	pass

Berry

#ac1361

var(--bolt-color-berry)
Text size	Aa	Aa
#ffffff (6.95)	pass	pass
#000000 (3.02)	pass	fail

Violet

#5f67b9

var(--bolt-color-violet)
Text size	Aa	Aa
#ffffff (5.09)	pass	pass
#000000 (4.13)	pass	fail

Gray

#8d8e99

var(--bolt-color-gray)
Text size	Aa	Aa
#ffffff (3.25)	pass	fail
#000000 (6.46)	pass	pass

Black

#151619

var(--bolt-color-black)
Text size	Aa	Aa
#ffffff (18.09)	pass	pass
#000000 (1.16)	fail	fail

White

#ffffff

var(--bolt-color-white)
Text size	Aa	Aa
#ffffff (1.00)	fail	fail
#000000 (21.00)	pass	pass

375px

Navy

#001f5f

var(--bolt-color-navy)
Text size	Aa	Aa
#ffffff (15.43)	pass	pass
#000000 (1.36)	fail	fail

Teal

#10a5ac

var(--bolt-color-teal)
Text size	Aa	Aa
#ffffff (3.00)	pass	fail
#000000 (7.00)	pass	pass

Orange

#f76923

var(--bolt-color-orange)
Text size	Aa	Aa
#ffffff (3.00)	pass	fail
#000000 (7.00)	pass	pass

Yellow

#ffc836

var(--bolt-color-yellow)
Text size	Aa	Aa
#ffffff (1.55)	fail	fail
#000000 (13.57)	pass	pass

Wine

#661d34

var(--bolt-color-wine)
Text size	Aa	Aa
#ffffff (11.73)	pass	pass
#000000 (1.79)	fail	fail

Pink

#e63690

var(--bolt-color-pink)
Text size	Aa	Aa
#ffffff (3.97)	pass	fail
#000000 (5.29)	pass	pass

Berry

#ac1361

var(--bolt-color-berry)
Text size	Aa	Aa
#ffffff (6.95)	pass	pass
#000000 (3.02)	pass	fail

Violet

#5f67b9

var(--bolt-color-violet)
Text size	Aa	Aa
#ffffff (5.09)	pass	pass
#000000 (4.13)	pass	fail

Gray

#8d8e99

var(--bolt-color-gray)
Text size	Aa	Aa
#ffffff (3.25)	pass	fail
#000000 (6.46)	pass	pass

Black

#151619

var(--bolt-color-black)
Text size	Aa	Aa
#ffffff (18.09)	pass	pass
#000000 (1.16)	fail	fail

White

#ffffff

var(--bolt-color-white)
Text size	Aa	Aa
#ffffff (1.00)	fail	fail
#000000 (21.00)	pass	pass

768px

Navy

#001f5f

var(--bolt-color-navy)
Text size	Aa	Aa
#ffffff (15.43)	pass	pass
#000000 (1.36)	fail	fail

Teal

#10a5ac

var(--bolt-color-teal)
Text size	Aa	Aa
#ffffff (3.00)	pass	fail
#000000 (7.00)	pass	pass

Orange

#f76923

var(--bolt-color-orange)
Text size	Aa	Aa
#ffffff (3.00)	pass	fail
#000000 (7.00)	pass	pass

Yellow

#ffc836

var(--bolt-color-yellow)
Text size	Aa	Aa
#ffffff (1.55)	fail	fail
#000000 (13.57)	pass	pass

Wine

#661d34

var(--bolt-color-wine)
Text size	Aa	Aa
#ffffff (11.73)	pass	pass
#000000 (1.79)	fail	fail

Pink

#e63690

var(--bolt-color-pink)
Text size	Aa	Aa
#ffffff (3.97)	pass	fail
#000000 (5.29)	pass	pass

Berry

#ac1361

var(--bolt-color-berry)
Text size	Aa	Aa
#ffffff (6.95)	pass	pass
#000000 (3.02)	pass	fail

Violet

#5f67b9

var(--bolt-color-violet)
Text size	Aa	Aa
#ffffff (5.09)	pass	pass
#000000 (4.13)	pass	fail

Gray

#8d8e99

var(--bolt-color-gray)
Text size	Aa	Aa
#ffffff (3.25)	pass	fail
#000000 (6.46)	pass	pass

Black

#151619

var(--bolt-color-black)
Text size	Aa	Aa
#ffffff (18.09)	pass	pass
#000000 (1.16)	fail	fail

White

#ffffff

var(--bolt-color-white)
Text size	Aa	Aa
#ffffff (1.00)	fail	fail
#000000 (21.00)	pass	pass

1024px

Design Tokens/Colors/BeelineColor

Design Tokens/Colors/CanvasColor

API

BoltColor

A11y tests

Viewport