Калькулятор контраста цветов

Обычный текст · от 4,5:1	Подходит
Крупный текст · от 3:1	Подходит

Почему текст бывает трудно читать

Бледные строки на одной карточке трудно различить, тёмные строки на другой читаются отчётливо

Представьте серую надпись на белом листе и ту же надпись на чёрном. Цвет букв не изменился, а читаются они по-разному. Причина в разнице между буквами и тем, что находится прямо под ними. Эту разницу по светлоте называют контрастом. У одинаковых цветов он равен 1:1, у чёрного и белого достигает 21:1. Калькулятор измеряет одну выбранную пару, а не «качество» всей страницы.

Введите HEX-коды цвета текста и фона или выберите цвета в палитрах справа от полей. Подойдут и короткий #369, и полный #336699; решётку можно опустить. В поле «Текст для проверки» напишите свою надпись: она сразу покажется в выбранных цветах. Если у вас цвет записан как RGB или HSL, переведите его в HEX с помощью конвертера цветов.

Чтобы увидеть пограничный случай, поменяйте фон на белый #FFFFFF, а цвет букв на #777777. Надпись выглядит вполне серой, но для обычного мелкого текста ей чуть не хватает контраста. Если заменить только одну цифру и ввести #767676, минимальный порог будет пройден. Небольшое изменение кода может перевести пару через границу, поэтому рядом с образцом нужен расчёт.

Как понять результат

Число вроде 5,45:1 показывает разницу между буквами и фоном. Чем оно больше, тем легче различить границы букв. Две строки под числом показывают, подходит ли сочетание для обычного текста и для крупного заголовка. Если размер надписи вызывает сомнение, ориентируйтесь на строку «Обычный текст»: ей нужен больший контраст. Это проверка одной пары цветов, а не оценка всей страницы.

Что означают AA и AAA

Это обозначения уровней требований WCAG 2.2 к доступности текста. Буквы не обозначают тип шрифта или цвет. На обоих уровнях проверяют те же обычные и крупные надписи; меняется только необходимый контраст.

AA, две буквы A. Основной уровень: обычному тексту нужно от 4,5:1, крупному от 3:1. Именно эти два порога показаны в карточке результата.

AAA, три буквы A. Более строгий уровень: обычному тексту нужно от 7:1, крупному от 4,5:1. Сочетание может пройти AA, но не пройти AAA.

Это не отдельная оценка «красоты» цвета. Если число меньше 3:1, контраста не хватит даже крупным буквам по основному уровню AA.

Крупным по WCAG считается текст от 18 пунктов обычным шрифтом или от 14 пунктов жирным. В CSS это примерно 24 и 18,7 px. Текст размером 16 или 18 px обычно нужно проверять по порогу 4,5:1. Крупный заголовок иногда проходит проверку там, где мелкая подпись с теми же цветами не проходит.

Калькулятор сравнивает порог с точным результатом, а не с числом, округлённым для карточки. Показанные «4,5:1» могут скрывать значение 4,499, которое всё ещё меньше 4,5:1. Поэтому при одинаковой записи числа одна пара может пройти порог, а другая нет. Если сочетание лежит прямо на границе, оставьте запас: тонкий шрифт и сглаживание могут зрительно ослабить буквы.

Откуда у предметов и экранов берётся цвет

Свет состоит из волн разной длины. Когда он падает на предмет, часть волн поглощается, а часть отражается и попадает в глаз. Зелёный лист выглядит зелёным потому, что отражает больше зелёного света и поглощает много красного и синего. В темноте лист не кажется зелёным: без света нечему отражаться. Под лампой с другим составом света тот же предмет может выглядеть иначе. Цвет зависит и от предмета, и от освещения.

Экран работает иначе: он сам даёт свет и составляет изображение из красной, зелёной и синей частей. В полной записи HEX каждая пара знаков отвечает за одну из них. Например, #FF0000 задаёт максимум красного и ноль зелёного с синим, а #FFFF00 объединяет максимум красного и зелёного. На бумаге жёлтый получается не таким способом: краска отражает часть падающего света. Поэтому экранный код удобно проверять на экране, а результат печати нельзя обещать по одному HEX.

У цвета есть несколько разных свойств. Оттенок отвечает на вопрос «красный это или синий?», насыщенность отличает яркий цвет от приглушённого, а светлота помогает сравнить светлое с тёмным. Два оттенка могут быть очень разными и при этом почти одинаковыми по светлоте. Для букв это важнее, чем кажется: цветная строка может бросаться в глаза, но её тонкие штрихи всё равно трудно отделить от фона.

Как глаз различает буквы и фон

Свет попадает на сетчатку в задней части глаза. Её светочувствительные клетки превращают его в электрические сигналы, которые идут к мозгу. Колбочки помогают видеть цвета; палочки особенно важны при слабом освещении. У человека есть три типа колбочек с разной чувствительностью к свету. Глаз не читает число #336699: он получает свет от экрана и различает его на фоне соседних участков.

Когда мы читаем, нужно увидеть границы каждого штриха: где закончилась буква и начался фон. Крупная жирная буква оставляет больше заметных участков, а маленькая тонкая линия легче теряется. Вот почему для большого заголовка допускается меньший числовой контраст, чем для обычного текста. Но размер не исправляет всё: если две поверхности близки по светлоте, цветные края могут оставаться слабыми.

Проверка на удивление проста. Чистый красный #FF0000 и чистый зелёный #00FF00 выглядят совсем разными цветами, но их отношение контраста около 2,91:1. Для обычных букв нужно хотя бы 4,5:1. Ещё резче пример с жёлтым #FFFF00 на белом: отношение всего около 1,07:1. «Яркий цвет» и «читаемый текст» не одно и то же. Кроме того, некоторым людям трудно различать красные и зелёные оттенки, поэтому смысл ошибки или успеха лучше передавать ещё и словами, а не только окраской.

Примеры сочетаний

Чёрный на белом. Цвет #000000 на фоне #FFFFFF даёт 21:1, верхнюю границу шкалы sRGB. Относительная яркость чёрного равна 0, белого равна 1. Обычный и крупный текст проходят AA и AAA. Если вместо чёрного вводить всё более светлые серые оттенки, контраст будет постепенно уменьшаться, пока граница букв не начнёт сливаться с фоном.

Один серый, два разных фона. Текст #808080 на белом даёт около 3,95:1 и не проходит AA для обычного текста. На чёрном фоне тот же #808080 даёт уже около 5,32:1 и проходит. Цвет букв не изменился; изменилось расстояние по светлоте между буквами и подложкой. Этот опыт удобно повторить прямо в форме, меняя только второе поле.

#808080 на белом: 3,95:1. Для обычного текста AA не хватает.

#808080 на чёрном: 5,32:1. Обычный текст проходит AA.

Серый у границы AA. Код #777777 на белом даёт около 4,478:1, а в карточке округляется до 4,48:1. Для обычного текста AA он не подходит, хотя визуально разница с порогом небольшая. Код #767676 на том же фоне даёт около 4,542:1 и уже проходит AA. Эта пара показывает, почему не стоит принимать решение по приблизительной оценке «на глаз» или округлять перед сравнением.

#777777 на белом: 4,48:1. Чуть ниже порога AA.

#767676 на белом: 4,54:1. Чуть выше порога AA.

Красный заголовок. Чистый красный #FF0000 на белом даёт около 3,998:1. Для крупного текста AA порог 3:1 выполнен, для обычного текста с порогом 4,5:1 нет. Такой цвет можно проверить для большого заголовка, но переносить тот же стиль на мелкую подпись без нового решения нельзя.

Синий текст интерфейса. Стартовый #336699 на бледно-жёлтом #FFF4CF даёт около 5,45:1. Обычный текст проходит AA, но не достигает 7:1 для AAA. Если сменить фон на холодный #F2F8FB, отношение станет около 5,60:1: текст всё ещё проходит AA, а запас немного вырастет. Тот же цвет букв нельзя оценивать отдельно от фактической подложки.

Светло-серая подпись. #B0B0B0 на белом даёт около 2,169:1. Этого недостаточно даже для крупного текста по уровню AA. Если подпись важна для заполнения формы, затемните именно буквы и снова проверьте пару: изменение цвета соседней кнопки никак не увеличит контраст этой подписи с белым фоном.

Жёлтая плашка и порядок цветов. Чёрный #000000 на #FFFF00 даёт около 19,556:1. Если поменять роли местами и сделать жёлтый текст на чёрном фоне, число останется тем же: формула берёт более светлую и более тёмную яркости независимо от того, какая из них относится к буквам. Но жёлтый на белом даёт лишь около 1,07:1. Один и тот же жёлтый может быть отличным фоном под чёрными буквами и плохим цветом букв на белом.

Жёлтые буквы на белом: 1,07:1. Строка почти исчезает.

Чёрные буквы на жёлтом: 19,56:1. Границы букв хорошо видны.

Как получается число

HEX-код хранит три канала sRGB: красный, зелёный и синий. Каждая пара знаков задаёт число от 0 до 255. Короткий #369 раскрывается в #336699. Затем калькулятор переводит значения каналов в количество света. Это называется линеаризацией. При расчёте яркости зелёному достаётся вес 0,7152, красному 0,2126, синему 0,0722. Поэтому нельзя просто усреднить три числа: одинаковые прибавки дают разный вклад в итоговую светлоту.

Контраст = (большая яркость + 0,05) / (меньшая яркость + 0,05)

Число 0,05 в формуле нужно, чтобы деление работало и с чёрным цветом, яркость которого равна нулю. Результат симметричен: перестановка текста и фона не меняет отношение. Например, белые буквы на чёрном и чёрные на белом дают одни и те же 21:1, хотя могут ощущаться по-разному. Для сравнения с порогами калькулятор берёт точное число, а округляет только его запись в карточке.

Вес зелёного в формуле можно проверить на чистых цветах. Зелёный #00FF00 на чёрном даёт около 15,30:1, красный #FF0000 около 5,25:1, а синий #0000FF всего около 2,44:1. Все три канала записаны одинаковым максимальным числом FF, но для расчёта светлоты они не равны. Поэтому «поставить яркий синий» не значит автоматически сделать читаемые буквы на тёмном фоне.

Что проверять отдельно

Число для текста не означает, что вся страница соответствует WCAG. Важно проверить каждое состояние: обычный текст, ссылку, подпись поля, ошибку, наведение и фокус. Если под текстом фотография, градиент или полупрозрачный слой, цвет фона меняется от точки к точке. Один HEX-код такой фон не описывает; проверяйте самое слабое место под буквами. Даже при одинаковом коде экран и освещение могут менять впечатление, так что числовой порог полезно проходить с запасом. Подробнее об устройствах рассказывает статья «Почему один HEX выглядит по-разному на экранах».

Для значимых деталей управления и графики в WCAG 2.2 есть отдельный критерий 1.4.11 с порогом 3:1 против соседних цветов. Он относится, например, к необходимому контуру поля или информативной линии диаграммы, но не ко всякому декоративному штриху. Логотипы и неактивные элементы имеют свои исключения. Поэтому калькулятор сознательно не выдаёт одну общую печать «доступно» для всех видов содержимого.

Здесь принимаются только непрозрачные HEX-коды. Запись с альфа-каналом вроде #33669980 нельзя посчитать отдельно от того, что находится под ней. Если исходный дизайн использует прозрачность, сначала определите итоговый видимый цвет на конкретной подложке, затем введите полученную непрозрачную пару. Этот шаг особенно важен для полупрозрачных кнопок и текста поверх изображений.

Частые вопросы о контрасте

Порог зависит от размера текста и роли элемента, а число на границе нужно сравнивать до округления. Эти случаи чаще всего меняют вывод для уже выбранной пары цветов.

Какие HEX-коды можно вводить?

Полные шестизначные (#336699) и короткие трёхзначные (#369). Решётку можно опустить: 369 и #369 обозначают один цвет. Прозрачность и коды с альфа-каналом не поддерживаются.

Почему 4,5:1 иногда не проходит порог 4,5:1?

Карточка округляет число до двух знаков, а проверка использует полное значение. Например, 4,499 отображается как 4,5, но остаётся меньше 4,5. Для надёжного решения оставляйте небольшой запас.

Какая разница между AA и AAA?

Это названия двух уровней требований WCAG, а не два вида текста. AA требует 4,5:1 для обычного текста и 3:1 для крупного; эти пороги показывает калькулятор. AAA строже: 7:1 и 4,5:1 соответственно.

Почему красный и зелёный плохо подходят друг к другу для текста?

Разница оттенков ещё не означает достаточную разницу по светлоте. Чистые #FF0000 и #00FF00 дают около 2,91:1 и не достигают порога AA даже для крупного текста. Некоторым людям также трудно различать красные и зелёные оттенки.

Что WCAG считает крупным текстом?

Текст не меньше 18 pt при обычном начертании или 14 pt жирным. При типовом переводе в CSS это примерно 24 и 18,7 px. Размер и жирность нужно проверять у реального элемента.

Подойдёт ли 3:1 для иконки?

Для значимой иконки или необходимого визуального контура отдельный критерий WCAG 2.2 обычно требует 3:1 относительно соседних цветов. Если цвет декоративный или элемент неактивен, применимость критерия может отличаться.

Почему нельзя вводить прозрачный HEX?

У прозрачного цвета нет одного видимого результата без фона под ним. Код #33669980 смешивается с белой и тёмной подложками по-разному. Сначала определите итоговую непрозрачную пару.

Можно ли проверить текст поверх фотографии?

Один HEX-код не описывает меняющуюся яркость фотографии. Проверяйте наиболее слабое место под текстом или добавьте сплошную подложку, цвет которой затем можно оценить калькулятором.

Учитывает ли калькулятор яркость моего монитора?

Нет. Он считает по введённым кодам sRGB, а не измеряет ваш экран и свет в комнате. Если пара едва проходит порог, оставьте запас и посмотрите на неё на обычном устройстве, где будет читаться текст.

Есть что добавить?

Напишите своё мнение, комментарий или предложение.