Перейти к основному содержимому

Вопрос-ответ Дизайн и UX

Как сделать цвет фона сайта?

Алексей, Самара 377 просм.

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

Елена Захарова UI/UX-дизайнер

ответил

эксперт

Цвет фона сайта задаётся CSS-свойством background-color, и то, где именно его менять, зависит от платформы: в конструкторах вроде Tilda или в теме WordPress с настройками через Customizer это делается в панели управления без кода, а в сайте на индивидуальной вёрстке - правкой файла стилей, куда без разработчика лучше не лезть, чтобы не сдвинуть остальную вёрстку.

В WordPress первым делом стоит проверить, поддерживает ли ваша тема смену фона через "Внешний вид - Настроить": у многих тем там есть готовый пункт с выбором цвета. Если такого пункта нет, потребуется правка CSS через "Дополнительный CSS" в том же разделе - туда можно добавить строку вроде body { background-color: #f5f5f5; } без риска сломать остальной сайт, потому что дополнительный CSS не трогает файлы темы напрямую.

Важный момент, который часто упускают - контраст. По рекомендациям WCAG 2.1 (международный стандарт доступности веб-контента) для обычного текста нужен контраст между текстом и фоном не ниже 4,5:1, иначе часть посетителей будет с трудом читать сайт, особенно на ярком солнце с телефона. Светло-серый фон с тёмно-серым текстом почти всегда безопасен, а вот пастельные цвета с белым текстом стоит проверять - бесплатный инструмент WebAIM Contrast Checker показывает точное значение по двум hex-кодам.

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

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

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

Задать свой вопрос

Вопросы проходят модерацию. Ответ специалиста студии публикуется на сайте в течение пары дней.

Похожие вопросы

Все вопросы темы «Дизайн и UX»

Нужен сайт или доработка?

Опишите, что нужно сделать. Вернёмся с расчётом и предложением по структуре.