#gamedev #техарт #unity

Сегодня будет статья про Contrast Ratio и читаемость элементов (чтобы не было белого на черном и серого на сером)

WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

👉 https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

Что это вообще такое?
CR это такой показатель, который позволяет взять цвет фона и цвет текста или иконки, сравнить их и понять достаточный ли контраст? Есть куча калькуляторов Contrast Ratio, которые легко гуглятся:
👉 https://www.siegemedia.com/contrast-ratio
👉 https://webaim.org/resources/contrastchecker/
👉 https://coolors.co/contrast-checker/112a46-acc8e5
👉 https://contrast-ratio.org/

Минимальный контраст при котором нормально читается мелкий текст, крупный текст и иконки определён стандартом. Сильно задирать его вверх тоже не стоит — глаза устанут. Поэтому в IDE например используют тему Solarized, а не белое на черном/черное на белом.

⚠️ Контрастная обводка при этом в большинстве случаев читаемость ухудшает, а люди с дислексией скорее всего не смогут читать текст с обводкой вообще. Не используйте её.

Как это использовать в юнити?
Мы для тестирования написали постпроцессинг шейдер, в котором задаём два цвета фона (пипеткой) и считаем минимальный контраст остальных элементов относительно этих двух цветов. Видео прилагаю, чтоб было понятнее. Скрин рандомный из инета был взят для тестов.
Два порога: всё что с контрастом меньше BGT считается фоном и красится черным. Остальное красится синим если контраст выше требуемого CR и красным если ниже. Очень наглядно.

Помимо этого бывают ещё разные виды контраста, например, хроматический. Но о них как-нибудь отдельно поговорим.