Проверка контраста цвета онлайн — WCAG AA и AAA
Выберите цвет текста и цвет фона — увидите соотношение контраста и пройдёт ли пара пороги WCAG AA и AAA для обычного и крупного текста, плюс планку 3:1 для кнопок и элементов интерфейса. Рядом живой пример текста. Если контраста не хватает, покажем ближайший цвет, при котором проверка проходит, — одним кликом подставим его.
Как пользоваться пипеткой
Кнопка «Пипетка» (в браузерах на Chromium) берёт цвет прямо с экрана: наведите на любой пиксель чужого сайта или макета — HEX подставится в поле. В браузерах без EyeDropper скопируйте цвет из дизайн-макета вручную.
Покрываемые вопросы
На этой странице также отвечаем на вопросы: «проверить контраст цвета онлайн», «контраст текста и фона», «wcag контраст проверка», «контраст кнопки на контраст», «контрастность шрифта онлайн», «подобрать цвет с нужным контрастом».
Как считаем
WCAG 2.x: относительная светимость L = 0,2126·R + 0,7152·G + 0,0722·B, где каналы предварительно линеаризуются (гамма sRGB). Соотношение контраста = (L1 + 0,05) / (L2 + 0,05), L1 — светлее из двух. Пороги: AA — 4,5:1 для обычного и 3:1 для крупного текста (≥24px или ≥18,67px жирного), AAA — 7:1 и 4,5:1, элементы интерфейса — 3:1. Ближайший проходящий цвет ищется дихотомией по светлоте HSL с сохранением тона.
Ограничения и допущения
- Пороги соответствуют WCAG 2.1; в версии 2.2 они не изменились.
- Подбор цвета сохраняет тон и насыщенность исходного — меняется только светлота.
- Автоконтраст не учитывает изображения и градиенты под текстом — только сплошные цвета.