При разработке веб-сайтов, приложений, презентаций, документов или любого типа визуального контента выбор правильных цветовых сочетаний имеет решающее значение для читаемости и доступности. Использование цветов, которые не обладают достаточным контрастом, может сделать текст трудным или невозможным для чтения, особенно для людей с нарушениями зрения. Одной из особенно проблемных цветовых комбинаций является синий текст на красном фоне.
Чтобы понять, почему синий на красном — это плохое сочетание цветов текста и фона, нам нужно рассмотреть некоторую базовую теорию цвета и то, как наши глаза воспринимают цветовые контрасты. Основные факторы, определяющие читаемость:
Синий и красный — основные цвета, которые расположены друг напротив друга на цветовом круге. Это означает, что у них очень мало общего визуально. При размещении рядом они создают вибрирующий, мерцающий эффект, который приводит к усталости глаз.
Кроме того, синий и красный имеют довольно схожую яркость. Красный по своей природе более яркий и светлый цвет, чем синий. Поэтому при использовании в качестве фона красный подавляет более темный синий текст, заставляя его растворяться на заднем плане.
Наконец, красный и синий стимулируют разные цветовые рецепторы в наших глазах, что затрудняет одновременную фокусировку на них. Красный цвет распознается L-колбочками на нашей сетчатке, а синий — S-колбочками.
Руководящие принципы доступности веб-контента (WCAG) содержат стандарты для коэффициентов контрастности текста и фона, чтобы гарантировать, что контент будет удобочитаемым для всех пользователей. WCAG требует минимального коэффициента контрастности 4,5:1 для обычного текста и 3:1 для большого текста (более 24 пикселей или 19 пикселей и жирного).
Коэффициент контрастности между синим (#0000FF) и красным (#FF0000) составляет всего 2,5:1. Это не соответствует стандартам как для обычного, так и для большого текста. Вот матрица цветового контраста, показывающая соотношения для распространенных цветовых пар:
| Цвет текста | Цвет фона | Коэффициент контрастности |
|---|---|---|
| Белый (#FFFFFF) | Черный (#000000) | 21:1 |
| Желтый (#FFFF00) | Синий (#0000FF) | 8:1 |
| Зеленый (#00FF00) | Фиолетовый (#800080) | 5.5:1 |
| Синий (#0000FF) | Красный (#FF0000) | 2,5:1 |
Как показано, сочетание синего на красном не соответствует даже минимальному соотношению 3:1 для большого текста. Это делает его плохим выбором для любого основного текста.
При выборе цветов текста и фона полезно посмотреть на другие пары для сравнения. Вот несколько примеров с лучшими коэффициентами контрастности, чем у синего на красном:
почти во всех случаях более темный текст на более светлом фоне более читабелен, чем более светлый текст на более темном фоне. Светлый текст на темном фоне может работать, если коэффициент контрастности достаточно высок, но требует более точного выбора цвета.
Чтобы убедиться, что выбранные вами цвета текста и фона соответствуют стандартам доступности, вы можете использовать онлайн-средства проверки контрастности цвета. Эти инструменты вычисляют коэффициент контрастности на основе введенных вами шестнадцатеричных цветовых кодов. Вот некоторые полезные средства проверки контрастности:
Многие из этих средств проверки также предложат альтернативные цвета с лучшей контрастностью. Это позволяет легко тестировать различные цветовые сочетания.
Хотя в целом это нецелесообразно, есть некоторые случаи, когда синий текст на красном фоне может быть приемлемым:
Однако максимальной читабельностью и инклюзивностью всегда следует преследовать цель. Поэтому по возможности предпочтительнее использовать такие альтернативы, как темно-синий на светло-красном.
Вот несколько рекомендаций по выбору доступных, легко читаемых пар цветов текста и фона:
Выбор правильных цветов может показаться сложным, но небольшие знания теории цвета, рекомендаций по обеспечению доступности и инструментов проверки контраста имеют большое значение. Придерживаясь инклюзивности и читабельности, вы будете делать правильный выбор дизайна.
Синий текст на красном фоне — это сочетание цветов с низкой контрастностью, которое может затруднять чтение, особенно для людей с нарушениями зрения. Одинаковая яркость и отсутствие визуальной совместимости между этими противоположными оттенками на цветовом круге приводит к вибрации, потере фокуса и напряжению глаз.
Стандарты доступности WCAG требуют коэффициента контрастности не менее 3:1 для крупного текста и 4,5:1 для обычного текста. При коэффициенте всего 2,5:1 синий на красном не соответствует этим минимальным требованиям. Хотя есть некоторые исключения, лучше всего избегать синего текста на красном фоне.
Выбор таких цветовых сочетаний, как более темный синий на более светлом красном, темный текст на светлом фоне, и выполнение проверок цветового контраста — все это улучшит доступность. Сохранение читабельности и инклюзивности в качестве главных приоритетов приведет к улучшению дизайна.