Skip to content

Контраст AA для текста на полупрозрачных панелях (перенос работы из сессии -14) #43

Description

@axisrow

Контекст

В worktree удалённой сессии axisrow.github.io-14 осталась незакоммиченная работа по контрастности WCAG AA для полупрозрачных панелей на мобильных. Worktree удалён, изменения сохранены в патч:

/Users/axisrow/Projects/axisrow.github.io/.git/wt14-mobile-veil-aa.patch

Патч напрямую не применяется (git apply падает, --3way даёт конфликты) — с тех пор main ушёл вперёд: #38, #40, #42.

Важное расхождение

Патч писался, когда --panel-veil был 55% (light) / 50% (dark) — панели заметно просвечивали, и именно это требовало доводки ink/success.

В текущем main (styles.css:1655,1660) значения другие:

--panel-veil: color-mix(in srgb, var(--veil-solid) 88%, transparent);  /* light */
--panel-veil: color-mix(in srgb, var(--page) 86%, transparent);        /* dark */

При 88/86% фон под текстом гораздо ровнее, поэтому числовые значения из патча нельзя переносить как есть — они подбирались под другой backdrop и могут дать переконтрастный, «грязный» результат.

Что нужно сделать

  1. Изучить патч как описание намерения, а не как готовый diff. Суть: панель-локальные переопределения --ink-soft / --ink-faint / --success для трёх панелей (.hero-copy-plane, .projects-field-copy, .proof-field-copy) в обеих темах, чтобы мелкий текст поверх живого эффекта проходил AA.
  2. Проверить, какие из этих проблем всё ещё актуальны при текущих 88/86%. Структура переопределений уже есть в styles.css:1666–1679 — посмотреть, что там сейчас.
  3. Отдельно проверить --success (styles.css:16#287c59, :47#67c99c): в патче отмечено, что 9px текст в .proof-row small — самый мелкий на странице и глобальный зелёный проваливается до 2.5:1 (light) / 2.7:1 (dark) над светлой полосой эффекта. Проверить, воспроизводится ли это сейчас.
  4. Посчитать фактический контраст над worst-case фоном, который даёт текущий veil, — не над плоской панелью. Править только то, что реально не проходит AA (4.5:1 для обычного текста, 3:1 для крупного).
  5. Не менять сами значения --panel-veil — текущий вид панелей утверждён и правится отдельно.
  6. Проверить обе темы, десктоп и мобильный. Тесты в tests/site-smoke.test.mjs не ломать; при добавлении правок закрепить их проверкой.

Если после анализа окажется, что при 88/86% всё уже проходит AA и правки не нужны — это валидный результат: напиши об этом в PR/комментарии и не вноси косметических изменений ради самого факта.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions