Web Components Accessibility Set

Contrast Indigo
#4b4fe2
Keyboard Lemon
#fffb91
Focus Border Cyan
#a0f6ff
Tab Order Gray
#d8dadf
Skip Link Rose
#ff9aaf
Label Black
#1a1a1a

Die Palette besteht aus Halbdunkel, Licht, Dunkel-Farben. Akzentfarben Keyboard Lemon #fffb91 und Focus Border Cyan #a0f6ff. Palette hat Farbtemperatur Kalt, Warm, Neutral.

Nach Helligkeit reicht diese Palette von #1A1A1A (dunkelstes) bis #D8DADF (hellstes). Die Helligkeitsspanne ist groß.

Die Sättigung wirkt insgesamt lebhaft (höhere Chroma).

Manche Farbton-Paare liegen nahe Komplementärpositionen — kann wie Komplementärkontrast wirken (heuristisch).

Warme und kühle Felder sind ziemlich ausgeglichen.

HEX-Codes (sortiert): #1A1A1A, #4B4FE2, #A0F6FF, #D8DADF, #FF9AAF, #FFFB91

Die Palette Web Components Accessibility Set enthält eine Kombination aus 6-Codefarben:

VERHEXEN: #4b4fe2, RGB: (75, 79, 226); VERHEXEN: #fffb91, RGB: (255, 251, 145); VERHEXEN: #a0f6ff, RGB: (160, 246, 255)

VERHEXEN: #d8dadf, RGB: (216, 218, 223); VERHEXEN: #ff9aaf, RGB: (255, 154, 175); VERHEXEN: #1a1a1a, RGB: (26, 26, 26)

Vereinfachte Version der Palettenfarben

Farbton von slateblue, Schatten von Khaki, Schatten von paleturquoise, Farbton von gainsboro, Farbton von lightpink, Schatten von Schwarz

Farbschema wurde erstellt von hex

Mehr Paletten mit:

Farbcodes in der Palette

Web Components Accessibility Set Farbcodes HEX, RGB-Informationen in der Tabelle

Farbe	VERHEXEN	RGB	Name	alternativer Name
#4b4fe2	#4b4fe2	RGB(75, 79, 226)	Contrast Indigo	—
#fffb91	#fffb91	RGB(255, 251, 145)	Keyboard Lemon	—
#a0f6ff	#a0f6ff	RGB(160, 246, 255)	Focus Border Cyan	—
#d8dadf	#d8dadf	RGB(216, 218, 223)	Tab Order Gray	—
#ff9aaf	#ff9aaf	RGB(255, 154, 175)	Skip Link Rose	—
#1a1a1a	#1a1a1a	RGB(26, 26, 26)	Label Black	Gray10

Farbpalette Kontrast

6 Farbpaare haben einen niedrigen Kontrast und müssen verbessert werden, was die Lesbarkeit beeinträchtigen kann.

Tekst kleur	Achtergrond kleur	contrast ratio
#fffb91	#a0f6ff	1.13
#fffb91	#d8dadf	1.29
#fffb91	#ff9aaf	1.85
#a0f6ff	#d8dadf	1.14
#a0f6ff	#ff9aaf	1.63
#d8dadf	#ff9aaf	1.43

Bildpalette Web Components Accessibility Set png

Web Components Accessibility Set - #552943

--color-contrast-indigo:	#4b4fe2;
--color-keyboard-lemon:	#fffb91;
--color-focus-border-cyan:	#a0f6ff;
--color-tab-order-gray:	#d8dadf;
--color-skip-link-rose:	#ff9aaf;
--color-label-black:	#1a1a1a;

$color-contrast-indigo:	#4b4fe2;
$color-keyboard-lemon:	#fffb91;
$color-focus-border-cyan:	#a0f6ff;
$color-tab-order-gray:	#d8dadf;
$color-skip-link-rose:	#ff9aaf;
$color-label-black:	#1a1a1a;

@color-contrast-indigo:	#4b4fe2;
@color-keyboard-lemon:	#fffb91;
@color-focus-border-cyan:	#a0f6ff;
@color-tab-order-gray:	#d8dadf;
@color-skip-link-rose:	#ff9aaf;
@color-label-black:	#1a1a1a;