Цвет фона для сайта: Как подобрать лучшие цвета для сайта

11.02.2023 alexxlab

Содержание

Как подобрать лучшие цвета для сайта

25 мая 2014 Интернет-маркетинг, Контент, Полезные советы, Продвижение сайтов

Для интернет-пространства визуальное восприятие – одно из основных. Поэтому цветовое оформление сайта – это мощное средство влияния на сознание, подсознание и эмоции посетителей. Цвет и графика помогут быстро донести любую идею намного легче и ярче, чем самый лучший текст любого формата.

Выберите лучшие цвета для сайта, и ваши посылы обретут силу и ясность.

Вот основные значения в психологии цвета.

Первичные цвета:

красный – привлекает внимание;
желтый – несет бодрость и веселье, надежду и оптимизм;
синий – цвет честности и надежности.

Вторичные:

оранжевый – достижения, энергия, азарт, успех;
зеленый – отражает природу и чистоту, свежесть и здоровье;
фиолетовый – подчеркивает индивидуальность, творчество и изобретательность.

Третичные:

бирюзовый – вносит ясность в мысли и связи;
индиго – целостность и искренность;
пурпурный – сострадание, духовность, вместе с тем практичность;
розовый – взывает к любви и состраданию, цвет молодости и романтики;
коричневый – комфорт, надежность и дружелюбие;
серый – нейтральный, изысканный и современный.

Если вы определились с лучшими цветами для сайта, то продумайте также цвет фона, текста, ссылок. Общие правила можно сформулировать так.

Используйте 2-3 цвета в оформлении сайта, не больше. Для усиления можно использовать оттенки основных цветов.

Белый фон обеспечит читаемость большинства цветов текста, кроме желтого и пастельного. Классика жанра – темный шрифт на белом фоне. Избыток ярких, бьющих по глазам, шрифтов не идет на пользу вашему сайту.
Темный фон тоже хорошо работает, если цвет текста очень яркий или белый. Однако чтение большого объема мелкого текста на темном фоне затруднено. Нежелательно делать черный и другие темные цвета основным фоном сайта. Но можно использовать для отдельных элементов, например, кнопок меню.
Используйте контрастные цвета для кнопок, ссылок, мотиваторов. Красный цвет текста призывает к действиям и направляет. Зеленый помогает принять решение. Синий считается самым безопасным цветом, вызывает доверие.

Только не переборщите с контрастами. Все цветовые сочетания должны быть легкими для восприятия!

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

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

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

Люди в тропических странах выбирают яркие и теплые цвета. Те, кто живет в странах с более холодным климатом – холодные.

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

Красный – цвет удачи и празднования в Китае, но цвет траура в Южной Африке.
Желтый – священный и благоприятный в Китае и Индии, однако цвет траура в Египте.
Зеленый связан с богатством и престижем в Саудовской Аравии, но традиционно запрещен в Индонезии.
Голубой во всем мире считается цветом для новорожденных мальчиков, розовый – для девочек, а в Бельгии наоборот.

Эти знания пригодятся и тогда, когда вы будете думать о том, как сделать логотип фирмы и разработать фирменный стиль.

Психология – это не точная наука, поэтому можно подобрать несколько цветов, провести опрос или фокус-группу и посмотреть на какие из них будут лучше реагировать посетители.

/Автор статьи: Юлия Мураева/

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

* В случае упоминания в тексте социальных сетей Facebook, Instagram, уведомляем: деятельность компании Meta (Facebook, Instagram) признана экстремистской и на территории РФ запрещена.

Почему вы не должны использовать яркие и насыщенные цвета для фона сайта — Дизайн на vc.ru

Перевод подготовлен для сообщества Dui.

6974 просмотров

Источник uxmovement.

Вы используете цвет в вашем интерфейсе, который напрягает глаза пользователя?

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

На какую колонку вы можете смотреть дольше?

Пример. Посмотрите внимательно на цвета в изображении сверху.

Левый столбец содержит цвета с максимальной яркостью и насыщенностью. Правый столбец содержит цвета с яркостью и насыщенностью равной 80%.

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

Яркость против насыщенности

Яркость (Brightness) и насыщенность (Saturation) это разные цветовые свойства. Первое свойство означает, как много белого или чёрного смешивается с цветом. Второе свойство — какое количество серого содержится в цвете.

Увеличивая яркость — вы не снижаете насыщенность. Когда вы понижаете насыщенность, вы смешиваете цвет с оттенком серого. Когда вы повышаете яркость, то вы делаете цвет светлее, но не делаете его серым.

Сверху: увеличение яркости — больше белого. Снизу: уменьшение насыщенности — больше серого

Влияние цвета на внимание и возбуждение

По результатам исследования «Эффект оттенка, насыщенности и яркости» выяснилось, что цвета с высокой насыщенностью и яркостью привлекают наибольшее внимание. Автор этого исследования пришёл к выводу, что эти цветовые свойства наиболее важны для привлечения внимания, чем оттенки.

Два других исследования — «Возбуждающий эффект цветовой насыщенности» и «Цвет и эмоции» показали, что насыщенные цвета связаны с наибольшим возбуждением. Оттенки (Hue) так же влияют на возбуждение, но насыщенность и яркость оказывают сильнейшее воздействие.

Используйте яркие и насыщенные цвета в кнопках

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

Поэтому вы должны использовать такие цвета только в элементах интерфейса, которые требуют действия от пользователя — например, кнопки. Эти цвета привлекут внимание пользователя к элементам управления и упростят их нахождение в нужный момент.

Слева: фон яркий и насыщенный. Поэтому всё внимание к фону, а не к кнопке. Справа: кнопка использует яркий и насыщенный цвет. Она привлекает внимание пользователя

Используйте тёмный и менее насыщенный цвет для фона

Лучше делать цвет фона темнее и менее насыщенным. При затемнении цвета уменьшается содержание белого цвета. В то время как уменьшение насыщенности увеличивает количество серого цвета.

Полученный фон не будет забирать на себя внимание пользователя от текста или контента на странице. Это позволяет пользователю читать страницу легко и не отвлекаясь.

Слева: неприятно для глаз. Фон яркий и насыщенный. Максимальная яркость и насыщенность на изображении слева. Справа: приятно для глаз. Фон тёмный и менее насыщенный. Яркость и насыщенность ниже

Поиски оптимального цвета фона

Есть много коэффициентов яркости и насыщенности, которые вы можете использовать для вашего цвета в фоне. Создание сетки цветовых образцов поможет вам найти оптимальный цвет для фона.

Сначала выберите основной оттенок и установите на нём максимальную яркость и насыщенность. Значение оттенка сохраняется и служит контрольной точкой для регулирования яркости и насыщенности.

Продублируйте основной оттенок цвета (образец), что бы создать четыре новых образца цвета с пониженым уровнем насыщенности и яркости.

Уменьшите уровень яркости у двух созданных образцов цвета. И уменьшите насыщенность у двух других образцов. При регулировании цвета используйте шаг, кратный десяти.

Поместите насыщенные образцы цвета слева от изначального оттенка с яркость и насыщенностью равной 100%. Справа разместите образцы цвета с минимальной и максимальной яркостью.

К сожалению, полученные цвета не рекомендуются для использования. Так как они до сих пор имеют 100% яркость или насыщенность. Поэтому они будут служить основой для поиска подходящих цветов.

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

В итоге ни один из цветов второго ряда не имеет 100% насыщенности и яркости. Значит, эти цвета наиболее подходящие для использования в работе.

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

Теперь у вас есть в общей сложности восемь оптимальных цветов с различными коэффициентами яркости и насыщенности.

Примеры хорошего и плохого цвета для использования в фоне сайта

Ниже приведены примеры страниц, которые приятны и неприятны для глаз. Обратите внимание, как долго вы можете смотреть на каждую из страниц в примерах.

Слева — плохой зелёный (Panic или Prismic). Справа — хороший зелёный (FreshDesk или Sigstr)

Слева — плохой красный (Telepath или Meat). Справа — хороший красный (AppFigures или Jackie)

Слева — плохой синий (Compose или DareIt). Справа — хороший синий (Republic или MailTag)

Эстетика и юзабилити

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

Цвет влияет на эстетику дизайна, но так же влияет и на удобство использования. Дизайнеры должны учитывать эти два момента, что бы цвет был приятен для глаз.

Лучшие цвета для веб-сайтов

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

Улучшите внешний вид вашего сайта с помощью этого руководства.

Цвет имеет решающее значение для успеха веб-сайта. Сама палитра способна повлиять на потребителей и побудить их принять решение о покупке. На самом деле, использование правильных цветовых комбинаций на вашем сайте может увеличить конверсию. Цвет веб-сайта диктует сообщение, настроение и тон бренда через психологию цвета, дисциплину, которая влияет на процесс принятия решений каждым. Удачная цветовая палитра может творить чудеса с веб-сайтом компании, в то время как плохо спроектированный веб-сайт может отпугнуть потенциальных клиентов и зрителей.

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

Лучшие цвета фона

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

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

Цвет фона веб-сайта задает тон всему сайту. Макет через nelelena. Изображение через PureSolution.

Один из лучших советов — использовать изображения, продукты или фотографии в качестве источника вдохновения. Является ли ваш продукт или дизайн красочным или более монохромным? Есть ли определенная цветовая палитра, которая бросается в глаза при просмотре визуальных эффектов? Сосредоточивая свое внимание на изображениях, вы можете избежать выбора неправильного цвета фона для своего сайта.

Белый фон

Если вы сомневаетесь, выберите светлый или белый фон. Использование светлого оттенка позволяет изображениям или продукту действительно выделяться, особенно если визуальные элементы имеют заметную цветовую палитру. Мы можем сравнить это с покраской комнаты в белый цвет; фон не только украшает страницу, но и позволяет зрителю сосредоточиться на предлагаемом продукте.

Выбор белого фона позволяет зрителям сосредоточиться на визуальных эффектах и сообщениях. Макет через nelelena. Изображение через Photographee.eu.

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

Черный фон

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

Выбор черного фона добавит драматизма и яркости любой странице или заголовку. Макет через nelelena. Фон через Таню Збродко.

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

При переходе в темный режим вам не нужно довольствоваться только черным цветом (#000000). Вы также можете ввести теплые или более холодные оттенки для уникального оттенка, который соответствует вашему веб-сайту. Как всегда, попробуйте поэкспериментировать с разными оттенками, чтобы увидеть, какой именно оттенок больше всего влияет на дизайн вашего сайта.

Фирменные цветные фоны

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

Фирменные цвета могут стать отличным источником вдохновения для фона вашего веб-сайта. Макет через nelelena. Изображение предоставлено Алимом Якубовым.

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

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

Лучшие цвета кнопок

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

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

Используйте насыщенные или контрастные оттенки для призыва к действию. Макет через nelelena. Изображение предоставлено Darko, 1981.

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

Лучшие цвета текста

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

Сделайте текст разборчивым за счет контраста его цвета с фоном.

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

Лучшая цена Цвета

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

При оформлении сайта всегда обращайте внимание на цвет цены. Макет через nelelena. Изображение через ImYanis.

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

Цвета, которых следует избегать

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

Если веб-сайт плохо спроектирован или на нем трудно ориентироваться, потребители могут покинуть веб-сайт и искать альтернативы в другом месте. Опыт потребителя может определить, совершает ли бизнес продажу. При создании веб-сайта важно помнить, какие оттенки подходят для фона, а какие нет для текста.

Цвета, которых следует избегать для фона

Цвет фона вашего веб-сайта обрамляет остальные визуальные элементы и текст. Если фон не соответствует содержанию веб-сайта, весь веб-сайт может показаться неприятным.

Конфликтующие цветовые палитры могут создавать неприятные впечатления от веб-сайта. Изображение через визуальную генерацию.

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

Яркий, насыщенный фон часто затмевает смысл веб-сайта. Макет через nelelena. Изображение через Allies Interactive.

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

Цвета, которых следует избегать для кнопок

Для веб-сайта лучше всего использовать выделяющиеся цвета, например основные или дополнительные оттенки. Некоторые цвета, которых следует избегать при разработке веб-сайта, включают те, которые уходят в пространство или конфликтуют с остальной палитрой вашего веб-сайта. Создание кнопок, которые трудно определить, может привести к снижению взаимодействия с потребителем.

Выбор светлого цвета для кнопок может затруднить их обнаружение. Макет через nelelena. Изображение через My Ocean Production.

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

Цвета, которых следует избегать для текста

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

Использование одинаковых или конфликтующих оттенков для текста может повлиять на удобочитаемость сайта. Макет через nelelena. Изображение через vientocuatroestudio.

Установите для типографики светлый или темный оттенок, чтобы сохранить высокую контрастность текста. Использование несоответствующих оттенков для типографики, таких как зеленый лайм на оранжевом фоне, или выбор одинаковых оттенков для текста и фона может сильно повлиять на общее впечатление от веб-сайта.

Цвета, которых следует избегать при определении цен

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

Выбор цвета цены, похожего на фон, может затруднить чтение. Макет через nelelena. Изображение через Kom_Pornnarong.

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

Обложка через Pure Solution.

Ищете другие способы сделать свой веб-сайт заметным? Ознакомьтесь со следующими статьями:

30 идей освежающей цветовой палитры для вашего веб-сайта
Черный фон на веб-сайтах: как сделать это правильно
Лучшие шрифты и сочетания шрифтов для веб-сайтов и интернет-магазинов
Как создать веб-сайт: 10 золотых правил для начинающих
Простые советы по дизайну макета веб-сайта, которым может следовать каждый

Бизнес Дизайн Ресурсы для дизайна Маркетинг малый и средний бизнес Советы и руководства

Почему всегда следует устанавливать цвет фона

Raphael Schweikert прокомментировал первый пост этой серии и сделал несколько поясняющих замечаний:

Я помню, в 90-е годы фон большинства браузеров был серым. IE был единственным, у которого по умолчанию был белый фон браузера. Другие последовали их примеру.

Даже если вы, как и я, не жили в те времена, вы наверняка сталкивались с этими серыми скриншотами из прошлого.

Итак, Internet Explorer принял решение, которое должно было изменить Интернет таким, каким мы его знаем сейчас: белым.

Фанатская теория: на самом деле Гэндальф — это Internet Explorer. Заманчивое, но опасное кольцо — это JavaScript. Иди пересмотри их сейчас.

Рафаэль также объяснил, что вы все еще можете это изменить. В Firefox это просто:

Перейдите на about:config
Поиск параметра browser.display.background_color
Значение по умолчанию: #ffffff . Измени это!

Это не секрет разработчика: все параметры, упомянутые в этом посте, могут быть настроены любым пользователем с помощью более удобного интерфейса.

Панель конфигурации цвета в Firefox

Не каждый браузер обрабатывает это одинаково: Chrome, например, поощряет использование расширений и тем. Но вот в чем дело: у пользователя не обязательно будет белый фон браузера. Как всегда, предположения — наши враги. Мы ничего не знаем.

Допустим, я поклонник темного режима и установил цвет фона браузера на #000000 .

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

Успокаивающий черный цвет заполняет экран, пока загружается новый веб-сайт

. Пользователь Reddit объяснил это в сообщении под названием «Как не ослепнуть белым светом при открытии нового сайта». Это действительно немедленное улучшение, но это еще не все.

Еще один пост, название которого мне очень нравится, дополняет картину: я изменил цвет фона на черный. Теперь я ничего не вижу.

К сожалению, установив черный фон, этот пользователь сделал сеть… невидимой.

Помните, что объясняет w3c:

Если фон холста не непрозрачен, то, что просвечивает, зависит от UA.

Это означает, что если вы не установите цвет фона для своей страницы (который будет заполнять холст), фон браузера будет просвечиваться.

Вы можете видеть фон браузера, если холст прозрачен, потому что цвет фона не установлен.

Хотя многие веб-сайты явно устанавливают свой белый фон, это не всегда так, и именно поэтому сеть может стать невидимой.

Вот как выглядит TechCrunch с черным фоном моего браузера:

Трудно читать? Вот что будет делать черный текст на черном фоне браузера. Действительно, CSS TechCrunch не устанавливает цвет фона.

Исправить очень просто:

 body {
  цвет фона: белый;
}

Войти в полноэкранный режимВыйти из полноэкранного режима

Мы не меняли фон браузера: он по-прежнему черный. Но холст, который был прозрачным, теперь белый.

Итак, вот совет от Рафаэля:

Я установил [цвет фона браузера] на серый, чтобы проверить, не забыл ли я случайно добавить background:white на страницу, которая должна иметь белый фон.

Похоже, это отличный совет, который побудил меня написать этот новый пост. Недостатком является то, что вы увидите серый фон на TechCrunch и других «прозрачных веб-сайтах» (если, конечно, вы не используете отдельные среды для разработки и случайного просмотра).

Хотя это не является репрезентативным для «Интернета», я протестировал 100 самых посещаемых веб-сайтов, и 14% из них имели прозрачное полотно , пропускающее желтый цвет фона, который я использовал в своем расследовании.

Не очень здоровый цвет фона

Среди них: The Wall Street Journal, Paypal, Vimeo, AOL, BBC…

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

Вы можете подумать:

Если пользователь решит использовать черный цвет фона, может быть, у него есть причина, и мы не должны вмешиваться?

Это сложно. Кто меняет «универсальный» белый фон?

Это может быть пользователь. Это может быть сам пользовательский агент (это может быть компьютер, телефон, а также множество различных устройств).

Статистику об этом получить невозможно, но мы можем быть уверены в том, что неопределенная часть наших пользователей не будет иметь белый фон. А так прозрачный сайт сломается.

За исключением случаев, когда пользователь/браузер также меняет цвет текста по умолчанию. В Firefox это легко. Обновите параметр browser.display.foreground_color .

Это значение будет использоваться для любого текста, цвет которого не задан в CSS. Вернемся к TechChrunch.

Это не очень хорошо. Да, часть текста теперь белая. Но это только текст, цвет которого не задан в CSS. Поскольку цвет текста обычно немного отличается от черного, большая часть контента по-прежнему не может быть прочитана.

Чтобы это работало, вам нужен веб-сайт без явного цвета фона и без явного цвета текста .

На веб-сайте motherfuckingwebsite.com нет CSS, поэтому он работает хорошо.

Обратите внимание, что вы также можете установить цвет ссылок, выделенного текста и т. д., но это то же правило: это будет работать, только если не применяется CSS, что маловероятно для большинства веб-сайтов. Цветовое столкновение обязательно произойдет.

Итак, я думаю, есть два решения:

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

Вот почему вы можете добавить в шаблон следующие строки:

 body {
  цвет фона: белый;
  черный цвет;
}

Войти в полноэкранный режимВыйти из полноэкранного режима

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

Я большой сторонник уважения выбора пользователя (или его браузера). CSS, который мы пишем, должен быть не императивным приказом для создания идеальной по пикселям страницы, а набором указаний, которые браузер может использовать, среди прочего, чтобы знать, как должен выглядеть результат.

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

К счастью, оба подхода можно согласовать, потому что наши браузеры умны. И это последняя настройка, о которой я хочу поговорить: browser.display.document_color_use .

Когда для этого параметра установлено значение 2 , Firefox заменит все цвета CSS на те, которые определены пользователем или самим Firefox. Другими словами:

Меня не волнует ваш CSS, просто используйте эти цвета!

Давайте снова попробуем темный режим, установив цвет фона Firefox на черный, а цвет переднего плана на белый. Только на этот раз CSS не сможет переопределить наш выбор, благодаря document_color_use настройка.

Теперь работает. Я даже изменил цвет ссылок на что-то более подходящее. CSS не изменился, но Firefox переопределяет его.

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

Я протестировал 14 прозрачных сайтов из топ-100, и каждый из них работал хорошо. По моим оценкам, примерно 95% контента было отлично читабельно с моей настроенной цветовой схемой. Но, конечно, это не идеально.

Домашняя страница Vimeo вполне разборчива… за исключением логотипа и ссылок в правом верхнем углу.

Обратите внимание, что при использовании параметра document_color_use затрагиваются все веб-сайты, а не только прозрачные.

У dev.to есть фоновый цвет, который переопределяется моими настройками Firefox

. Он не может заменить созданный вручную темный режим (а у dev. to он есть), но в большинстве случаев вы получаете хороший результат.

Более важный, чем темный режим, это отличный вариант для доступности. Вот TechCrunch с Параметр document_color_use включен и цветовая схема Firefox по умолчанию:

Вау, сколько ссылок. Почти все здесь внутри тегов, отсюда и синий цвет. Давайте немного прокрутим и сравним оригинальный дизайн с тем, что у нас есть сейчас:

Вверху: поведение по умолчанию. Внизу: цветовая схема Firefox.

При принудительной цветовой схеме Firefox вы можете видеть чистый черный цвет для текста (вместо средне-серого в исходном дизайне) и синий для ссылок. Это немного жестоко, но отлично подходит для визуальной доступности.

Собственно, это то, что автоматически произойдет в Windows, если вы включите «режим высокой контрастности» ОС. Никаких манипуляций с браузером не требуется.

При этом это не может заменить хороший дизайн доступности .