Сначала определите объект, который необходимо измерить.
Введите цвет текста и фактический цвет фона, используя трех- или шестибитные HEX-значения. Этот инструмент рассчитывает цвета на основе непрозрачных цветов sRGB; для прозрачных цветов, фоновых изображений и градиентов необходимо сначала определить фактический составной фон в месте расположения текста, и нельзя просто использовать одно из значений цвета в качестве замены.
Результаты проверки контрастности текста в данном цветовом пространстве не указывают на то, что вся страница соответствует требованиям WCAG. Размер шрифта, сами шрифты, интерактивные состояния и другие требования доступности необходимо проверить непосредственно на странице.
Как рассчитать соотношение
Разделите каждый 8-битный цветовой канал на 255, чтобы получить c. Если c ≤ 0,04045, линейное значение равно c ÷ 12,92; в противном случае оно равно ((c + 0,055) ÷ 1,055) в степени 2,4. Относительная яркость L = 0,2126R + 0,7152G + 0,0722B, где R, G и B используют указанные выше линейные значения.
(большее L + 0.05) ÷ (меньшее L + 0.05). Чёрный и белый дают 21:1, одинаковые цвета — 1:1. Перестановка цвета текста и фона сохраняет коэффициент контрастности, но меняет внешний вид.
Не путайте округление с передачей.
Для обычного текста нужно минимум 4.5:1 на уровне AA и 7:1 на уровне AAA. Для крупного текста — 3:1 и 4.5:1 соответственно. Крупный текст имеет размер минимум 18pt или 14pt полужирным начертанием. Не применяйте его пороги к мелкому тексту.
Коэффициент контрастности изображения #777777 на белом фоне составляет приблизительно 4,478:1, что не соответствует требованию 4,5:1 для обычного текста (AA). Даже если интерфейс отображает его как 4,5, это значение нельзя использовать для оценки. На этом сайте отображаются три знака после запятой; при условной оценке используется полное вычисленное значение.
Верните цветовые пары обратно в основной интерфейс.
Предварительный просмотр отображает только цвета полей ввода, используя 16 пикселей для основного текста и 24 пикселя для заголовков. Сначала проверьте фактический цвет текста, фон, размер и толщину шрифта на целевой странице, затем проверьте состояния «обычный», «при наведении курсора» и «в фокусе»; не ограничивайтесь проверкой наиболее подходящего набора цветов в эскизе дизайна.
После постепенного затемнения текста или осветления фона расчет повторяется, а затем проверяется шрифт и удобство чтения на реальном устройстве. Тест на цветовой контраст здесь не измеряет распознавание дальтонизма, семантику значков или соответствие всей странице; значения цвета и места проверки сохраняются для последующего анализа.