Палитра цветов и проверка контраста

Как пользоваться: Палитра цветов и проверка контраста

Что считает и когда использовать

Подбирает и конвертирует цвета между HEX, RGB, HSL, HSV и CMYK, предлагает светлые и тёмные оттенки и сочетающиеся цвета и проверяет контраст текста по рекомендациям доступности WCAG.

Как пользоваться, шаг за шагом

1. Выберите цвет в палитре или введите его в формате HEX, RGB, HSL или названием цвета.
2. Выберите цвет фона, чтобы проверить контраст.
3. Копируйте любой формат одним щелчком.
4. Используйте светлые и тёмные оттенки и сочетающиеся цвета для палитры.

Что означает каждое поле

• Цвет – По умолчанию #2443C8 — синий SmartCalcy.
• Фон – По умолчанию белый.

Как читать результаты

• Коэффициент контрастности – От 1:1 до 21:1, с результатами AA и AAA для обычного и крупного текста.
• Форматы – HEX, RGB, HSL, HSV и CMYK.
• Светлые и тёмные оттенки – Более светлые и более тёмные варианты.
• Сочетающиеся цвета – Комплементарные, аналоговые и триада.

Формула

Коэффициент контрастности = (L1 + 0,05) ÷ (L2 + 0,05), где L1 и L2 — относительная яркость более светлого и более тёмного цвета. Для WCAG AA нужно 4,5:1 для обычного текста и 3:1 для крупного; для AAA — 7:1 и 4,5:1.

Пример расчёта

С начальными цветами #2443C8 на белом имеет коэффициент контрастности 7,74:1, что проходит AAA для текста любого размера.

Допущения и ограничения

• Значения CMYK — простое преобразование, а не печатный профиль с управлением цветом.
• Результаты контраста рассчитываются по формуле WCAG 2.

Частые ошибки

• Проверять контраст только на крупном тексте, а потом использовать цвет для мелкого.
• Передавать смысл только цветом.

Частые вопросы

Похожие инструменты