«Красиво» — дело вкуса; «читаемо» можно измерить. Бледно-серый текст отлично смотрится на хорошем мониторе и исчезает на телефоне при дневном свете — выбор на глаз рано или поздно к этому и приводит.
python3 addons/gohud/tools/check_contrast.py| Что | Требуется |
|---|---|
| Основной текст | 4.5 : 1 |
| Крупный текст (от 24px) | 3 : 1 |
| Акцентные границы и иконки | 3 : 1 |
| Декоративные границы | 2 : 1 — WCAG не применяет к декору своё правило 3:1 |
| Соседние поверхности | 1.12 : 1 — достаточно, чтобы карточка читалась отдельно от фона |
Текст одного тона на подкраске того же тона
Эта ловушка встретилась в этой кодовой базе трижды — нажатые кнопки (акцентная панель, акцентная подпись), кнопки опасных действий и чипы. В палитре это выглядит хорошо и разваливается в тот же миг, когда его измеряют, потому что оба цвета делят один тон и потому не различаются по светлоте.
Поэтому цвета подписей не выбираются вручную. И сборщик тем, и GoSkin подтягивают
светлоту — и только светлоту — пока порог не будет пройден на той панели, на которой текст действительно лежит.
Тон и насыщенность при этом уцелевают, так что палитра сохраняет характер, а её изменение сохраняет контраст.
Цвет, читаемый как текст, и цвет, залитый как площадь, хотят противоположного
В светлой теме предупреждающий цвет вынужден темнеть, чтобы оставаться читаемым как текст (#96500A).
Когда заливка полосы наследует это, полоса опыта становится коричневой. Одним цветом дело не поправить:
жёлтый ярок сам по себе, поэтому он берёт 3:1 вообще без серого жёлоба, а затемнение жёлоба делает
только хуже (1.52 → 1.06).
Поэтому эти две роли разделены. Цвет остаётся сочным — палитра несёт цвета только для заливки, такие как
warning_vivid. Контраст берёт на себя грань — GoSkin рисует обводку в 1dp на любой
заливке, которая не добирает 3:1 к своему жёлобу, так что «насколько она полна» остаётся читаемым.
MY_LIGHT = dict(
warning=hexc("9A5407"), # читается как текст
warning_vivid=hexc("F2A007"), # заливается на полосе
)*_vivid заливка, вышедшая тёмной, заставляет сборщик напечатать
the bar looks drab — add warning_vivid to the palette (по-корейски: «полоса тусклая — добавьте
warning_vivid в палитру»). Место, которое раньше портилось молча, теперь говорит об этом.
Плавающая панель не может знать, что у неё за спиной
HUD рисуется поверх игры — снежного поля или пещеры. Если его панель полупрозрачна, то всё, что позади,
просвечивает и меняет цвет панели, утягивая за собой контраст текста. При 82% непрозрачности приглушённый
текст тёмных тем падал до 3.74:1 на ярком фоне — ниже минимума.
Поэтому полупрозрачные панели измеряют на чисто белом и чисто чёрном фоне; ничего хуже игровая сцена предложить не может. Панель HUD во встроенных темах непрозрачна ровно настолько, чтобы проходить проверку (92%), и при этом сохраняет стеклянный вид.
По той же причине не фиксируются и цвета иконок. Глиф быстрого слота был жёстко задан белым и намерял
1.11:1 в светлой теме — теперь он следует за панелью, на которой лежит, ровно как и подписи.
check_contrast.py читает файлы тем;
цвета, которые скин смешивает во время работы (чипы, слоты), измеряет раздел
skin contrast набора тестов внутри Godot.