CalcAl
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 или Figma.

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

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

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