Урок 06. Частые ошибки
⚡ Кратко
Низкий контраст, десяток случайных оттенков, цвет как единственный признак
и opacity вместо прозрачного цвета.
Ошибка 1. Слишком близкие ступени
Как ломается: текст «плавает» на фоне, особенно на плохом мониторе и при ярком свете.
bg-200 + text-400 — плохо
bg-200 + text-800 — хорошо
<div class="space-y-2">
<p class="rounded bg-slate-200 px-3 py-2 text-sm text-slate-400">bg-200 + text-400 — плохо</p>
<p class="rounded bg-slate-200 px-3 py-2 text-sm text-slate-800">bg-200 + text-800 — хорошо</p>
</div>Ошибка 2. Пять разных синих в одном экране
Как ломается: интерфейс выглядит неаккуратно, хотя каждый цвет по отдельности красивый.
Как правильно: заведите три роли — акцент, нейтраль, опасность — и берите оттенки только из них. Всё остальное — оттенки нейтрального. Проверить легко: посчитайте, сколько разных имён оттенков встречается на экране. Больше четырёх — сигнал.
Ошибка 3. Цвет как единственный признак
❌ Только цвет
<span class="text-rose-600">●</span>✅ Цвет плюс текст
<span class="inline-flex items-center gap-1.5 rounded-full bg-rose-100 px-2.5 py-0.5 text-xs font-medium text-rose-800">
<span aria-hidden="true">●</span> Ошибка
</span>Почему: около 8% мужчин хуже различают красный и зелёный, а скринридер не читает цвет вовсе. Подпись решает обе задачи сразу.
Ошибка 4. opacity вместо прозрачного цвета
Как ломается: вместе с фоном бледнеет и текст, и рамка, и иконки — блок выглядит выключенным.
❌ Прозрачным становится всё
<div class="bg-slate-900 opacity-50">Текст тоже побледнел</div>✅ Прозрачен только фон
<div class="bg-slate-900/50">Текст остался контрастным</div>Ошибка 5. Жёсткий цвет вместо токена
Класс bg-[#4f46e5] прекрасно работает — ровно до момента,
когда потребуется тёмная тема или смена брендинга. Значение из макета лучше
сразу оформить токеном в @theme: тогда смена цвета будет правкой
в одном месте, а не поиском по проекту.