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

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

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

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

⚖️

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

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

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

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

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

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

🏠

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

Определите размер шапки, кепки или шляпы по обхвату головы.

🏠

Калькулятор пробега авто

Расчёт стоимости километра пробега автомобиля. Когда выгоднее менять машину.

🏠

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

Определите размер кольца онлайн. Перевод размеров между российской, американской (US), европейской (EU) и британской (UK) системами. Таблица соответствия.

🏥

Калькулятор обратной диеты (Reverse Diet)

Планирование плавного выхода из дефицита калорий. Недельный план увеличения калорий и макронутриентов.

⚙️

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

Расчёты сварки: режимы, расход материалов, предварительный нагрев, прочность шва, деформации

🏥

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

Прогноз времени финиша на марафоне и полумарафоне по результатам коротких дистанций. Формулы Ригеля, Кэмерона, VO2max.

🏗️

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

Расчёт метража кабеля ВВГнг-LS для квартиры по количеству розеток, выключателей и мощных потребителей. Смета, автоматы, гофра.

⚗️

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

Расчёт ЭСКП, расщепление d-орбиталей в октаэдрическом и тетраэдрическом полях, высокоспиновые и низкоспиновые комплексы, магнитный момент.

🏠

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

Точное время восхода, заката, продолжительность дня для любой точки мира. Золотой час для фотографов.

🏠

Калькулятор беременности и менструального цикла (в человеческих годах)

Рассчитайте срок беременности, менструальный цикл и узнайте, сколько лет вашей жизни занимают эти процессы.

🧮

Счётчик символов и слов онлайн

Символы с пробелами и без, слова, предложения, время чтения. Для SEO, соцсетей и копирайтинга.

🏠

Калькулятор парфюмерии: концентрация, рецептура, себестоимость

Калькулятор для парфюмеров. Концентрация аромата, рецептура ноты, себестоимость флакона и расчёт партии.

🏠

Видео калькулятор: FPS и битрейт

Конвертер FPS в МС, расчет битрейта и размера видеофайла. Инструмент для стримеров и монтажеров.

🔄

Универсальный конвертер единиц: длина, вес, объем

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

🏠

Калькулятор маринада

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