Visual Hierarchy
The quick brown fox jumps over the lazy dog. Legibility is critical for universal accessibility and rigorous design systems.
Мгновенно проверяйте коэффициенты контрастности цветов и соответствие WCAG 2.1. Вставьте любые два цвета, чтобы увидеть, проходят ли они стандарты AA или AAA для обычного текста, крупного текста и компонентов интерфейса. Получайте предложения по автоматической коррекции, если ваши цвета не соответствуют требованиям доступности.
Проверяйте по стандартам AA (4,5:1 для обычного текста, 3:1 для крупного текста) и AAA (7:1 / 4,5:1). Увидьте статус «пройдено/не пройдено» с первого взгляда.
Если контрастность не проходит, получите предложения по корректировке цвета, которые сохраняют ваш дизайн-замысел, соблюдая стандарты доступности.
Увидьте, как ваш текст выглядит на фоновом цвете. Предпросмотр обычного текста, крупного текста и элементов интерфейса в реальном времени.
Вводите цвета в HEX, RGB или HSL. Проверщик автоматически обрабатывает конвертацию, чтобы вы могли работать в предпочитаемом формате.
Для WCAG AA: обычный текст требует не менее 4,5:1, крупный текст (18pt или 14pt жирный) — не менее 3:1, а не текстовые компоненты интерфейса — не менее 3:1.
AAA — более строгий стандарт: 7:1 для обычного текста и 4,5:1 для крупного текста. Большинство дизайн-систем ориентируются на AA как на минимум, а AAA — как на желаемую цель.
Нет. WCAG 2.1 также требует контрастности 3:1 для компонентов интерфейса (кнопки, границы полей ввода, иконки) и графических объектов, передающих смысл.
Около 8% мужчин и 0,5% женщин имеют ту или иную форму нарушения цветового зрения. Хороший контраст гарантирует, что ваш контент будет читабельным для всех, включая людей с ослабленным зрением, при ярком солнечном свете или на некачественных экранах.