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

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

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

⚖️

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

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

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

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

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

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

⚙️

Калькулятор водоотведения: аэротенк, отстойник, БПК, дождевая канализация

Расчёты водоотведения: аэротенк (БПК, возраст ила), отстойник, БПК/ХПК, дождевая канализация, септик, нормативы сброса (ПДС).

💻

Генератор .gitignore

Создание файла .gitignore для вашего проекта. Выберите язык и фреймворк — получите готовый файл с комментариями.

🏗️

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

Расчёт расхода антисептика, пропитки, масла и воска для дерева по площади. Сенеж, Неомид, Pinotex, Tikkurila. Стоимость в рублях.

🧮

Генератор контент-плана для соцсетей

Создание контент-плана для VK, Telegram, Instagram, YouTube. Идеи постов по рубрикам, типам и частоте публикаций.

💰

Калькулятор оборотного капитала

Рассчитайте чистый оборотный капитал (NWC), коэффициент текущей ликвидности, быстрой ликвидности и другие показатели оборотных средств.

💰

Калькулятор международного налогообложения (СИДН, КИК)

Расчёт налога у источника по СИДН, налогообложение КИК (ст. 25.13 НК РФ), тест налогового резидентства и зачёт иностранного налога.

🧮

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

Расчёт академической и социальной стипендии, именных стипендий (Президента РФ — 22 800 руб.) и бюджета студента по ФЗ №273 и постановлениям Правительства.

🏠

Калькулятор ландшафтного дизайна

Расчёт бюджета ландшафтного дизайна: газон, дорожки, растения, освещение, полив. Стоимость материалов и работ.

💰

Калькулятор компенсации за задержку зарплаты

Расчёт компенсации по ст. 236 ТК РФ: сумма долга, дни задержки, ключевая ставка ЦБ.

⚙️

Калькулятор метрической резьбы

Расчёт параметров метрической резьбы ISO: диаметры, шаг, сверло. M3-M64, крупный и мелкий шаг.

💰

Калькулятор земельного налога

Рассчитайте земельный налог по кадастровой стоимости участка. Ставки 0,3% и 1,5%, вычет 600 м² для льготников, доля и период владения.

⚙️

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

Температура точки росы по температуре и влажности. Абсолютная влажность, риск конденсата на стенах. Для ОВиК.

📐

Калькулятор площади и объёма фигур

Расчет площади, периметра, объёма и поверхности для 2D и 3D фигур. Формулы Герона, эллипсы, торы, инженерные задачи.

🏠

Калькулятор декупажа

Расчёт расхода салфеток, клея и лака для декупажа. Стоимость материалов.

🏗️

Калькулятор межкомнатных дверей

Расчёт комплектации межкомнатных дверей: коробка, наличники, доборы, петли, ручки. Размеры проёма по ГОСТ 6629-88.