Выбор правильной цветовой палитры имеет решающее значение для любого дизайн-проекта. При размещении текста на белом фоне цветовой контраст особенно важен для читаемости и доступности. Но помимо черного текста на белом, какие цвета текста и акцента лучше всего использовать? В этом всеобъемлющем руководстве мы рассмотрим науку и психологию сочетания цветов, проанализируем данные о наиболее читаемых вариантах и дадим конкретные рекомендации по выбору цветов, которые хорошо сочетаются с белым фоном.
Прежде чем углубляться в рекомендации по цвету, важно понять, как контраст влияет на читаемость. Когда цвета текста и фона слишком похожи по яркости и оттенку, текст становится сложнее расшифровать. Низкий контраст особенно проблематичен для людей с нарушениями зрения. Для обеспечения доступности во многих странах требуются минимальные коэффициенты контрастности цвета для текста в соответствии со стандартами доступности WCAG 2.0.
Формула для расчета коэффициентов контрастности следующая:
(L1 + 0,05) / (L2 + 0,05)
Где L1 — относительная яркость более светлого цвета, а L2 — относительная яркость более темного цвета. Минимальное соотношение 4,5:1 рекомендуется WCAG для обычного текста и 7:1 для большого текста (более 18 пунктов или полужирного 14 пунктов).
Более высокие коэффициенты контрастности широко считаются оптимальными для удобства чтения. Чисто черный текст на белом фоне обеспечивает максимальный коэффициент контрастности 21:1. Однако такой высокий контраст может вызвать напряжение глаз при чтении длинных отрывков текста. Использование темно-серого вместо чистого черного позволяет добиться сильного контраста, одновременно уменьшая блики.
Помимо читабельности, выбор цвета также влияет на психологию и эстетику. Определенные цвета по своей сути проецируют определенные настроения и эмоции для зрителей. Понимание этих психологических воздействий может помочь в выборе цветов, которые соответствуют желаемому тону дизайна.
Вот обзор общих психологических ассоциаций распространенных цветов:
Некоторые ключевые соображения при выборе акцентных цветов для сочетания с белым фоном:
Теперь давайте проанализируем некоторые конкретные данные о наиболее читаемых цветах текста для использования на белом фоне. В следующей таблице сравниваются различные цвета текста для удобства чтения по коэффициенту контрастности и относительной яркости:
| Цвет текста | Коэффициент контрастности | Относительная яркость |
|---|---|---|
| Черный | 21:1 | 0,05 |
| Темно-серый | 12:1 | 0,13 |
| Серый | 7:1 | 0,20 |
| Средне-серый | 5:1 | 0,26 |
| Светло-серый | 4:1 | 0,35 |
Основные выводы:
Для основного текста рекомендуется использовать темно-серый или черный оттенок. Заголовки могут использовать более светлый оттенок серого для иерархии, при условии, что он поддерживает коэффициент контрастности не менее 4,5:1.
При выборе акцентных цветов, таких как кнопки и текст призыва к действию, контрастность также имеет решающее значение для удобства использования. Вот несколько вариантов акцентного цвета с достаточным контрастом на белом:
| Акцентный цвет | Коэффициент контрастности | Относительная яркость |
|---|---|---|
| Темно-синий | 8:1 | 0,11 |
| Лесно-зеленый | 12:1 | 0,15 |
| Темно-фиолетовый | 7:1 | 0,16 |
| Темно-красный | 5:1 | 0,17 |
| Темный Оранжевый | 6:1 | 0,19 |
Более светлые оттенки любого акцентного цвета можно использовать для второстепенных кнопок или второстепенных призывов к действию. Просто поддерживайте контрастность не менее 4,5:1 между акцентными цветами и белым фоном.
Используя предоставленные рекомендации и данные, вот несколько примеров доступных цветовых палитр для использования на белом фоне:
Эти комбинации используют достаточно контрастные цвета, которые также соответствуют желаемой эстетике и тону.
В заключение вот несколько полезных инструментов и ресурсов для выбора цветовых палитр и тестирования коэффициентов контрастности:
Правильный выбор цветов с адекватной контрастностью имеет важное значение для доступности и отличного дизайна на белом фоне. Следуйте рекомендациям в этом руководстве, чтобы выбрать цветовые палитры, соответствующие вашему проекту.
Выбор цветов с достаточной контрастностью имеет решающее значение при размещении текста на белом фоне. Более темные оттенки серого или черного лучше всего подходят для основного текста, в то время как заголовки могут использовать более светлые оттенки серого. Акцентные цвета должны поддерживать контрастность не менее 4,5:1 для доступности. Сочетание контрастных цветов с подходящими психологическими ассоциациями создает привлекательные, читаемые дизайны на белом. Понимая теорию цвета и принципы контраста, дизайнеры могут уверенно выбирать палитры, адаптированные к любому проекту.