Ми — команда Regime Map, реєстру регулювання азартних ігор за країнами. Одна з наших розробок — карта, яку будь-який сайт може вбудувати до себе: кожну країну на ній зафарбовано відповідно до її статусу. На початку листопада ми розповіли англомовній спільноті dev.to, як зробили цю карту стійкою до чужих стилів і налаштувань сайту. У коментарях до поста читач запитав: що буде з картою в контрастній темі Windows?
Чесна відповідь: вона ламалася. Розповідаємо, як ми це виправили та що з нашого досвіду може стати в пригоді для ваших інтерфейсів.
Що контрастна тема робить із кольоровою картою
У контрастній темі Windows браузер перемальовує кожну сторінку, використовуючи палітру приблизно з восьми системних кольорів: по одному для фону, тексту, посилань, кнопок тощо. Читати такий текст набагато зручніше людям зі слабким зором або чутливістю до світла.
Для карти, де зміст передається кольором, це проблема. Наша легенда містить шість статусів, кожен із власною заливкою: «Ліцензійний режим», «Державна монополія», «Залежить від регіону», «Заборонено», «Без ліцензування», «Не оцінено». Сьомий пункт, «Ще не опрацьовано», позначає країни, правила яких ми ще не перевіряли. У контрастній темі легенда втратила свій ключ: усі квадратики-позначки статусів стали порожніми, тож карта й далі була кольоровою, але ніщо не пояснювало, який колір означає який статус. А сама карта ігнорувала тему користувача: у темній контрастній темі вона (з типовим кодом вставки) стояла на сторінці яскравою плямою наших власних кольорів — саме тим відблиском, від якого людина й рятувалася, вмикаючи тему.
Причина в обох випадках одна. Фони CSS браузер перефарбовує, тому позначки втратили свої кольори. А заливки SVG Chromium не чіпає, тож карта зберегла наші.
Таку тему вмикає не дизайнер і не розробник, а сам користувач: у Windows 10 та 11 це шлях Settings → Accessibility → Contrast themes, а Edge, Chrome і Firefox її підхоплюють. Також Firefox можна налаштувати так, щоб він примусово замінював кольори сторінки. Натомість режим Increase contrast у macOS таку поведінку не запускає. Отже, перемикача на нашому боці немає: карта просто мусить правильно виглядати, коли тему ввімкнено.
Колір не може бути єдиним носієм змісту
Це відомий принцип доступності, і контрастна тема перевіряє його найжорсткіше: у ній можна користуватися лише кількома системними кольорами, а на шість статусів їх не вистачить. Тож статус має передавати щось інше, і ми дали кожному статусу власну текстуру:
| Статус | Текстура |
|---|---|
| Ліцензійний режим | суцільна заливка |
| Державна монополія | крапки |
| Залежить від регіону | діагональне штрихування |
| Заборонено | перехресне штрихування |
| Без ліцензування | горизонтальні лінії |
| Не оцінено | вертикальні лінії |
| Ще не опрацьовано | порожньо, пунктирний контур |
Ці ж текстури продубльовано в легенді, у таблиці біля назви статусу та на картці країни, тож користувач усюди бачить однакові позначки. Винятки з правил (наприклад, зали пачинко серед гральних закладів Японії) і надалі позначені зірочками поверх основної текстури, а в підказці, таблиці та картці їх прописано текстом.
Не боротися з темою користувача
Найпростіше рішення — вимкнути контрастну тему для всього віджета й намалювати все власними кольорами. Але так ми знівелювали б саму мету, заради якої людина цю тему вмикала. Тому ми дотримуємося двох правил:
- Тільки системні кольори. У контрастному режимі ми не використовуємо жодного власного кольору, лише системні: для фону, тексту, неактивного тексту, виділення, посилань і кнопок. Як вони виглядатимуть, вирішує тема користувача: в одній неактивний текст зелений, в іншій — темно-червоний. Текстури намальовані кольором тексту на кольорі фону, тому вони правильно інвертуються між темною та світлою темами.
- Відмовлятися від примусових кольорів лише там, де інакше не можна. Браузер сам перефарбовує текст, кнопки, посилання, рамки й підказки, і ми цього не чіпаємо. Виняток зробили тільки для самої карти та для позначки статусу — того самого маленького квадратика, що повторюється в легенді, таблиці, підказці й на картці країни. Текстури в цих позначках — фонові градієнти, а примусові кольори прибирають фонові зображення, тож без винятку позначки знову стали б порожніми. Для карти виняток у Chromium виявився лише запобіжником (її заливки-візерунки там зберігаються й так), але інші браузери поводяться з SVG по-різному. Утім, навіть там ми малюємо винятково системними кольорами.
Маленьке стає більшим, а фокус — системним
Тільки в контрастному режимі кружечки маленьких держав стають більшими (радіус 6 замість 4 у масштабі світу) й отримують ореол кольору фону, щоб виділятися на тлі моря. Фокус клавіатури та вибрану країну позначено системним кольором виділення — тим самим, яким тема користувача маркує активні елементи.
Якщо користувач вмикає або вимикає тему, коли сторінка вже відкрита, карта перемальовується автоматично.
Дві пастки, про які варто знати дизайнерам
- Прозора рамка стає видимою. Неактивні вкладки мали прозоре нижнє підкреслення. У контрастній темі браузер робить такі рамки видимими, тому підкреслення з'явилося під кожною вкладкою, і активну стало неможливо відрізнити. Тепер неактивні вкладки мають рамку кольору фону, що зливається з ним, як і було задумано.
- Під текстом з'являється підкладка. Chromium малює під текстом фонову підкладку (backplate). У пошуку країни активний варіант мав заливку, і ця підкладка перекривала його підпис. Тепер активний варіант обведено контуром замість заливки.
Обидві пастки легко закласти ще на етапі макета. Прозора рамка, що проявляється для активного стану, та заливка активного пункту списку — звичні прийоми, які в контрастній темі поводяться зовсім не так, як у Figma.
Як перевірити без Windows
Комп'ютера з Windows ми під рукою не мали, тому все тестували в емуляції Chromium. У Chrome це робиться через меню DevTools → Rendering → Emulate CSS media feature forced-colors. Дві емульовані палітри Chromium відповідають класичним темам Windows: High Contrast Black та High Contrast White. Темна версія нагадує тему Night sky у Windows 11. Ми перевірили 21 стан карти й картки країни в обох палітрах: масштабування, пошук, підказки, нижню шторку на телефоні, фокус клавіатури, таблицю та версію в iframe.
Не менш важливо було переконатися, що звичайний вигляд не змінився. Ми зафіксували той самий 21 стан у світлій і темній темах до змін та після них і порівняли їх попіксельно: 38 із 42 пар збіглися повністю. Чотири стани з фокусом клавіатури відрізнялися лише згладжуванням уздовж меж (anti-aliasing), але стара версія, порівняна сама із собою, дає такі самі відхилення. Уся підтримка контрастних тем додала до карти 1,7 КБ у стиснутому вигляді.
Чого ми ще не зробили
- Не перевірили на справжній Windows. Усе описане вище — емуляція. Інші контрастні теми Windows 11 (Aquatic, Desert, Dusk) мають інші кольори; хоча текстури й розкладка залишаються тими самими, наживо ми їх не бачили. Не перевіряли ми й власне налаштування Firefox, яке замінює кольори сторінки.
- Найтонші місця. У масштабі світу кружечки статусів «Державна монополія» та «Заборонено» відрізняються, але дрібно. Країнам завширшки кілька пікселів (Люксембург, Кіпр) бракує місця для текстури розміром 5–6 px, поки не збільшиш масштаб, — так само, як і у звичайному вигляді.
Якщо ви користуєтеся контрастною темою, нам цікаво дізнатися, що ви бачите.
Короткий чекліст для дизайнера
- Додайте кожному стану, який зараз передається лише кольором, другу ознаку: текстуру, позначку або підпис.
- Продублюйте цю ознаку скрізь, де з'являється стан: на карті, у легенді, у таблиці.
- У контрастному режимі не використовуйте власні кольори, працюйте винятково із системними.
- Збільшуйте дрібні цілі та робіть фокус помітним саме в цьому режимі.
- Не покладайтеся на прозорі рамки та заливку активних пунктів.
- Перевіряйте результат в емуляції DevTools, а потім — на справжній Windows.
Переглянути самостійно
Конфігуратор із живим переглядом: regimemap.com/data-api (сторінка англійською, а сама карта та її код — українською). Демо на Hugging Face завантажує живу версію: відкрийте її, увімкніть емуляцію forced-colors у DevTools і протестуйте. Технічні подробиці англійською є в нашому пості на dev.to: A map that doesn't need colour.
Найстарші коментарі (0)