calcal.ru
Essential UI/UX Kit v2.0

Математика
идеального дизайна

Три фундаментальных инструмента в одном месте: соответствие WCAG, гармоничная типографика и пиксель-перфект сетка.

AA / AAA
WCAG Standards
12-Col
Grid System
1.618
Golden Ratio
100%
Free Tool

Почему важен контраст?

Доступность (Accessibility, или a11y) — это не просто тренд, а необходимость. Согласно стандартам Web Content Accessibility Guidelines (WCAG), текст должен быть достаточно контрастным по отношению к фону, чтобы его могли прочитать люди с нарушениями зрения, цветовой слепотой или просто в условиях плохого освещения.

  • AA (Minimum): Ratio 4.5:1. Стандарт для большинства сайтов.
  • AAA (Enhanced): Ratio 7:1. Для государственных сайтов и максимальной читаемости.
4.5:1
🎨
Garamond
Helvetica
Inter
Roboto

Магия пропорций в шрифтах

Модульная шкала (Modular Scale) — это последовательность чисел, которые соотносятся друг с другом определенным образом. Использование математической шкалы в типографике делает размеры шрифтов не случайными, а взаимосвязанными и гармоничными.

Популярные шкалы пришли из музыки и архитектуры:

  • Major Third (1.250)
    Классика для веба.
  • Perfect Fourth (1.333)
    Для блогов и статей.
  • Golden Ratio (1.618)
    Сильный контраст (лендинги).
  • Minor Second (1.067)
    Мобильные интерфейсы.

Сетка: Скелет Интерфейса

Правильная сетка ускоряет разработку и делает дизайн предсказуемым. Используйте этот калькулятор, чтобы настроить grid-layout в CSS или адаптивном дизайне.

Desktop (12 Cols)

Стандарт де-факто. Делится на 2, 3, 4, 6. Идеально для сложных дашбордов и лендингов.

Tablet (8 Cols)

Оптимально для iPad и планшетов. Позволяет удобно размещать карточки по 2 или 4 в ряд.

Mobile (4 Cols)

Минималистичная сетка для смартфонов. Меньше шума, больше фокуса на контенте.

Часто задаваемые вопросы

Часто задаваемые вопросы

Формула берет значения красного, зеленого и синего каналов (RGB), преобразует их в относительную яркость (luminance), а затем сравнивает яркость фона и текста по логарифмической шкале. Результат — число от 1:1 до 21:1.
Gutter — это пространство между колонками контента. Margin — это внешние отступы от края экрана до контентной области. В адаптивном дизайне margins часто уменьшаются на мобильных устройствах.
Для интерфейсов (UI) лучше всего подходят гротески (sans-serif) с большим x-height и открытыми формами букв (Inter, Roboto, San Francisco). Они остаются читаемыми даже в малом размере.
Уровень AAA желателен, но не всегда обязателен. Для большинства коммерческих проектов стандартом является AA. Однако, если ваша аудитория включает пожилых людей, стремление к AAA будет большим плюсом.
Вы можете использовать CSS Grid Layout (display: grid) или Flexbox. Например: 'display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;'. Полученную ширину колонки можно использовать как max-width для контейнера.
Лиана Арифметова
Создатель

Лиана Арифметова

Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».

Был ли этот калькулятор полезен?

⚖️

Отказ от ответственности

Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.

Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.

Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.

Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.

Похожие инструменты

💻

Калькулятор ROI маркетинговой кампании

Расчёт ROI и ROAS маркетинговой кампании. Сравнение каналов, точка безубыточности, чистая прибыль от рекламы.

🏗️

Калькулятор строительных отходов: объём, вывоз, переработка

Расчёт объёма строительных отходов, стоимости вывоза, классификация по ФККО, потенциал переработки и паспорт отходов.

🧮

Калькулятор площади ожога (правило девяток)

Расчёт площади ожога по правилу Уоллеса и Ланду-Браудеру. TBSA %, формула Паркленда для инфузионной терапии.

🧮

Калькулятор йоги: калории, гибкость, последовательность асан

Калькулятор для йоги. Расход калорий по стилям, оценка гибкости, построение последовательности асан, пранаяма и прогресс практики.

🏥

Калькулятор психофизики: Вебер-Фехнер, Стивенс, d-prime и время реакции

Психофизические расчёты онлайн: закон Вебера-Фехнера, степенной закон Стивенса, теория обнаружения сигнала (d′), закон Хика.

🏗️

Калькулятор зелёного строительства: CO₂, вода, GREEN ZOOM

Расчёт экологических показателей здания. Углеродный след, водоэффективность, баллы GREEN ZOOM / LEED, анализ жизненного цикла, зелёная кровля.

💰

Калькулятор риска портфеля (Sharpe, VaR, Beta)

Рассчитайте риск инвестиционного портфеля: коэффициент Шарпа, VaR, бета, стандартное отклонение. Оценка диверсификации.

🏗️

Калькулятор огнезащиты: толщина, расход, стоимость

Расчёт огнезащиты стальных конструкций: толщина покрытия, расход состава, площадь обработки, приведённая толщина металла.

🏠

Калькулятор разрядов по плаванию

Определение спортивного разряда по плаванию. Нормативы ЕВСК 2022-2025: МС, КМС, I-III разряд, юношеские.

⚗️

Калькулятор стехиометрии: балансировка и выход реакции

Балансировка химических уравнений (онлайн), расчет лимитирующего реагента и выхода реакции (теоретический/процентный).

💰

Калькулятор консалтинговых услуг (ставка, проект)

Рассчитайте часовую ставку консультанта, стоимость проекта, рентабельность и ROI. Сравнение с наймом штатного сотрудника.

🧮

Конвертер размеров колец

Конвертация размеров колец: RU ↔ EU ↔ US ↔ UK ↔ мм. По окружности и диаметру пальца.

🏗️

Калькулятор установки кондиционера

Расчёт стоимости покупки и монтажа кондиционера под ключ. Подбор мощности по площади, цены на оборудование и установку, материалы и доп. работы.

💻

Валидатор штрихкода EAN-13

Проверка контрольной цифры EAN-13 и расшифровка: страна производителя, код предприятия, код товара.

💰

Калькулятор стоимости стартапа (Valuation & Burn Rate)

Рассчитайте Pre-money и Post-money оценку, Burn Rate и Runway. Инструмент для планирования раундов инвестиций.