Что нужно знать
- Используйте диаграмму в этой статье, чтобы определить лучшие сочетания цветов фона и переднего плана для дизайна веб-страницы.
- Используйте онлайн-инструмент, например CheckMyColors.com чтобы протестировать цвета вашего сайта и составить отчет о контрастности между элементами на странице.
- Используйте такой инструмент, как ContrastChecker.com чтобы проверить свой выбор на Рекомендации по доступности веб-контента.
В этой статье объясняется, как эффективно создать контраст между цветами фона и переднего плана в веб-дизайне.
Как создать сильный контраст
Некоторые цвета могут быть яркими и ярко проявляться на определенном цвете фона, например, синий на черном, но это плохой выбор контраста. Если бы вы, например, создали страницу, состоящую из синего текста на черном фоне, ваши читатели очень быстро испытали бы утомление глаз.
Изучите приведенную ниже таблицу, чтобы получить представление о лучших комбинациях фона и переднего плана.
Существуют правила и лучшие практики для контраста, но как дизайнер вы всегда должны оценивать эти правила, чтобы убедиться, что они работают в вашем конкретном случае.
Используйте инструменты онлайн-проверки контрастности
Помимо собственного дизайнерского чутья, попробуйте некоторые онлайн-инструменты, чтобы проверить выбор цвета вашего сайта. CheckMyColors.com проверит все цвета вашего сайта и сообщит о контрасте между элементами на странице.
Кроме того, думая о выборе цвета, вы также должны учитывать доступность веб-сайта и людей, страдающих дальтонизмом. WebAIM.org может помочь с этим, как может ContrastChecker.com, который будет проверять ваш выбор на Рекомендации по доступности веб-контента.
Почему важен контраст?
Сильный контраст играет важную роль в успехе дизайна любого веб-сайта. Адекватная контрастность обеспечивает качественный пользовательский интерфейс и более легкую читаемость, что будет способствовать долгосрочному успеху сайта. Однако веб-сайты со слишком низкой контрастностью могут быть трудными для чтения и использования, что отрицательно скажется на эффективности любого сайта.
Хотя может быть легко определить, какие цвета не сочетаются друг с другом, это более сложный вопрос. чтобы решить, какие цвета эффективно сочетаются, как в отличие от других, так и в дизайне Веб-сайт.
Стандарты брендинга и выбор контрастных цветов
Контрастность - это лишь один из факторов, который следует учитывать при выборе цветов для дизайна своего веб-сайта. При выборе цветов вам, вероятно, также придется учитывать стандарты бренда для клиента, будь то компания, другая организация или даже частное лицо. Хотя цветовые палитры могут соответствовать руководящим принципам бренда организации, они могут не подходить для онлайн-презентации.
Например, желтый и ярко-зеленый очень сложно эффективно использовать на веб-сайтах. Если эти цвета входят в руководящие принципы бренда компании, их, вероятно, нужно будет использовать только в качестве акцентных цветов, поскольку трудно найти цвета, которые бы хорошо контрастировали ни с одним из них.
Точно так же, если цвета вашего бренда черный и белый, это означает отличный контраст, но если у вас есть сайт с большим количеством текста, черный фон с белым текстом сделает чтение очень утомительным, несмотря на присущую ему силу контраста между черным и белый. В этом случае рекомендуется инвертировать цвета, используя черный текст на белом фоне. Это может быть не так интересно визуально, но это гораздо лучший выбор для контраста и удобочитаемости.