Совместимость цветов

Что считает проверка

Впишите два цвета — инструмент скажет, сочетаются ли они, и покажет числа, на которых держится ответ: разницу тона в градусах по цветовому кругу, различимость ΔE2000, контраст по WCAG 2.1 и разницу светлоты L*. Схемы круга считаются с допуском 15°: монохромная пара, аналогичные, тетрада 90°, триада 120°, сплит 150° и комплементарные 180°.

Годятся любые записи: #3B82F6, rgb(59, 130, 246), hsl(217, 91%, 60%), tomato. Цвет с битым каналом вроде rgb(300, 0, 0) не принимается: браузер урезал бы его молча.

Нейтральные цвета и почему это важно

У серого, белого и чёрного тона нет, поэтому спорить на круге им нечем: нейтральный подходит любому цвету, и проверка так и говорит. Сервисы с готовой таблицей на этом ошибаются — например, объявляют белый несочетаемым с пастельным голубым.

Роль цветов

Для фона и текста главное — контраст: WCAG 2.1 просит 4,5:1 для обычного текста, 3:1 для крупного и 7:1 для уровня AAA. Для двух акцентов рядом важнее другое: попадает ли пара в схему круга и различима ли она вообще. Переключатель роли меняет вердикт под задачу.

Что делать, если пара не сходится

Проверка не только называет беду, но и предлагает готовый цвет: сдвинуть тон до ближайшей схемы, развести цвета по светлоте или подобрать светлоту до контраста 4,5:1 с тем же тоном. Кнопка «Подставить» ставит предложенный цвет во второе поле.