Калькулятор контрастности

Цветовой контраст описывает разницу относительной яркости переднего плана и фона. Достаточный контраст помогает читать и использовать цифровые интерфейсы людям со слабым зрением, особенностями цветовосприятия, возрастными изменениями зрения, а также при бликах или низком качестве экрана. Калькулятор переводит два цвета HEX или RGB в значения относительной яркости, определённые Руководством по обеспечению доступности веб-контента, и показывает отношение от 1:1 при одинаковой яркости до 21:1 для чёрного на белом. Расчёт не сводится к сравнению исходных значений красного, зелёного и синего каналов. Каждый канал sRGB нормализуется и линеаризуется с учётом гаммы экрана. Линейные значения красного, зелёного и синего получают веса 0.2126, 0.7152 и 0.0722, поскольку человеческое зрение наиболее чувствительно к зелёному свету. Итоговый коэффициент равен яркости светлого цвета плюс 0.05, делённой на яркость тёмного цвета плюс 0.05. Стандартный метод даёт одинаковый результат независимо от порядка ввода. Критерий успешности 1.4.3 WCAG 2.x требует на уровне AA не менее 4.5:1 для обычного текста и 3:1 для крупного. На уровне AAA пороги повышаются до 7:1 и 4.5:1. Крупным обычно считается текст от 18 пунктов обычного начертания или 14 пунктов полужирного, что при типичных настройках браузера примерно равно 24 пикселям CSS и 18.66 пикселя CSS. Для компонентов интерфейса и значимых графических объектов действуют отдельные требования, обычно 3:1 относительно соседних цветов. Соответствие коэффициенту важно, но не гарантирует доступность дизайна. Тонкие и необычные шрифты, градиенты, изображения, состояния наведения, прозрачность, сглаживание и меняющийся фон могут влиять на фактическую читаемость. Текст-подсказку в полях и отключённые элементы тоже следует осознанно проверять, даже если конкретный критерий рассматривает их иначе. Не передавайте состояние только цветом: добавляйте подписи, значки, узоры и другие сигналы. Проверяйте индикаторы фокуса и все интерактивные состояния, а не только исходный снимок экрана. Введите шестизначный или трёхзначный HEX либо стандартную запись RGB с запятыми. Калькулятор проверяет каналы в диапазоне от нуля до 255 и оценивает точно введённые цвета. Если результат немного ниже порога, затемните передний план или осветлите фон и повторите расчёт. Автоматическую проверку следует дополнить тестами клавиатуры, масштабирования и перекомпоновки, проверкой со скринридером и отзывами людей с инвалидностью. Используйте инструмент при проектировании и разработке, чтобы рано выявить базовые ошибки цвета, затем проверяйте готовый интерфейс в реальных условиях.