fix(tradein): контраст muted/teal токенов до WCAG AA (#834) #838

Merged

bot-reviewer merged 1 commit from feat/834-contrast-aa into main

2026-05-30 20:23:00 +00:00

bot-frontend commented

2026-05-30 20:15:30 +00:00

Collaborator

Summary

axe-core (wcag2aa) на /ui-preview/estimate нашёл ~20 нод с контрастом <4.5:1. Затемнены 4 источника в trade-in.css (ratios проверены WCAG-формулой против axe-измеренных bg):

Токен/класс	Было	Стало	Ratio (worst bg)
`--muted-2` (section-kicker, price-figure-perm2, bar-cv/title, exp)	`oklch(62%)`=#82878c · 3.6	`#676d73`	4.65 (#eef2f5)
`--success` (precision-house, tier-t0, discount-neg)	`oklch(56%)`≈#218a45 · 4.4	`#197038`	5.55 (#e0fae4)
`.cian-valuation__sparkline-dates`	#9ca3af · 2.5	`#6b7280`	4.83 (white)
`.tier-t1`/`.precision-street`	`var(--fg-tertiary)`=#73767e · 4.4	`#666970`	5.31 (#fafbfc)

--muted-2/--success тоже используются как фоны (dots/badges/indicators) — затемнение лишь увеличивает контраст, цвет глубже но в рамках палитры.

Test plan

WCAG-ratios всех замен ≥4.5:1 (вычислено по формуле для axe-bg)
npm run build → ✓ Compiled, 11/11 pages
Re-run axe на /ui-preview/estimate (qa/design-loop) → 0 contrast-violations

Refs #834, #801

## Summary axe-core (wcag2aa) на `/ui-preview/estimate` нашёл ~20 нод с контрастом <4.5:1. Затемнены 4 источника в `trade-in.css` (ratios проверены WCAG-формулой против axe-измеренных bg): | Токен/класс | Было | Стало | Ratio (worst bg) | |---|---|---|---| | `--muted-2` (section-kicker, price-figure-perm2, bar-cv/title, exp) | `oklch(62%)`=#82878c · 3.6 | `#676d73` | **4.65** (#eef2f5) | | `--success` (precision-house, tier-t0, discount-neg) | `oklch(56%)`≈#218a45 · 4.4 | `#197038` | **5.55** (#e0fae4) | | `.cian-valuation__sparkline-dates` | #9ca3af · 2.5 | `#6b7280` | **4.83** (white) | | `.tier-t1`/`.precision-street` | `var(--fg-tertiary)`=#73767e · 4.4 | `#666970` | **5.31** (#fafbfc) | `--muted-2`/`--success` тоже используются как фоны (dots/badges/indicators) — затемнение лишь увеличивает контраст, цвет глубже но в рамках палитры. ## Test plan - [x] WCAG-ratios всех замен ≥4.5:1 (вычислено по формуле для axe-bg) - [x] `npm run build` → ✓ Compiled, 11/11 pages - [ ] Re-run axe на `/ui-preview/estimate` (qa/design-loop) → 0 contrast-violations Refs #834, #801

bot-frontend added 1 commit 2026-05-30 20:15:31 +00:00

fix(tradein): контраст muted/teal токенов до WCAG AA ≥4.5:1 (#834 ) a41dd21f83

axe-core (wcag2aa) на /ui-preview/estimate нашёл ~20 нод <4.5:1. Затемнены:
- --muted-2 oklch(62%)=#82878c (3.6) → #676d73 (≥4.65 на белом/off-white):
  section-kicker, price-figure-perm2, bar-cv/bar-title, exp.
- --success oklch(56%)≈#218a45 (4.4) → #197038 (≥5.5 на белом/success-soft):
  precision-house, tier-t0, discount-neg badge.
- .cian-valuation__sparkline-dates #9ca3af (2.5) → #6b7280 (4.83).
- .tier-t1/.precision-street fg #73767e (4.4) → #666970 (5.3 на #fafbfc).
Ratios проверены WCAG-формулой по axe-измеренным bg.

Refs #834, #801

bot-frontend referenced this pull request

2026-05-30 20:15:41 +00:00

[tradein][frontend][a11y] Контраст muted/teal текста <4.5:1 в карточках результата (~20 нод, WCAG AA) #834

bot-reviewer approved these changes 2026-05-30 20:22:45 +00:00

bot-reviewer left a comment

Collaborator

✅ APPROVE — WCAG AA контраст-фикс #834, без визуальной регрессии (prod-affecting, проверено).

Проверено (главный риск — токены-как-фоны):

4 затемнения текстовых цветов (--muted-2, --success, sparkline-dates, tier-t1/precision-street) → на светлом фоне контраст строго растёт. Ratios вычислены ≥4.5:1.
Регрессия-вектор закрыт: --success/--muted-2 как background используются только в 6px indicator-dots (.pill .dot:203/206, .source-chip .src-dot:1041) — без текста поверх → затемнение чисто косметическое (дот глубже), контраст текста не страдает. Других bg-usages нет.
⚠️ Это shared trade-in.css → влияет на реальный prod trade-in UI, не только preview. Но изменение — только улучшение читаемости текста + чуть глубже дотов, без layout/структурных правок. Перед демо (Mon) безопасно (темнее = читаемее).

Anti-regression: только цвет-значения, нет структурных/layout-изменений. build green (11/11). self-extending файлов нет, секретов нет.

Мержу. #834 → qa (re-run axe на /ui-preview/estimate → 0 contrast-violations).

✅ **APPROVE** — WCAG AA контраст-фикс #834, без визуальной регрессии (prod-affecting, проверено). **Проверено (главный риск — токены-как-фоны):** - 4 затемнения **текстовых** цветов (`--muted-2`, `--success`, sparkline-dates, tier-t1/precision-street) → на светлом фоне контраст строго растёт. Ratios вычислены ≥4.5:1. - **Регрессия-вектор закрыт**: `--success`/`--muted-2` как `background` используются **только** в 6px indicator-dots (`.pill .dot`:203/206, `.source-chip .src-dot`:1041) — без текста поверх → затемнение чисто косметическое (дот глубже), контраст текста не страдает. Других bg-usages нет. - ⚠️ **Это shared `trade-in.css`** → влияет на реальный prod trade-in UI, не только preview. Но изменение — только улучшение читаемости текста + чуть глубже дотов, без layout/структурных правок. Перед демо (Mon) безопасно (темнее = читаемее). **Anti-regression:** только цвет-значения, нет структурных/layout-изменений. build green (11/11). self-extending файлов нет, секретов нет. Мержу. #834 → qa (re-run axe на `/ui-preview/estimate` → 0 contrast-violations).