Довідка:Контрастний фон для посилань
Ці таблиці кольорів покликані допомогти редакторам вибирати доступні фони, що відповідають різним кольоровим схемам. Перша таблиця містить 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) без посилань або приміток.
| Основний колір | Найтемніший кольоровий фон для темного тексту | Найсвітліший фон для білого тексту | |||||
|---|---|---|---|---|---|---|---|
| Назва | Відтінок | 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 підтримуються більшістю основних браузерів з 2005:
| White |
| Ivory |
| MintCream |
| Azure |
| Snow |
| Honeydew |
| FloralWhite |
| GhostWhite |
| AliceBlue |
| Seashell |
| OldLace |
| WhiteSmoke |
| LavenderBlush |
| Beige |
| Linen |
| AntiqueWhite |
| LightYellow |
| LemonChiffon |
| LightGoldenrodYellow |
| PapayaWhip |
| Cornsilk |
| BlanchedAlmond |
| LightCyan |
| Yellow |
| Black |
| DarkSlateGray |
| Navy |
| DarkBlue |
| MidnightBlue |
| MediumBlue |
| Blue |
| Indigo |
| Purple |
| DarkSlateBlue |
| DarkMagenta |
| DarkRed |
| Maroon |
| SaddleBrown |
| Brown |
| DarkGreen |
| DimGray |
| MediumVioletRed |
| Firebrick |
| Crimson |
| DarkOliveGreen |
| Green |
| Teal |
Багато з цих кольорів HTML використані яй кольори фону для шаблонів елементів таблиць, особливо в діапазоні відтінків жовтий-зелений-ціановий. Для діапазону синій-маджента-червоний, деякі з цих шаблонів використовують трохи темніші кольори, щоб досягти трохи сильнішої насиченості в певних випадках.
| 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]. Результатом стане наступні кольори:
| Старий вектор (посилання всередині Вікіпедії) | |||||||
|---|---|---|---|---|---|---|---|
| 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 July 2009.
- ↑ Таблиця створенна для вектору 2022. Однак вона підходить і для старого вектора, колір посилання в межах вікі (#0645AD) взагалі повністю відповідює рівню ААА, а колір посилання на інші вікі або на сторінки в інтернеті (#3366BB) має таку ж сумісність, що і для нового вектору.
- ↑ Це є правдою лише для вікіпосилання старого вектора. Для вектора 2022 контраст кольору нормального тексту не відповідає рівню ААА, лише рівню АА.