Довідка:Контрастний фон для посилань

Див. також: Вікіпедія:Стиль/Доступність § Колір

Ці таблиці кольорів покликані допомогти редакторам вибирати доступні фони, що відповідають різним кольоровим схемам. Перша таблиця містить 14 різних відтінків сумісні з WCAG AAA, а також сірий і коричневий колір. У кожному рядку, «основний кольор» є найпростішим представленням відтінку. Інші кольори є похідними від основного кольору, змінюючи свою світлоту^[en] в HSL, щоб досягти необхідного коефіцієнту контрастності^[en] WCAG, який визначений як коефіцієнт трохи відозмінених значень відносної яскровості^[en] CIE.

Найкраще вибирати кольори фону, що пропонують достатній контраст відносно кольору тексту та синіх посилань^[en], що також є кольором приміток (у темі Вектор 2022), обидва з яких дуже часто зустрічаються в більшості статтях. Використовуйте WCAG link contrast checker, щоб впевнитися, що вибраний колір фону пропонує рекомендований рівень контрасту WCAG AA відносно псевдо-чорного кольору звичайного тексту #202122 ( ) та синіх посилань (тема Вектор: #0645ad ( ) для внутрішніх посилань (на статті всередині вікі), #3366cc ( ) для посилань на інші вікі або на сторінки в інтернеті; тема Вектор 2022: #3366cc ( )).^[1] Дотримання WCAG AA вимагається різними урядовими установами в США, ЄС, ВБ та Канаді.

Коли відсутні посилання чи примітки, то можливо отримати додатковий контраст, встановивши кольор тексту чисто чорним (#000000). Якщо потрібен темний фон, то він повинен бути використаний з білим текстом (#FFFFFF) без посилань або приміток.

Сумісність кольору фону щодо кольорів тексту і посилань за стандартом WCAG AAA (якщо не вказано інше)
Основний колір				Найтемніший кольоровий фон для темного тексту			Найсвітліший фон для білого тексту
Назва	Відтінок	Hex	Колір	Текст та посилання^[en] (WCAG AA)^[2]	Псевдо-чорний колір звичайного тексту	Чисто чорний текст (не є стандартом для тексту)	Найсвітліший фон для білого тексту
Red	0°	FF0000		FFE6E6	FF8888	FF6060	B60000
Orange	30°	FF8000		FFE8D0	FF8E1C	E97500	8C4600
Yellow	60°	FFFF00		F3F300	B1B100	9B9B00	5C5C00
Chartreuse	90°	80FF00		B9FF72	61C100	54A900	326500
Green	120°	00FF00		ABFFAB	00C700	00AE00	006800
Spring green	150°	00FF80		9DFFCE	00C563	#00AC56	006733
Cyan	180°	00FFFF		7DFFFF	00BFBF	00A6A6	006363
Azure	210°	0080FF		DCEEFF	60B0FF	3098FF	0057AF
Blue	240°	0000FF		EAEAFF	A2A2FF	8888FF	3030FF
Violet	270°	8000FF		F3E7FF	C994FF	B974FF	7600EC
Magenta	300°	FF00FF		FFE3FF	FF73FF	FF29FF	9F009F
Rose	330°	FF0080		FFE4F1	FF81C0	FF52A8	B00058
Grey	—	808080		EBEBEB	ABABAB	959595	595959

Кольори HTML

Іменовані кольори HTML

Наступні кольори HTML підтримуються більшістю основних браузерів з 2005:

WCAG AA з текстом та синіми посиланнями
White
Ivory
MintCream
Azure
Snow
Honeydew
FloralWhite
GhostWhite
AliceBlue
Seashell
OldLace
WhiteSmoke
LavenderBlush
Beige
Linen
AntiqueWhite
LightYellow
LemonChiffon
LightGoldenrodYellow
PapayaWhip
Cornsilk
BlanchedAlmond
LightCyan
Yellow

WCAG AAA з білим текстом
Black
DarkSlateGray
Navy
DarkBlue
MidnightBlue
MediumBlue
Blue
Indigo
Purple
DarkSlateBlue
DarkMagenta
DarkRed
Maroon
SaddleBrown
Brown
DarkGreen

WCAG AA з білим текстом
DimGray
MediumVioletRed
Firebrick
Crimson
DarkOliveGreen
Green
Teal

Скорочені назви кольорів HTML

Багато з цих кольорів HTML використані яй кольори фону для шаблонів елементів таблиць, особливо в діапазоні відтінків жовтий-зелений-ціановий. Для діапазону синій-маджента-червоний, деякі з цих шаблонів використовують трохи темніші кольори, щоб досягти трохи сильнішої насиченості в певних випадках.

WCAG AAA з невідвіданими посиланнями
FEF	FFE	EFD		EFE		DFE	EFF
	FFD	EFD		EFE		CFE	DFF
	FFC	EFC		DFC	DFD	BFE	CFF
	FFB	EFB	DFB	CFB	CFC	CFD	BFF
	FFA	EFA	DFA	CFA	CFC	BFD	AFF
FEE	FF9	EF9	DF9	CF9	BFB	BFC	9FF
FED	FF8	EF8	DF8	CF8		AFC
FEC	FF7	EF7	DF7	CF7
FEB	FF6	EF6	DF6	CF6
FEA	FF5	EF5	DF5	CF5
FE9	FF4	EF4	DF4	CF4
FE8	FF3	EF3	DF3	CF3	BFA	AFD
FE7	FF2	EF2	DF2	CF2	BF9	AFE
FE6	FF1	EF1	DF1	CF1	BF8	9FE
FE5	FF0	EF0	DF0	CF0	BF7	9FD	8FF
EEC	EED	EEE				EEF	DEF

Категоріальна палітра

Пастель 2 якісної брюєрівської палітри може трішки освітлити (у кольоровому просторі HSL), щоб стати сумісними з WCAG AAA відносно кольору невідвіданих посилань^[3]. Результатом стане наступні кольори:

Приближена брюєрівська палітра *пастель 2*
Старий вектор (посилання всередині Вікіпедії)
D9F1E6
FEE7D6
E7ECF4
FAE6F2
E6F5C9
FFF2AE
F5EAD9
EBEBEB
Старий вектор (посилання за межі Вікіпедії)
D9F1E6
FEE7D6
E7ECF4
FAE6F2
E6F5C9
FFF2AE
F5EAD9
EBEBEB
Вектор 2022
D9F1E6
FEE7D6
E7ECF4
FAE6F2
E6F5C9
FFF2AE
F5EAD9
EBEBEB

Щоб лекго використовувати цю палітру, дивіться {{CellCategory}} та {{CategoryBgColor}}.

Див. також

Примітки

↑ WCAG 2.0 and Link Colors. WebAIM Blog. WebAIM. 22 липня 2009.
↑ Таблиця створенна для вектору 2022. Однак вона підходить і для старого вектора, колір посилання в межах вікі (#0645AD) взагалі повністю відповідює рівню ААА, а колір посилання на інші вікі або на сторінки в інтернеті (#3366BB) має таку ж сумісність, що і для нового вектору.
↑ Це є правдою лише для вікіпосилання старого вектора. Для вектора 2022 контраст кольору нормального тексту не відповідає рівню ААА, лише рівню АА.