«Гарно» — справа смаку; «розбірливо» можна виміряти. Блідий сірий текст чудово виглядає на доброму моніторі й зникає на телефоні серед білого дня — вибір на око рано чи пізно це гарантує.
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.