
Все вы наверняка знаете, что такое контраст. Белое на черном, красное на зеленом, или желтое на синем — эти сочетания цветов дают яркое представление о цветовом контрасте. И, разумеется, всякому человеку ясно, что чем контрастнее цвета, тем лучше они различаются. Сегодня я расскажу о том, как применять контраст цветов на сайте, чтобы сделать его привлекательнее для посетителей.
Еще в далеком 2008 году консорциум W3C опубликовал руководство по обеспечению доступности веб-контента — WCAG 2.0, в котором предлагал множество рекомендаций, направленных на обеспечение большей доступности сайтов. В частности, там подробно были расписаны рекомендации относительно цветовых контрастов.
Кстати, загляните ради интереса в Музей Веб-дизайна и оцените, насколько яркими и контрастными были сайты в прошлом. Убогими — да, но как отлично все читалось. Это вам не модные нынче пастельные, но абсолютно неразличимые #fbfbfb на белом фоне.

Так вот, согласно рекомендациям W3C, цветовой контраст, то есть, отношение текста к фону на сайте должно быть не менее 3:1. Цифра эта взята не с потолка. Это минимальный уровень, рекомендуемый мировыми стандартами ISO-9241-3 (Ergonomic requirements for office work with visual display terminals (VDTs)) и ANSI-HFES-100-1988 (American National Standard for Human Factors Engineering of Visual Display Terminal Workstations) для стандартного зрения. Грубо говоря, хорошего, 100% здорового зрения.
Однако мало кто сегодня может похвастаться таким хорошим зрением. Особенно те, кто много времени проводит в интернете или работает на компьютере. Поэтому для подавляющего большинства пользователей было рассчитано иное соотношение контраста цветов, а именно 4.5:1.
Читать далее…