<
  • Главная
Статьи

Цветовой контраст для лучшей читаемости

  1. 1. Установите цветовую палитру (с оттенками, тонами и оттенками)
  2. 2. Найдите хороший анализатор цветовой контрастности
  3. 3. Изучите контраст основного текста
  4. 4. Оцените светимость кнопок и ссылок
  5. 5. Установите различные цветовые комбинации
  6. 6. Документ в вашем руководстве по стилю
  7. Резюме
  8. Смотрите также:

Когда вы создаете цветовые палитры для своих проектов веб-дизайна, тестируете ли вы сочетания цветов на контраст

Когда вы создаете цветовые палитры для своих проектов веб-дизайна, тестируете ли вы сочетания цветов на контраст? Если это не так, вы можете не учитывать возможную читабельность дизайна и, следовательно, потерять потенциальную аудиторию.

Я работал над процессом, чтобы помочь мне обеспечить хороший цветовой контраст и удобочитаемость в моих проектах. Благодаря некоторым полезным инструментам доступности цветового контраста, я думаю, что у меня есть кое-что, что работает, и я хотел бы поделиться с другими в том случае, если вам это тоже будет полезно.

Я должен отметить, что я далеко не эксперт по доступности. Моя цель здесь - просто показать, что небольшие усилия могут иметь большое значение, когда речь идет о выборе цветов с оптимальной читабельностью. Проверьте W3C для более подробного объяснения. Также, проверить контрастное восстание для интересного взгляда на проблему контраста.

1. Установите цветовую палитру (с оттенками, тонами и оттенками)

Хотя вы можете использовать инструменты цветового контраста, чтобы помочь вам в создании цветовой палитры, вы также можете использовать инструменты, чтобы помочь найти хорошие варианты в существующей палитре. В этом случае я использую существующую цветовую палитру и показываю, как я использую оттенки, тона и оттенки, чтобы помочь создать больше вариантов цветовой контрастности.

Моя рабочая цветовая палитра. Из предыдущей статьи, Добавить цвета в палитру с помощью смешивания цветов ,

Установление оттенков, тонов и оттенков. Из предыдущей статьи, От тьмы к свету: универсальность цвета с использованием оттенков, тонов и оттенков ,

2. Найдите хороший анализатор цветовой контрастности

В Интернете есть множество хороших инструментов для проверки контрастности цветов. Найдите тот, который подходит вам, и используйте его для тестирования цветовых комбинаций фона и переднего плана. Вот несколько вариантов:

Брент Джексон Colorable (Демо)

3. Изучите контраст основного текста

Во-первых, полезно установить хорошие значения основного текста. Я обычно начинаю с нейтральной цветовой палитры и нацеливаюсь на самый светлый серый с WCAG Рейтинг AAA (соответствует 508). Оценка AAA обеспечивает оптимальную читаемость, а некоторая яркость обеспечивает мягкость текста. Обратите внимание, что имена цветов - это пользовательские имена, которые я назначил цветам (из предыдущей статьи, Давать цветам больше красочных имен .)

Тестирование нейтральной цветовой палитры в виде текста на белом фоне (из предыдущей статьи: Оттенки серого - да, действительно .)

# 373D3F или "Ворон" - мой самый светлый серый в рейтинге доступности AAA.

4. Оцените светимость кнопок и ссылок

Следующий шаг - найти хороший вариант цвета для кнопок и ссылок (действий). Я придерживаюсь немного другого подхода. Вместо того, чтобы переходить на AAA, я ищу AA (разумный стандарт, к которому нужно стремиться), чтобы получить более яркий цвет для контрастирования со статическим текстом и привлечь внимание к важным ссылкам. Для этих целей я тестирую белый (#FFFFFF) в сочетании с различными цветами.

У синих и красных шансы на успех выше, а у желтых и зеленых не так много.

Я иду с "Darkest Alice" (# 107896) для хорошего сочетания контраста и яркости. "Рубин" (# C02F1D) тоже неплохой вариант.

5. Установите различные цветовые комбинации

Хорошо определить некоторые дополнительные цветовые комбинации для привлекающих внимание вызовов и других возможных потребностей.

Мой базовый пример с темно-серым текстом "Ворон" и ярким синим "Темная Алиса" для ссылок и кнопок.

Пример с темными на светлом фоне.

Пример с подсветкой на темном фоне.

6. Документ в вашем руководстве по стилю

Последний шаг - держать справочное руководство под рукой с результатами теста, добавляя примечания к своему стилю. Ваши клиенты и аудитория будут впечатлены тем, что ваши цвета выбраны по вдумчивым причинам - оптимальная читаемость - и вы пройдете тестирование качества с дополнительными опциями, если они вам понадобятся.

Образец документации для руководства по стилю.

Резюме

Это действительно все, что нужно, но вы можете разбить это на три, даже более простые части, если хотите:

  1. Чтение текста: в целях чтения найдите высококонтрастное сопряжение для большей части вашего тела (тяжелая работа).
  2. Ссылки на действия: Для ссылок изучите светящиеся и высококонтрастные цвета, чтобы было понятно, где находятся действия. (Если вы сделали это правильно, между текстом для чтения и ссылками действий будет некоторый контраст.)
  3. Extra, Extra !: Создание и документирование различных цветовых комбинаций для вызовов, призванных привлечь дополнительное внимание.

Смотрите также:

Примечание. Эта статья является частью серии статей о цвете, так как она относится к веб-дизайну. Для больше в серии, проверьте эти статьи:

Похожие

Как украсить столовую?
... или друзьями, мы празднуем моменты вместе во время еды. Пора остановиться на мгновение или замедлиться после дня в постоянной спешке. Мода на здоровый образ жизни и совместная кулинария создают новый облик столовой, поэтому все должно быть продуманно продуманно. Мы должны решить, хотим ли мы устроить небольшой уголок на кухне, или, может быть, мы решим найти подходящее место в гостиной. Эти проблемы в первую очередь зависят от количества членов домохозяйства, а также от размера комнат в нашем
Польско - греческий переводчик
быстрый переводчик помни язык переводчик Был ли этот перевод полезным для вас? Помощь в дальнейшем развитии проекта TRANSLATOR.EU Оцените перевод Средняя оценка: 3,71 Также доступны следующие переводчики: Язык Аристотеля и Гомера и язык Библии. Греческий язык отличается от
PolBox.TV. Смотрите польское онлайн-телевидение!
PolBox.TV - это сервис для просмотра польского телевидения в Интернете, в основном для поляков, проживающих за границей. страны. Хотя PolBox.TV не первое польское телевидение онлайн, оно определенно выделяется среди конкурентов не только предложением программ, но и функциями. услуги PolBox - это проект, ориентированный на многофункциональность.
Простой способ сканирования документов с помощью телефона Android
Это удивительно, когда вы останавливаетесь и думаете обо всех некогда громоздких задачах, которые упростили наши смартфоны. Наши миниатюрные карманные компьютеры, от депозита чеков до записи звука и даже посадки на самолет, действительно стали универсальными организаторами жизни и производительными машинами. На самом деле наши телефоны могут сделать так много, что я бы поспорил, что вряд ли кто-то на самом деле воспользуется всеми их возможностями мобильной производительности.
Установите установку Microsoft Office 2010 на свой ПК Dell
Эта статья содержит информацию об установке Microsoft Office 2010 Professional на ПК Dell. Содержание: Установите Microsoft Office 2010 на свой ПК Dell Требования к аппаратному и программному обеспечению Из чего вы устанавливаете? Инструкция по монтажу 1. Установите Microsoft Office 2010 на свой
Документы Google | Учебная поддержка на PCC
... иск отлично подходит для обмена документами и мультимедиа, но в Документах Google отсутствует несколько ключевых функций доступности. Если вам нужно передать много данных в таблице, иметь сложные таблицы или сложные уравнения, тогда Microsoft Word будет лучшим выбором. Сотрудничество и совместное редактирование Google Doc также может быть сложной задачей для пользователей вспомогательных технологий. Очень краткое руководство о том, как сделать ваши Документы Google доступными, можно найти
InterviewMe - платформа для создания резюме получает 1 миллион злотых
Технологический инкубатор Xevin Lab в Белостоке инвестировал один миллион злотых в InterviewMe - платформу, которая помогает соискателям. В ее предложение входит создание резюме и сопроводительных писем, подготовка к собранию по набору персонала и даже заполнение профиля в LinkedIn. как InterviewMe помогает вам получить работу своей мечты? Основным продуктом InterviewMe является создание резюме и сопроводительных
5 бизнес идей для молодых мам
Лукаш Пухальский менеджер академического инкубатора предпринимательства в Познани компания: Экономический университет в Познани Рождение ребенка приносит много изменений в жизни; план дня отменяется, находя момент для себя, часто граничит с чудом. Со временем становится все
Девять лучших комбинаций шрифтов Google
С изменением требований к шрифту изменились и качественные характеристики. Больше не важно, насколько гибкий шрифт или как он работает в минимальном представлении. В новых средствах массовой информации эти аспекты играют почти незначительную роль, так как написание практически не выполняется вручную. В результате тема микротипографии все больше и больше делается. Кроме того, размер презентации в любом случае может быть легко изменен каждым пользователем независимо. Но есть больше
Лучшие 3 способа восстановить PDF файлы с iPhone, iPad, iPod toch
«Я потерял все свои файлы PDF, хранящиеся в iBooks, при обновлении iPad до iOS 12. Сделал резервную копию в iTunes на моем компьютере, но не могу найти ее. Насколько я знаю, не в iCloud. Как восстановить потерянный PDF на iPad ?» Потерянные PDF-файлы на вашем устройстве iOS? Если вы ищете восстановление PDF для iPad, iPhone или iPod , это именно то, что вам нужно. Вы узнаете, почему файлы электронной книги PDF в iBooks теряются, и 3 работоспособных метода восстановления
16 мелких деталей у женщин, которым мужчины просто не могут противостоять
... и сексуальность - это то, на что мужчины обращают внимание, но они не могут этого понять. Некоторые женщины знают, как им пользоваться, и у вас создается впечатление, что они рождаются с ним, и другим нужно время, чтобы выучить его. Вот 16 мелочей, которые привлекают мужчин: 1. Когда женщина слегка прикусывает губу Дети делают подобный жест, когда они чего-то волнуются или боятся. Это движение заставляет нас переключить наше внимание на зону тела.

Комментарии

Какую роль будет играть резюме в будущем?
Какую роль будет играть резюме в будущем? Резюме будет витриной кандидата на несколько хороших лет. Автоматизация подбора персонала будет играть все более важную роль. Компании будут использовать программное обеспечение для предварительного сканирования. В настоящее время многие корпорации просят заполнить форму найма до прикрепления резюме. Это позволяет легко отсеивать кандидатов, которые не отвечают основным требованиям. С другой стороны, для кандидата форма заявки
Резюме - Как работает поиск изображений?
Резюме - Как работает поиск изображений? Сервис поиска изображений в Google Graphics позволяет быстро и удобно получать информацию путем поиска графического элемента. Есть 4 метода поиска изображений: Вставьте адрес изображения - вам нужен URL изображения Загрузите изображение - вам нужен файл изображения, например, с компьютерного диска Перетащите изображение сюда - перетащите файл изображения
ZE520KL) по лучшей цене?
ZE520KL) по лучшей цене? Asus ZenFone 3 Test (ZE520KL) Вердикт Никакой революции в дизайне, но реальное улучшение между ZenFone 2 и ZenFone 3. Здесь премиальный аспект действительно ощутим. Кроме того, мобильный телефон имеет порт USB-C, датчик отпечатков пальцев, а также металлическую и стеклянную конструкцию. Как и в прошлом году, ZenFone 3 имеет хорошую панель Super IPS + с довольно внушительной яркостью. Контраст тоже хороший, и его можно обвинить только
Проектор в гостиной - это хороший выбор?
Проектор в гостиной - это хороший выбор? Да, это хороший выбор, но ... К сожалению, как обычно, есть "эль". Ни одно оборудование не идеально, и перед покупкой стоит проверить все достоинства и недостатки. Однако, прежде чем мы доберемся до сути, мы раскроем, кто будет доволен проектором. Прежде всего, поклонник кино и поклонник, смотрящий фильмы на большом экране. Если размер вашего телевизора превышает 50 дюймов, то даже проектор Full HD среднего размера сможет отображать
Читайте также: Ева Ходаковская станет модным блоггером?
Читайте также: Ева Ходаковская станет модным блоггером?
Причин почему Купили новый смартфон и заметили, что батарея кажется такой же короткой, как и в вашем старом телефоне?
Но действительно ли это хороший шаг дизайнера, который только что вернулся в индустрию после громкого скандала? Мы очень заинтересованы в том, как клиенты Zień отреагируют на коллекцию. Читайте также: Ева Ходаковская станет модным блоггером?
Вы можете узнать больше о перегреве компьютера в руководстве: Что делать, если компьютер перегревается?
Когда вы смотрите польские передачи, транслируемые утром из Варшавы, это полночь? Эта функция для вас. Это позволяет задерживать выбросы от 2 до 11 часов по отношению к европейскому времени. Multiroom - функция, известная на таких платформах, как Netflix или Amazon. Позволяет подключать до трех разных устройств и пользоваться услугой одновременно. Представьте себе, что вечером, когда ваши дети требуют мультиков, а ваша вторая половина хочет чего-то совершенно отличного от вас,
Интересно, вы также устроили лаундж в старом стиле?
Интересно, вы также устроили лаундж в старом стиле? Может быть, у вас есть совет для людей, которые имеют это перед вами? Поделитесь ими в комментарии.
С другой стороны, мы также показали что делать, если вы нашли потерянный iPhone Нашли потерянный или украденный айфон?
Интересно, вы также устроили лаундж в старом стиле? Может быть, у вас есть совет для людей, которые имеют это перед вами? Поделитесь ими в комментарии.
Новые технологии также необходимы для найма новых специалистов, верно?
Новые технологии также необходимы для найма новых специалистов, верно? В теории да. Однако я хотел, чтобы мы перестали думать о себе как о разработчиках PHP, Android или iOS. Я хотел, чтобы мы изменили подход к тому, что мы создаем, и начали думать о себе как о разработчиках сайта OLX. Что это означает на практике? В самом начале у нас не было всей компетенции в команде, чтобы создать мобильную версию сайта с нуля. Также не было
Когда вы смотрите польские передачи, транслируемые утром из Варшавы, это полночь?
Когда вы смотрите польские передачи, транслируемые утром из Варшавы, это полночь? Эта функция для вас. Это позволяет задерживать выбросы от 2 до 11 часов по отношению к европейскому времени. Multiroom - функция, известная на таких платформах, как Netflix или Amazon. Позволяет подключать до трех разных устройств и пользоваться услугой одновременно. Представьте себе, что вечером, когда ваши дети требуют мультиков, а ваша вторая половина хочет чего-то совершенно отличного от вас,

Содержание: Установите Microsoft Office 2010 на свой ПК Dell Требования к аппаратному и программному обеспечению Из чего вы устанавливаете?
Как InterviewMe помогает вам получить работу своей мечты?
Как восстановить потерянный PDF на iPad ?
» Потерянные PDF-файлы на вашем устройстве iOS?
Какую роль будет играть резюме в будущем?
Резюме - Как работает поиск изображений?
ZE520KL) по лучшей цене?
Проектор в гостиной - это хороший выбор?
Читайте также: Ева Ходаковская станет модным блоггером?
Причин почему Купили новый смартфон и заметили, что батарея кажется такой же короткой, как и в вашем старом телефоне?


Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

    Возможности Jetpack плагина
    Вступление Возможности Jetpack плагина это более 30 функциональных модуля плагина, делающего его универсальным плагином WordPress, заменяющего аналогичные сторонние плагины. Jetpack один заменяет десятки

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью