Красный и оранжевый — теплые, яркие цвета, которые отлично смотрятся вместе во многих дизайнерских приложениях. Однако совместное использование этих цветов требует некоторой продуманности, чтобы обеспечить достаточный контраст между ними, чтобы текст и другие элементы оставались разборчивыми. В этой статье мы рассмотрим подходящие цветовые пары с красным и оранжевым, которые обеспечивают достаточный контраст для функционального использования.
Контраст относится к степени визуального различия между двумя цветами. Высокая контрастность заставляет такие элементы, как текст, четко выделяться на своем фоне. Низкая контрастность может привести к тому, что элементы визуально смешиваются друг с другом. Контраст важен в дизайне для разборчивости и доступности.
Необходимый уровень контрастности зависит от предполагаемого использования. Текст, размещенный на фоне, требует большей контрастности, чтобы оставаться читаемым, особенно текст меньшего размера. Визуализации информации, такие как диаграммы и графики, также требуют достаточной контрастности между элементами. Декоративное использование цвета может обойтись меньшими уровнями контрастности.
Стандарты дизайна предоставляют числовые коэффициенты контрастности, к которым следует стремиться в интерфейсах.
Руководство по доступности веб-контента (WCAG) рекомендует:
– Коэффициент контрастности не менее 4,5:1 для обычного основного текста
– Коэффициент контрастности не менее 3:1 для крупных заголовков и элементов
Другие рекомендации по дизайну предлагают:
– Коэффициент контрастности 7:1 или выше для основного текста
– Минимальный контраст 4,5:1 между графическими элементами
Коэффициент контрастности измеряет относительную яркость между двумя цветами. Более высокий коэффициент означает большую контрастность.
Чистый красный — очень контрастный цвет. Он достигает близкого к максимальному контраста как на светлых, так и на темных оттенках.
Красный цвет хорошо подходит для текста и графических элементов на большинстве светлых фонов. С темным фоном лучше смотрятся более светлые оттенки красного.
Некоторые хорошие цветовые сочетания с красным:
| Красный | Белый | Контрастность 21:1 |
| Красный | Светло-желтый | Контрастность 12:1 |
| Розовый | Темно-синий | Контрастность 12:1 |
| Бордовый | Светло-серый | Контрастность 11:1 |
Красный хорошо контрастирует с большинством оттенков зеленого, синего, фиолетового, черного и нейтральных серых. Более темные красные лучше смотрятся на фоне более светлых нейтральных. Более яркие красные выделяются на фоне более темных нейтральных.
Избегайте сочетания чистого красного с очень светлыми оттенками, которые могут сделать его слишком ярким. Также избегайте низкоконтрастных оттенков, таких как красновато-оранжевый, розовый, лиловый и коричневый.
Оранжевый — яркий, теплый цвет, который умеренно контрастирует с большинством других оттенков.
Более насыщенный «конусный» оранжевый обеспечивает более сильный контраст, чем более мягкие «персиковые» оранжевые. Более глубокие оранжевые оттенки приближаются к красному и становятся более контрастными.
Некоторые эффективные сочетания с оранжевым:
| Оранжевый | Средне-синий | Контрастность 7:1 |
| Выжженный оранжевый | Серовато-фиолетовый | Контрастность 6:1 |
| Персиковый | Лесно-зеленый | Контрастность 5:1 |
Оранжевый хорошо контрастирует с большинством оттенков зеленого, фиолетового, синего и нейтральных серых и коричневых цветов. Обычно для достижения достаточного уровня контрастности требуются более темные, холодные цветовые пары.
Избегайте сочетания оранжевого с желтыми, светло-коричневыми, персиковыми, светло-зелеными и теплыми нейтральными цветами. Такие комбинации не дадут достаточного контраста.
Сочетание чистого красного и чистого оранжевого дает довольно низкий контраст, около 3:1. Этого недостаточно для основного текста, но может подойти для более крупных декоративных элементов.
Регулировка оттенков может усилить контраст между красным и оранжевым:
– Более глубокие оттенки красного, такие как бордовый, достигают контраста 5:1 с ярко-оранжевым.
– Более светлые оттенки красного, такие как вишнево-розовый, обеспечивают контраст 5:1 с глубоким выжженным оранжевым.
– Яркий насыщенный красный лучше контрастирует с мягкими персиково-оранжевыми.
– Более глубокие оранжевые рядом с красным и более светлые персиково-оранжевые лучше контрастируют.
Другие способы добавить контраст между красным и оранжевым:
– Используйте более яркие оттенки на более темных оттенках. Яркий красный выделяется на фоне выжженного оранжевого.
– Добавьте между ними более светлый нейтральный цвет, например, белые, серые или желтовато-коричневые контуры. Это разделяет цвета.
– Разделите более темным, холодным цветом, например темно-синим или темно-зеленым.
Красный текст на оранжевом фоне и наоборот не обеспечивает достаточной контрастности для основного текста. Но более крупные текстовые заголовки могут работать с осторожной штриховкой.
Для основного текста на оранжевом сочетайте красные оттенки со светло-бордовым, ржавым или терракотовым. Для текста на красном фоне сочетайте мягкие персиково-оранжевые или более темные оттенки, например выжженный оранжевый.
Увеличьте контрастность текста еще больше, сделав фон немного темнее, а текст светлее. Белый или черный текст обеспечивает максимальную разборчивость как на красном, так и на оранжевом фоне.
Для интерфейсов и контента убедитесь, что красно-оранжевые цветовые сочетания обеспечивают достаточный контраст для читаемости.
Соответствующие WCAG коэффициенты контрастности:
– Не менее 3:1 для жирного текста 14pt+
– Не менее 4,5:1 для обычного текста 18pt+
– Не менее 7:1 для обычного текста 14pt
– Не менее 10:1 для мелкого основного текста
Сочетайте красный со светлыми оттенками, синими, зелеными, пурпурными, серыми. Для оранжевого используйте более темные оттенки синего, пурпурного, зеленого, серого. Избегайте похожих светлых теплых цветов с любым из них.
Также проверьте уровни контрастности с помощью инструментов моделирования дальтонизма. Протанопия (красная слепота) снизит контрастность красных элементов.
Несмотря на низкую внутреннюю контрастность, красный и оранжевый могут создавать визуально яркие цветовые комбинации при разумном выборе оттенка:
– **Графика**: Градиент заката. Круговая диаграмма красного/оранжевого цвета. Яркий значок на приглушенном фоне.
– **Домашний декор**: Красные стены с акцентами выжженного оранжевого и белого цветов. Терракотовые горшки в юго-западном стиле с красными цветами.
– **Мода**: Персиковая блузка с яркой красной юбкой или шарфом. Красные туфли и сумочка, выделяющиеся на фоне кирпично-оранжевого платья.
– **Мероприятия**: Красные скатерти с оранжевыми салфетками и декором для яркого, но скоординированного образа.
– **Брендинг**: Яркий красный логотип на выжженном оранжевом фоне. Оранжевая кнопка со значком на вишнево-красном интерфейсе.
– Используйте более светлые оттенки красного на фоне более темных оранжевых и наоборот для максимального контраста.
– Добавьте белые или черные контуры и разделители, если соседние красные и оранжевые области визуально смешиваются.
– Сделайте красные и оранжевые акценты на более холодном, темном фоне, например, темно-синем или лесном зеленом.
– Проверьте уровни контрастности, чтобы текст оставался разборчивым, особенно для небольших размеров.
– Избегайте чистого красного с чисто оранжевым, если вы не используете его экономно. Вместо этого настройте оттенки для функционального использования.
Красный и оранжевый создают энергичную цветовую пару с тщательным выбором оттенков и акцентов. Для достаточного контраста ориентируйтесь на более светлые красные на фоне более глубоких оранжевых или на более яркие красные на фоне более мягких персиково-оранжевых. Проверьте читаемость текста, избегайте размещения чистого красного и оранжевого рядом на больших полях и делайте акценты более холодными цветами. При продуманном смешивании цветов красный и оранжевый могут выглядеть смело, красиво и доступно.