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

Матеріал з Вікіпедії — вільної енциклопедії.
Перейти до навігації Перейти до пошуку

Ці таблиці кольорів покликані допомогти редакторам вибирати доступні фони, що відповідають різним кольоровим схемам. Перша таблиця містить 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 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

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

[ред. | ред. код]

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

WCAG AAA з невідвіданими посиланнями
FEF FFE EFD EFE DFE EFF
FFD CFE DFF
FFC EFC DFC DFD BFE CFF
FFB EFB DFB CFB CFC CFD BFF
FFA EFA DFA CFA 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}}.

Див. також

[ред. | ред. код]

Примітки

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