Приблизительно 8% мужчин и 0,5% женщин имеют ту или иную форму нарушения цветового зрения (дальтонизм). Проектирование с учётом доступности означает обеспечение того, чтобы ваш выбор цветов работал для всех. Этот инструмент симулирует, как выглядят цвета при различных типах дальтонизма (protanopia, deuteranopia, tritanopia и других), чтобы вы могли проверить доступность вашего дизайна.
Normal Vision
#e74c3c
Protanopia
Red-blind: no red cone cells
~1% of males
#786d39
Deuteranopia
Green-blind: no green cone cells
~1% of males
#9f8f36
Tritanopia
Blue-blind: no blue cone cells
~0.003% of population
#fe1b49
Protanomaly
Red-weak: reduced red cone sensitivity
~1% of males
#ab6838
Deuteranomaly
Green-weak: reduced green cone sensitivity
~5% of males
#b77d37
Tritanomaly
Blue-weak: reduced blue cone sensitivity
~0.01% of population
#e94943
Achromatopsia
Total color blindness: sees only grayscale
~0.003% of population
#828282
Введите HEX-код цвета или используйте палитру для выбора цвета. Инструмент показывает, как этот цвет выглядит при 7 типах нарушения цветового зрения: Protanopia, Deuteranopia, Tritanopia, Protanomaly, Deuteranomaly, Tritanomaly и Achromatopsia. Каждая симуляция отображается рядом с исходным цветом для лёгкого сравнения, вместе с описанием состояния и его распространённостью.
Симуляция дальтонизма критически важна для доступного дизайна, гарантируя, что UI-элементы, диаграммы, карты и инфографика остаются различимыми для всех пользователей. Используется дизайнерами, тестирующими цвета кнопок и ссылок, разработчиками визуализации данных, выбирающими цветовые палитры диаграмм, геймдизайнерами, создающими режимы для дальтоников, педагогами, проектирующими доступные учебные материалы, и командами QA, проверяющими соответствие WCAG для веб-доступности.
Симуляция дальтонизма использует матрицы преобразования цветов на основе алгоритма Brettel, Viénot и Mollon (1997) для дихроматического зрения (отсутствие типа колбочек) и алгоритма Machado, Oliveira и Fernandes (2009) для аномальной трихромазии (ослабленный тип колбочек). RGB-цвет конвертируется в цветовое пространство LMS (Long, Medium, Short wavelength cone response), соответствующий ответ колбочек модифицируется или удаляется, и результат конвертируется обратно в RGB. Эти научно валидированные модели точно воспроизводят, как выглядят цвета для людей с каждым состоянием.
Дальтонизм (нарушение цветового зрения) - это сниженная способность различать определённые цвета. Наиболее распространённые типы влияют на восприятие красно-зелёного. Около 1 из 12 мужчин и 1 из 200 женщин имеют ту или иную форму дальтонизма.
Основные типы: Protanopia (нет красных колбочек), Deuteranopia (нет зелёных колбочек), Tritanopia (нет синих колбочек), Protanomaly (слабое красное), Deuteranomaly (слабое зелёное, наиболее распространённое), Tritanomaly (слабое синее) и Achromatopsia (полная цветовая слепота).
Не полагайтесь только на цвет для передачи информации. Используйте также метки, паттерны или иконки. Обеспечьте достаточный контраст между цветами переднего плана и фона. Тестируйте вашу палитру с этим симулятором и проверкой контраста WCAG.
Конвертация утилитарных классов Tailwind CSS в стандартные свойства обычного CSS.
Визуально редактируйте CSS border-radius для каждого угла с живым предпросмотром.
Проверьте, соответствуют ли цветовые комбинации требованиям WCAG 2.1 по контрастности для доступности.
Трансформируйте, форматируйте, генерируйте и кодируйте данные мгновенно. Приватно, быстро и всегда бесплатно.
Смотреть все инструменты