Проверить цветовой контраст

Выберите два цвета и посмотрите на соотношение, проходит ли оно AA и AAA, и как сочетание выглядит на самом деле — в том числе с японским текстом, который плотнее и труднее читается при низком контрасте.

Загружаем инструмент…

Как это работает

  1. Выберите цвет текста и фона или вставьте hex-значения.
  2. Прочитайте соотношение и четыре результата «проходит/не проходит».
  3. Настраивайте, пока обычный текст не пройдёт 4.5:1.

Почему ничего не отправляется на сервер

Всё, что делает эта страница, выполняет код внутри вкладки вашего браузера — тем же движком, который рисует веб-страницы. Файл читается с диска в память вкладки, преобразуется там и записывается обратно как загружаемый файл. Он никуда не отправляется — ни нам, ни третьей стороне.

Проверьте сами

  1. Откройте инструменты разработчика в браузере (F12) и перейдите на вкладку «Сеть» (Network).
  2. Загрузите свой файл и запустите инструмент.
  3. Единственные запросы, которые вы увидите, — это код самого инструмента, а у нескольких тяжёлых инструментов ещё и их открытый движок из публичного CDN, плюс один небольшой сигнал о просмотре страницы на loreatec.jp (адрес и заголовок страницы, больше ничего). Ни один из них не несёт ваш файл.

Проверьте, что файлы не уходят →

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

Какой порог применим ко мне?

4.5:1 для обычного текста, 3:1 для текста от 24 px (19 px для жирного) и для элементов интерфейса вроде рамок полей и иконок, 7:1 для AAA. Если запомнить только одно число, запомните 4,5.

Мой дизайн проходит проверку, но всё равно читается тяжело.

Соотношение контраста не измеряет насыщенность начертания, размер шрифта или межбуквенный интервал, а тонкий светлый шрифт при 4.5:1 действительно неудобен для чтения. Панель предпросмотра как раз для того, чтобы судить не только по цифре, но и глазами, — особенно для японского текста, где плотные кандзи мелкого размера требуют контраста больше, чем того просит формула.