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 для контейнера.
Лиана Арифметова
Создатель

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

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

⚖️

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

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

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

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

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

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

🔄

Калькулятор времени в пути и ETA (прибытия)

Расчет времени поездки по расстоянию и скорости. Определение времени прибытия (ETA).

🏥

Калькулятор клинической психологии: BDI, STAI, MBI, GAD-7 и PHQ-9

Клинико-психологические шкалы онлайн: депрессия Бека (BDI-II), тревожность Спилбергера (STAI), выгорание Маслач (MBI), стресс PSS-10.

💻

Калькулятор технического долга: объём, SQALE, рефакторинг

Комплексный калькулятор технического долга: оценка объёма в часах и рублях, расчёт процентной ставки (стоимость бездействия), матрица приоритизации (impact vs effort), метрики качества кода (цикломатическая сложность, дупликация, покрытие тестами), план рефакторинга по спринтам, SQALE рейтинг A-E.

⚙️

Калькулятор логистики

Расчёты логистики: стоимость доставки, палетизация, маршруты, таможня, склад, last mile

⚗️

Калькулятор скорости химической реакции

Уравнение Аррениуса k=A·e^(-Ea/RT), закон действия масс, период полупревращения и энергия активации.

🏠

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

Оценка стоимости антикварных вещей с учетом возраста, износа, реставрации и индекса цен. Расчет амортизации.

⚙️

Калькулятор управления запасами

Расчёты запасов: оборачиваемость, страховой запас, XYZ-анализ, мёртвый запас, прогноз спроса

💻

Парсер регулярных выражений (Regex Tester)

Онлайн тестер регулярных выражений JS. Проверка Regex паттернов, подсветка синтаксиса, группы захвата и шпаргалка.

💰

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

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

⚗️

Калькулятор молекулярной массы

Молекулярная масса любого соединения. Формула (H2O, NaCl, C6H12O6) → масса и массовые доли элементов.

⚙️

Калькулятор робототехники

Расчёты робототехники: кинематика, приводы, траектории, захваты, энергопотребление, экономика

🧮

Калькулятор инвестиционных стратегий

Бэктест стратегий и оптимизация портфеля по Марковицу. Риск, доходность и Sharpe Ratio.

🏥

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

Фитотерапевтические расчёты: справочник растений, расчёт настоя и настойки, совместимость трав, календарь сбора, дозировка фитопрепаратов.

🧮

Калькулятор погашения долгов

Стратегии снежного кома и лавины. Экономия на процентах и срок полного погашения кредитов.

💻

CI/CD калькулятор: пайплайн, кэш, тесты, раннеры, деплой

Комплексный CI/CD калькулятор: оптимизация пайплайна (критический путь, параллелизация), кэш сборки (hit ratio, ROI), анализ тестов (flaky, шардирование), артефакты (Docker, npm), раннеры (автоскейлинг) и стратегии деплоя (Blue-Green, Canary, Rolling).