2learn

Контраст и выравнивание

Что это такое

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

Почему это важно

Две проблемы выглядят похоже, однако они разные: недостаточный контраст — «неактивный» элемент управления, который выглядит активным; подсказка, которая читается как значение; состояние, изменение которого пользователи не замечают. Есть и сползание выравнивания: страница, где каждый блок начинается на несколько пикселей не от того места, что предыдущий, читается как небрежность и делает весь продукт менее надёжным. Контраст несёт ещё и обязательство доступности: текст, который зрячий проверяющий считает «нормальным», может не пройти по коэффициенту контраста для человека, который читает на улице.

Ключевые идеи

Контрасту нужна величина, а не существование

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

Слабо  #666 заголовок, #777 текст, #888 подсказка  -> три серых, одно впечатление
Сильно #111 заголовок, #333 текст, #777 подсказка  -> три уровня, читается сразу

Проверяйте коэффициент контраста текста к фону, а не доверяйте экрану.

Оставьте самый сильный контраст тому, что важно

Если самый контрастный элемент на странице — логотип в шапке, люди увидят именно его, поэтому самый сильный контраст тратьте на главное действие или текущее состояние.

Выравнивайте по общим краям, а не на глаз

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

Числа по правому краю       Числа по центру (избегать)
   1,204.00                       1,204.00
      86.50                          86.50
  12,000.00                      12,000.00

Одно выравнивание на блок

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

Выравнивание делает сетку видимой

Когда всё выровнено по одним и тем же немногим краям, у макета есть ритм, а когда нет — его не спасут никакие отступы; поэтому выравнивание относится к макетированию, а контраст — к цвету и шрифту, и решают их вместе.

Практика

Проверьте контраст одного экрана

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

Готово, когда: у вас есть список несоответствий и вы исправили два самых используемых, проверив их на экране при 100% яркости.

Выровняйте одну страницу

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

Готово, когда: число различных левых краёв упало до трёх или меньше и каждый блок стоит на одном из трёх.

Частые ошибки

  • Контраст только формальный — три серых читаются как один; исправить: увеличивайте величину, пока уровни не станут очевидны с первого взгляда.
  • Самый сильный контраст на украшении — логотип или баннер забирает взгляд у действия; исправить: перенесите самый сильный контраст на главный элемент.
  • Текст по центру — многострочный текст по центру имеет четыре рваных края и читается медленно; исправить: выравнивайте по левому краю всё длиннее одной строки.
  • Числа не по правому краю — цифры не сходятся, и сравнение приходится делать вручную; исправить: выравнивайте числовые колонки по правому краю.
  • Смесь выравниваний внутри блока — взгляд постоянно перестраивается; исправить: одно выравнивание на блок и держите его.

Что читать дальше

Разобранные примеры

Файлы cookie аналитики ставятся только с вашего согласия. До вашего выбора ничего не загружается и никуда не отправляется.