Кто придумал верстку? История от типографии до CSS

сен, 6 2025

Короткий ответ: никто один. Верстка не появилась в один день и не у одного автора. Это цепочка находок - от свинцового набора до CSS Grid и контейнерных запросов.

В XV веке печатники собирали полосу на верстачном столе. Металлические литеры, шпации, колонки, отступы - вот ранняя верстка. Задача была та же, что и сегодня: текст должен легко читаться и иметь ясную структуру.

В XX веке оформились правила. Ян Чихольд в 1928 году изложил принципы «Новой типографики»: сетка, иерархия, белое пространство. В 1961‑м Йозеф Мюллер‑Брокманн систематизировал модульные сетки, чтобы макеты собирались предсказуемо.

Цифровая эпоха ускорила процесс. PostScript (Adobe, 1984) дал точный вывод, PageMaker (1985) и QuarkXPress (1987) запустили настольную издательскую революцию. InDesign (1999) стал стандартом для печатной верстки.

Веб стартовал без внешнего вида: HTML описывал структуру. В 1994 Хокон Виум Ли предложил CSS, а вместе с Бёртом Босом довёл стандарты до CSS1 (1996) и CSS2 (1998). Мы прошли эпоху таблиц, флоатов, затем пришли Flexbox (устойчиво с 2016) и CSS Grid (массовая поддержка - 2017). Subgrid и контейнерные запросы стали практичны в 2023-2024 и быстро вошли в повседневность.

Так кто придумал верстку? Если и называть имена, то это ранние печатники, типографы вроде Чихольда и «веб‑типографы» вроде Виума Ли. Но суть - в принципах: сетка, ритм, иерархия, доступность.

Пара быстрых ориентиров: длина строки 45-75 знаков; межстрочный интервал 1.4-1.6; отступы по модульной шкале; шрифты в rem; масштаб заголовков через clamp(). Контраст текста - от 4.5:1 для обычного кегля.

Для русского текста включайте переносы: lang='ru' и hyphens: auto; поддержка стала лучше, но движки ведут себя по‑разному - проверяйте в Chrome, Safari и Firefox. Балансируйте заголовки через text-wrap: balance. Экономьте вес шрифтов: woff2, font-display: swap, поднабор через unicode-range.

Сетки - это не только колонки. В вебе начните с Grid: явные линии, minmax и auto-fit/auto-fill, для вложенности - subgrid. Контейнерные запросы убирают зависимость от ширины окна и настраивают компонент под его контейнер.

Не забывайте про доступность и скорость: семантические заголовки h1-h6, заметные фокусы, prefers-reduced-motion для анимаций, content-visibility и contain-intrinsic-size против скачков макета.

• От свинца к цифре
• Чихольд и швейцарская сетка
• От таблиц к CSS
• Flexbox, Grid и контейнерные запросы
• Практика: типографика и доступность

От свинца к цифре

Начиналось все не с кода, а со свинца. Около 1450-х Иоганн Гутенберг запустил печатный пресс с подвижными литерами. Печатники собирали строки на наборной палочке, переносили их на галеру и фиксировали шпациями и пробельными клинышками. Так родилась печатная верстка: колонки, поля, кегль, межстрочный интервал.

Межстрочный интервал тогда был буквальным: его задавали свинцовыми полосками - отсюда и термин leading. Базовая строка (baseline) делала текст стабильным по горизонтали. Сегодня ту же роль играет line-height и базовый ритм. Если держать кратность отступов и размеров шрифта одной сетке, глаз отдыхает так же, как на бумаге.

Конец XIX века ускорил процесс. В 1886 году Ottmar Mergenthaler поставил первую Linotype в New York Tribune: машина отливала строку текста целиком. Система Monotype (патенты Толберта Лэнстона 1887-1889, коммерческий запуск в 1897) делала отдельные литеры и точнее держала набор. Итог - огромный прирост скорости и падение цены газетного выпуска.

Середина XX века - фотонабор. Морис Муйру и Рене Ийонне представили Lumitype/Photon в 1949 году, а в начале 1950-х машины пошли в типографии. Буквы проецировались светом с матриц на фотобумагу, металла больше не было. Макеты клеили вручную: распечатки, воск, нож, рубилит для масок - та самая «склейка» до компьютеров.

Цифровой перелом пришел в 1980-х. Adobe выпустила PostScript в 1984 году - язык описания страниц дал точный вывод на принтеры и фотонабор. Apple показала LaserWriter (1985), Aldus PageMaker (1985) запустил настольную издательскую революцию. QuarkXPress вышел в 1987, а Adobe InDesign - в 1999 и быстро стал стандартом для журнальной и книжной верстки. PDF появился в 1993 и стабильно сохранял макет на любом устройстве.

Веб добавил свои кирпичики. CSS1 утвердили в 1996 году, что отделило стиль от структуры HTML. OpenType (совместная разработка Microsoft и Adobe, 1996) упаковал шрифтовые функции в один формат. Веб-шрифты получили нормальную жизнь с WOFF (2009) и WOFF2 (2014), а переменные шрифты в OpenType 1.8 (2016) вернули гибкость, которая в печати была всегда: одна гарнитура - много осей.

Что из бумажной практики работает в цифре прямо сейчас:

• Базовый ритм: держите line-height и отступы кратными одной величине (например, 4px или 0.25rem).
• Колонки и поля: ставьте сетку и держите стабильные «коридоры» между колонками, как в журнальной полосе.
• Иерархия: крупные заголовки, читабельный основной текст, заметные подзаголовки. Не экономьте на белом.
• Гарнитуры: берите две-три роли максимум (титульная, текстовая, акцент). Остальное - стилями, а не новыми шрифтами.
• Микротипографика: включайте кернинг и лигатуры, а для чисел в таблицах - табличные цифры.

Быстрый тех-чек-лист в стиле «сделай и забудь»:

1. Настройте базовую сетку: :root { --step: 0.25rem; } и используйте кратные значения для gap/margin/padding.
2. Держите строку 45-75 знаков: в CSS ограничивайте длину через max-width: 60ch для основного текста.
3. Линия по‑русски: укажите lang="ru" в HTML и включите hyphens: auto; проверьте переносы в Chrome, Safari, Firefox.
4. Включите типографику шрифта: font-kerning: normal; font-variant-ligatures: common-ligatures; font-variant-numeric: tabular-nums.
5. Экономьте шрифты: формат woff2, font-display: swap, subset через unicode-range для кириллицы.

Идея простая: инструменты меняются, принципы - нет. Сетка, ритм, иерархия и аккуратная работа со шрифтом пережили свинец, фотонабор и софт. Примените их - и цифра будет так же стабильной, как хорошая журнальная полоса.

Чихольд и швейцарская сетка

Ян Чихольд - человек, который собрал в систему то, что до него существовало как набор приемов. В 1928 году он издал «Die neue Typographie» (Лейпциг), где четко описал принципы: асимметрия вместо центровки, швейцарская точность в сетке, опора на гротески (без засечек), отказ от лишнего декора, единые форматы по DIN, левое выравнивание и читаемая иерархия.

В 1947-1949 Чихольд руководил типографикой Penguin Books в Великобритании. Он ввел «Penguin Composition Rules»: стандартные поля, сетку обложек и блоков, строгие правила кеглей и интерлиньяжа. Серии стали выглядеть цельно, а набор - предсказуемо и быстрее в производстве.

Швейцарская школа оформила подход в международный стиль. В 1958-1965 в Цюрихе выходил журнал Neue Grafik (всего 18 выпусков), который продвигали Йозеф Мюллер‑Брокманн, Эмиль Рудер, Рихард П. Лозе и Карл Герстнер. Универсальные гриды, объективная подача, типографика как система - всё это мигрировало в учебники и практику.

Ключевые инструменты времени - шрифты и сетки. В 1957 Адриан Фрутигер выпустил Univers с нумерацией начертаний (оригинально 21 член семейства), а Макс Мидингер совместно с Эдуардом Хоффманном создали Neue Haas Grotesk (переименован в Helvetica в 1960). В 1961 Мюллер‑Брокманн издал «Raster Systeme für die Visuelle Gestaltung» - книжку, после которой дизайнеры перестали «на глаз» расставлять элементы и начали мыслить колонками, модулями и интервалами.

Что из этого прямо полезно сегодня? Во‑первых, мера строки и ритм. Держите текстовый блок в 60-70ch, ставьте базовую линию через постоянный line-height и стройте вертикальные отступы кратно этому шагу. Во‑вторых, сетка сначала решает задачи контента, а уже потом украшения.

Как воспроизвести «швейцарскую» сетку в вебе без боли:

1. Определите основу: html { font-size: 100%; } на десктопах, line-height: 1.5; базовый блок текста - max-width: 65ch.
2. Выберите модуль: заведите CSS‑переменную --step: 0.25rem и используйте кратность для gaps и отступов.
3. Соберите колонки: display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--step) * 4; для десктопа, меньше колонок для узких контейнеров.
4. Подключите контейнерные запросы: компоненты адаптируются к ширине секции, а не окна. Это ближе к печатной логике модулей.
5. Следите за иерархией: заголовки через clamp() и text-wrap: balance, подзаголовки слабее по контрасту, не по кеглю.
6. Подбирайте гротески осознанно: системные Inter/Arial для скорости или webfonts (WOFF2, font-display: swap) с ограниченным набором начертаний.

И да, то, что Чихольд написал про «минимум форматов и максимум ясности», отлично работает и в CSS. Меньше исключений в коде - чище сетка, стабильнее ритм. Результат - аккуратная верстка, которую легко поддерживать.

От таблиц к CSS

В 1990‑е у веба не было нормального инструмента для макета страницы. Поэтому делали табличную верстка: nested-таблицы, spacer.gif по 1×1 пикселю, атрибуты вроде cellpadding, cellspacing и valign. Это было стабильно в тогдашних браузерах и давало контроль над колонками и выравниванием.

Таблицы официально закрепили в HTML 3.2 (14 января 1997), и ими начали собирать layout, хотя изначально они для данных. CSS уже существовал (CSS1 - 17 декабря 1996; CSS2 - 12 мая 1998), но внедрялся медленно: браузеры реализовывали спецификации кусочно, по‑разному. Отсюда - «войны браузеров», хаки, лишняя обертка. В ходу были флоаты, позиционирование, а для кроссбраузерности - условные комментарии под IE.

Главные минусы табличных макетов: плохая доступность (скринридеры читают ячейки в порядке DOM, а не визуально), тяжелая разметка и нулевая адаптивность. Переход к CSS разрулил это: семантический HTML, блоки для структуры, стили для внешнего вида. Ключевой рубеж - «doctype switching»: правильный DOCTYPE включает стандартный режим, где браузер соблюдает бокс‑модель; без него вы выпадали в quirks и ловили баг с шириной в стиле IE5.

Как безопасно мигрировать с таблиц на CSS в живом проекте:

1. Поставьте правильный DOCTYPE (HTML5: ) и убедитесь, что страница в standards mode.
2. Выявите «ложные» таблицы (те, что для макета). Настоящие таблицы с данными оставьте.
3. Замените ложные <table> на семантический HTML: header, nav, main, aside, section, article, footer.
4. Повторите прежнюю сетку через CSS Grid: опишите колонки/ряды, задайте gap вместо cellspacing.
5. Для одномерных рядов и центровки по оси используйте Flexbox (align-items, justify-content, gap).
6. Перенесите визуальные атрибуты (bgcolor, width, valign) в CSS. Уберите spacer.gif.
7. Сделайте адаптивность: контейнерные или медиазапросы, fluid‑ширины, minmax(), clamp() для типографики.
8. Проверьте доступность: порядок фокуса в DOM, aria‑landmarks, контраст. Не полагайтесь на «визуальный» порядок.

Чем заменить типичные «табличные» приемы:

• Две/три колонки одинаковой высоты - Flexbox с align-stretch или Grid; фон тянется без хака «равной высоты».
• Вертикальное выравнивание по центру - display:flex + align-items:center (или grid + place-items:center).
• Сложные dashboard‑сетki - Grid с именованными линиями, minmax() и auto-fit/auto-fill.
• Равномерные отступы между «ячейками» - gap вместо пустых колонок/ячеек.
• Нужна табличная геометрия, но это не данные - display: grid выглядит как таблица, но остается семантичным.

Когда таблицы все еще уместны:

• Настоящие табличные данные (с заголовками колонок, сортировкой, summary). Тут используйте <table>, thead, tbody, scope, captions.
• HTML‑письма. Клиенты вроде Outlook рендерят движком Word, поэтому там по‑прежнему «layout‑на‑таблицах» - норма.
• Редкие ретро‑окружения. Если вынуждены, делайте прогрессивное улучшение: простой столбец по умолчанию, сетка - при поддержке CSS.

Пара практических подсказок, чтобы не словить регрессии:

• Включите box-sizing:border-box на всем проекте - предсказуемые размеры блоков.
• Для реальных таблиц используйте table-layout: fixed; и width, чтобы ускорить отрисовку на длинных листингах.
• Автопрефиксер и современный postcss‑pipeline снимут рутину со старых свойств.
• Тестируйте порядок чтения: VoiceOver/NVDA должны читать контент в логике DOM, не вашего визуального layout.
• Миграцию делайте по модулям. Начните с шапки/футера, затем - боковые панели, затем контент.

Итог прост: таблицы оставьте данным и e‑mailам. Для макетов используйте Grid/Flex, gap, современные единицы (rem, fr), контейнерные запросы и стандартный режим. Так код легче поддерживать, грузится быстрее и работает одинаково в актуальных браузерах.

Flexbox, Grid и контейнерные запросы

Три кита современной вёрстки - Flexbox, Grid и контейнерные запросы. Без них быстрая, адаптивная и поддерживаемая верстка просто не получается.

Факты по датам: Flexbox стал рекомендацией W3C в 2017, но стабильная поддержка в браузерах сложилась к 2016-2017. CSS Grid массово включили в марте 2017 (Chrome 57, Firefox 52, Safari 10.1). Контейнерные запросы (size queries) стали практичны в 2022-2023 (Chrome 105, Safari 16, Firefox 110).

Когда что выбирать? Коротко: Flex - для одномерных рядов/колонок с распределением свободного места. Grid - для двухмерных сеток с явными линиями и областями. Контейнерные запросы - чтобы компоненты адаптировались не к ширине окна, а к размеру своего контейнера.

• Флексы: навигация, панели, карточки в одну строку, sticky‑footer.
• Гриды: сложные ленты, дашборды, лендинги с повторяющимися модулями.
• Контейнерные запросы: карточки, виджеты, сайдбары, компоненты в дизайн‑системах.

Flexbox - ключевые приёмы.

• flex-basis важнее width. Если заданы оба, браузер берёт flex-basis (если не auto).
• Один элемент «отпихнуть» вправо - margin-left: auto (или margin-inline-start: auto в логических свойствах).
• Выравнивание: align-items - по поперечной оси для элементов; align-content работает только когда есть «второй ряд» (wrap).
• gap в flex-контейнерах поддерживается во всех современных браузерах; забудьте про костыли с отрицательными маргинами.

.toolbar{display:flex;gap:.5rem;align-items:center}.toolbar__spacer{margin-left:auto}

Grid - быстрый старт.

• Автосетка: repeat(auto-fit, minmax(16rem, 1fr)) - карточки сами перетекают в нужное число колонок.
• fr-единицы распределяют свободное место предсказуемо, не путайте их с %.
• grid-template-areas - читаемая схема макета прямо в CSS.
• subgrid - наследует линии родителя, чтобы заголовки и текст совпадали по колонкам на всех уровнях.

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1rem}.card-list{display:grid;grid-template-columns:subgrid}

Контейнерные запросы - как включить.

1. Пометьте контейнер: container-type: inline-size (или size) и, при желании, container-name.
2. Пишите правила @container вместо @media. Компонент реагирует на ширину своего блока, а не окна.

.card{container-type:inline-size;container-name:card}@container card (min-width:42rem){.card{display:grid;grid-template-columns:2fr 3fr;gap:1rem}}

Частые ошибки и как их избежать:

• «Почему flex не ужимается?» У многих элементов min-width по умолчанию - auto. Добавьте min-width: 0 (или overflow:hidden) у дочерних блоков, чтобы текст позволялся сжимать.
• «Грид не выравнивает по базовой линии.» Для текста используйте align-items: start и продумайте высоту строки; baseline в grid поддерживается, но работает не везде идеально для сложных комбинаций.
• «Контейнерные запросы не срабатывают.» Проверьте: задан ли container-type на нужном родителе; вложенные контейнеры создают свою контекстную область.

Практичные шаблоны.

/* Респонсивная лента карточек */.cards{display:grid;gap:clamp(.75rem,2vw,1rem);grid-template-columns:repeat(auto-fill,minmax(18rem,1fr))}

/* Центрирование блока по обеим осям */.center{display:grid;place-items:center}

/* Sticky‑footer на флексах */.page{min-height:100dvh;display:flex;flex-direction:column}.page__main{flex:1 1 auto}

Доступность и источник правды:

• Порядок в DOM влияет на клавиатурную навигацию и скринридеры. Свойство order меняет только визуал, не источник.
• Используйте логические свойства (margin-inline, padding-block) - они дружат с RTL и вертикальными письмами.
• Указывайте явные области для фокуса; gap помогает не полагаться на случайные отступы.

Инструменты для отладки: включайте Grid/Flex overlays в DevTools (Chrome, Firefox), смотрите линии, имена областей и размеры треков. В Firefox удобно подсвечивать subgrid и видеть вычисленные линии.

Нюансы по производительности: современные движки держат сотни грид‑элементов без проблем. Сложность растёт с количеством авто‑расчётов (min-content, max-content, сложные субгриды). Помогают явные размеры треков, minmax вместо auto и content-visibility для карточек ниже фолда.

И напоследок - простой чек‑лист выбора: «одномерная раскладка?» - берите Flex. «Нужны явные линии и области?» - Grid. «Компонент должен адаптироваться к своему контейнеру на любом экране?» - подключайте @container.

Практика: типографика и доступность

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

• Длина строки: 45-75 знаков для основного текста. На мобильных ближе к 45, на десктопе - к 65-75.
• Кегль: не ниже 16 px для основного текста. Лучше в rem, чтобы масштабирование работало предсказуемо.
• Межстрочный интервал: 1.4-1.6 (без единиц, чтобы наследование было корректным).
• Контраст: по WCAG 2.2 - минимум 4.5:1 для обычного текста и 3:1 для крупного (≥18.66 px regular или ≥14 px bold).

html { font-size: 16px; } /* базовый масштаб */
:root {
  --step-0: clamp(1rem, 0.95rem + 0.5vw, 1.125rem); /* базовый */
  --step-1: clamp(1.125rem, 1rem + 1vw, 1.375rem);  /* подзаголовки */
}
body {
  font-size: var(--step-0);
  line-height: 1.5; /* unitless */
}
h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); line-height: 1.2; }

Русская типографика в вебе имеет пару нюансов, о которых часто забывают.

• Переносы: включайте lang="ru" на html и hyphens: auto; на тексте. Современные браузеры подхватывают русские словари.
• Не допускайте одиноких коротких слов в конце строки. Для «в, к, с, у, и» используйте неразрывный пробел: &nbsp;.
• Разделяйте тысячи в числах узким неразрывным пробелом U+202F: 100000. Это предотвращает перенос и соответствует русской практике.
• Тире: в русском - длинное «-». В парах типа «- Автор» ставьте неразрывный пробел перед тире, чтобы не отрывалось от имени.
• Кавычки: «ёлочки» для основного уровня, „лапки“ для вложенных.

<html lang="ru">
.article { hyphens: auto; }

Балансируйте заголовки, чтобы они не выглядели «рваными». Свойство text-wrap: balance уже поддерживается в актуальных Chrome, Safari и Firefox.

h2, h3 { text-wrap: balance; }

Шрифты: как выбрать и загрузить так, чтобы и красиво, и быстро.

• Покрытие кириллицы: смотрите наличие кириллического набора (Cyrillic/Cyrillic Extended). Без него браузер подставит другой шрифт и собьётся ритм.
• Variable fonts уменьшают число файлов. Включайте оси wght (толщина), а если есть - opsz (оптический размер) и включайте font-optical-sizing: auto.
• Загружайте woff2, включайте font-display: swap, чтобы текст был виден сразу.
• Стабилизируйте метрики: используйте size-adjust и метрики в @font-face, чтобы снизить сдвиги при подмене.
• Запрещайте «фальшивые» наклоны и капители: font-synthesis: none; - если шрифт не имеет начертания, лучше подобрать замену.

@font-face {
  font-family: 'InterVar';
  src: url('/fonts/Inter.var.woff2') format('woff2');
  font-display: swap;
  unicode-range: U+0000-00FF, U+0400-04FF; /* латиница + кириллица */
  size-adjust: 100%;
}
body { font-family: 'InterVar', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-optical-sizing: auto; font-synthesis: none; }

Числа и таблицы. По умолчанию цифры часто пропорциональные, из-за этого колонки «гуляют». Включайте табличные цифры.

.price, .table { font-variant-numeric: tabular-nums lining-nums; }

Вертикальный ритм помогает держать макет читабельным. Привяжите отступы к модульной шкале и используйте логические свойства, чтобы не зависеть от письма слева-направо.

:root { --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; }
p + p { margin-block-start: var(--space-2); }
section { padding-block: var(--space-3); }

Теперь про доступность по стандарту WCAG 2.2 (опубликован 2023). Вот короткий чеклист с практикой.

• Заголовки: один h1 на страницу - это удобно для навигации. Дальше h2, h3 по порядку, без «скачков» уровней.
• Лэндмарки: header, nav, main, footer, aside. Это ускоряет навигацию с клавиатуры и скринридерами.
• Ссылки: текст должен быть понятен вне контекста («Скачать отчёт PDF» вместо «Скачать»). Подчеркивание не убирайте, цветом одним не ограничивайтесь.
• Фокус: используйте :focus-visible и делайте заметный стиль. Не прячьте фокус под фиксированными шапками.
• Target size (WCAG 2.2, 2.5.8): интерактивные элементы не меньше 24×24 CSS px, если нет других условий.
• Focus Not Obscured (WCAG 2.2, 2.4.11): якоря и фокус не должны заслоняться. Помогает scroll-margin-top для заголовков под фиксированной шапкой.
• Motion: уважайте prefers-reduced-motion - отключайте параллакс и большие анимации.

:root { --focus: 3px solid #0066ff; }
a, button, input, textarea { outline-offset: 2px; }
:focus { outline: none; }
:focus-visible { outline: var(--focus); border-radius: 4px; }

/* фиксированная шапка 64px */
[id] { scroll-margin-top: 72px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

Формы - главный источник проблем. Делайте простые вещи правильно.

• Связывайте label и input по id/for - это критично для скринридеров и кликов по метке.
• Не используйте placeholder как метку. Placeholder - только подсказка.
• Добавляйте autocomplete (email, name, address-line1…), это ускоряет ввод.
• Показывайте ошибки рядом с полем и связывайте их через aria-describedby.
• Для мобильных клавиатур: inputmode="numeric" или "email" по контексту.
• Валидация: :invalid и :has(:invalid) позволяют выделять ошибочные поля без JS.

<label for="email">Почта</label>
<input id="email" name="email" type="email" autocomplete="email" required aria-describedby="email-hint" />
<div id="email-hint" class="hint">Например: [email protected]</div>

form:has(input:invalid) .submit { opacity: .6; }
input:invalid { border-color: #d93025; }

Изображения и иконки.

• Смысловые изображения - с осмысленным alt. Декоративные - alt="" и aria-hidden="true".
• Подписи: используйте figure и figcaption.
• Чтобы не было сдвигов (CLS), задавайте width/height или aspect-ratio.
• SVG-иконки: добавляйте aria-hidden="true", а если иконка передаёт смысл - давайте ей доступное имя через title или скрытый текст.

<figure>
  <img src="chart.png" alt="Диаграмма роста трафика за Q1-Q3 2025" width="800" height="400" loading="lazy" />
  <figcaption>Трафик вырос на 38% год к году.</figcaption>
</figure>

Тестируйте, а не гадайте. Полезные инструменты:

• Lighthouse и axe DevTools - быстрый аудит доступности прямо в браузере.
• NVDA (Windows) и VoiceOver (macOS/iOS) - проверьте, как читает скринридер.
• Контраст: WebAIM Contrast Checker. Проверяйте реальные цвета поверх фона, а не из стайлгайда.
• Симуляция: в DevTools можно включить «Emulate vision deficiencies» (Chrome) и проверить дальтонизм.

И последнее - не путайте «красиво» с «читабельно». Меряйте результат: время чтения, ошибки в формах, глубину скролла. Если людям легче читать и действовать, типографика и доступность настроены верно.