Проверяйте соотношение контрастности между двумя цветами для обеспечения соответствия WCAG 2.1. Тестируйте уровни AA и AAA для обычного и крупного текста.
Введите или выберите цвет текста/переднего плана с помощью выбора цвета или введя HEX-значение.
Введите или выберите цвет фона. Используйте кнопку замены, чтобы быстро поменять местами передний план и фон.
Проверьте коэффициент контрастности и значки соответствия WCAG. Зелёные — прошли, красные — не прошли. Стремитесь к минимум AA для всего текста.
Используйте раздел предпросмотра, чтобы увидеть, как ваша цветовая комбинация выглядит с текстом разного размера.
WCAG (Web Content Accessibility Guidelines) определяет требования к контрасту, чтобы гарантировать, что контент читается людьми с нарушениями зрения. Уровень AA требует 4,5:1 для обычного текста и 3:1 для крупного текста. Уровень AAA требует 7:1 и 4,5:1 соответственно.
Относительная яркость измеряет воспринимаемую яркость цвета по формуле: L = 0,2126R + 0,7152G + 0,0722B. Коэффициенты отражают чувствительность человеческого глаза, причем зеленый наиболее заметен. Значения линеаризуются из sRGB перед вычислением.
Формула коэффициента контрастности: (L1 + 0,05) / (L2 + 0,05), где L1 — яркость более светлого цвета, а L2 — более темного. Смещение 0,05 предотвращает деление на ноль и учитывает окружающий свет.
Крупный текст определяется как 18pt (24px) обычного веса или 14pt (18,5px) жирный. Крупный текст имеет более низкие требования к контрасту, потому что его увеличенный размер делает его естественно более читаемым, даже с меньшим контрастом.
Примерно у 8% мужчин и 0,5% женщин есть дефицит цветового зрения. Текст с низким контрастом также трудно читать пожилым пользователям, при ярком солнечном свете или на некачественных дисплеях. Хороший контраст приносит пользу всем.
Коэффициент контрастности измеряет разницу в яркости между двумя цветами по шкале от 1:1 (нет контраста) до 21:1 (максимальный контраст). Он определяет, насколько легко текст читается на фоне.
Это обычный текст абзаца. Хорошая контрастность обеспечивает читаемость для всех пользователей, включая людей с нарушениями зрения.
Это мелкий текст, требующий ещё лучшей контрастности для читаемости.
Коэффициент контрастности
Нажмите на пару, чтобы использовать её как цвета переднего плана и фона
Сохранённые настройки — функция для спонсоров.
История инструментов — функция для спонсоров.
Заметки к инструментам — функция для спонсоров.
