Accessibility First UX Suite

Readable Navy
#1a1a40
Contrast White
#ffffff
Tab Order Teal
#4dc9b0
Focus Ring Orange
#ff914d
Keyboard Gray
#828282
Semantic Purple
#6d5acf

Paleta składa się z kolorów Ciemny, Światło. Kolory akcentujące Focus Ring Orange #ff914d i Semantic Purple #6d5acf. Paleta ma temperaturę kolorów Zimny, Neutralny, Ciepły.

Według jasności paleta rozciąga się od #1A1A40 (najciemniejszy) do #FFFFFF (najjaśniejszy). Zakres jasności jest szeroki.

Nasycenie jest mieszane — część próbek stonowana, część żywsza.

Barwy są rozłożone szeroko po kole — paleta zróżnicowana (heurystyka).

Ogólna temperatura barw przechyla się ku zimnu.

Kody HEX (posortowane): #1A1A40, #4DC9B0, #6D5ACF, #828282, #FF914D, #FFFFFF

Paleta Accessibility First UX Suite zawiera kombinację kolorów kodów 6:

KLĄTWA: #1a1a40, RGB: (26, 26, 64); KLĄTWA: #ffffff, RGB: (255, 255, 255); KLĄTWA: #4dc9b0, RGB: (77, 201, 176)

KLĄTWA: #ff914d, RGB: (255, 145, 77); KLĄTWA: #828282, RGB: (130, 130, 130); KLĄTWA: #6d5acf, RGB: (109, 90, 207)

Uproszczona wersja palety kolorów

Odcień midnightblue, Biały, Odcień mediumaquamarine, Odcień sandybrown, Cień Szary, Cień slateblue

Schemat kolorów został stworzony przez colorstudio

Więcej palet z:

Kody kolorów w palecie

Accessibility First UX Suite kody kolorów HEX, informacje RGB w tabeli

Kolor	KLĄTWA	RGB	Nazwa	alternatywne imie
#1a1a40	#1a1a40	RGB(26, 26, 64)	Readable Navy	—
#ffffff	#ffffff	RGB(255, 255, 255)	Contrast White	White
#4dc9b0	#4dc9b0	RGB(77, 201, 176)	Tab Order Teal	—
#ff914d	#ff914d	RGB(255, 145, 77)	Focus Ring Orange	—
#828282	#828282	RGB(130, 130, 130)	Keyboard Gray	Gray51
#6d5acf	#6d5acf	RGB(109, 90, 207)	Semantic Purple	Astro Purple

Kontrast palety kolorów

4 pary kolorów mają niski kontrast i wymagają poprawy, co może wpłynąć na czytelność.

Kolor tekstu	Kolor tła	Współczynnik kontrastu
#4dc9b0	#ff914d	1.09
#4dc9b0	#828282	1.88
#ff914d	#828282	1.72
#828282	#6d5acf	1.36

Paleta obrazów Accessibility First UX Suite png

--color-readable-navy:	#1a1a40;
--color-contrast-white:	#ffffff;
--color-tab-order-teal:	#4dc9b0;
--color-focus-ring-orange:	#ff914d;
--color-keyboard-gray:	#828282;
--color-semantic-purple:	#6d5acf;

$color-readable-navy:	#1a1a40;
$color-contrast-white:	#ffffff;
$color-tab-order-teal:	#4dc9b0;
$color-focus-ring-orange:	#ff914d;
$color-keyboard-gray:	#828282;
$color-semantic-purple:	#6d5acf;

@color-readable-navy:	#1a1a40;
@color-contrast-white:	#ffffff;
@color-tab-order-teal:	#4dc9b0;
@color-focus-ring-orange:	#ff914d;
@color-keyboard-gray:	#828282;
@color-semantic-purple:	#6d5acf;