Лаборатория контраста WCAG 2.2

Проверьте любую пару цветов текста и фона.

Введите два непрозрачных цвета sRGB, чтобы рассчитать их контрастность, проверить пороги WCAG AA и AAA для текста, увидеть сочетание и скопировать точный CSS.

01 / Контрастность

Один коэффициент — четыре порога для текста.

Пороговые значения WCAG нельзя округлять вверх. Крупный текст — не менее 24 CSS-пикселей при обычном начертании или примерно 18,7 CSS-пикселя при полужирном.

5,43:1

Соответствует

AA · обычный текст

Не менее 4,5:1

Соответствует

AA · крупный текст

Не менее 3:1

Не соответствует

AAA · обычный текст

Не менее 7:1

Соответствует

AAA · крупный текст

Не менее 4,5:1

Внедрение

Перенесите проверенную пару в CSS.

Пользовательские свойства сохраняют точные непрозрачные значения из расчёта. Проверьте все реальные состояния и поверхности, где используется эта пара.

--text-color: #000000;
--background-color: #2F80ED;
color: var(--text-color);
background-color: var(--background-color);

Опубликованные критерии

Что подтверждает эта проверка — и чего она не подтверждает.

Расчёт следует правилам WCAG 2.2 для относительной яркости и контрастности цветов sRGB. Числовой результат относится к этой паре и сам по себе не подтверждает соответствие всей страницы или продукта.

1.4.3

Минимальный контраст текста

Для уровня AA обычному тексту требуется не менее 4,5:1, крупному — не менее 3:1.

Читать руководство W3C

1.4.6

Повышенный контраст текста

Для уровня AAA обычному тексту требуется не менее 7:1, крупному — не менее 4,5:1.

Читать руководство W3C

1.4.11

Контраст нетекстовых элементов

Важным элементам управления, состояниям и графическим объектам обычно требуется 3:1 относительно соседних цветов, но их реальные границы нужно проверять в интерфейсе.

Читать руководство W3C