06Цвет и контрастиз архива
Белый текст на фирменном оранжевом #ff8a00, а цвет менять не дают
arsen_nik показал 29 ноября 2024
- Правки
- 4 правки
- Последняя
- 14 декабря 2024
- В разборе
кейс
Сайт для сети шиномонтажей в Ярославле, сдаём до 1 декабря. Сезон переобувки уже прошёл, а сайт нужен «вчера». Есть брендбук, фирменный оранжевый #ff8a00, все кнопки по брендбуку оранжевые с белым текстом. Контраст 2,4:1, на улице текст на кнопке вообще не видно. Менять цвет заказчик не даёт: «у нас вывески такие». Мы уже пробовали увеличить текст на кнопке до 18 жирным, стало чуть лучше, но формально всё равно не проходит даже для крупного. Заказчик молодой, но упёртый, брендбук ему делали за большие деньги, и он его бережёт. Как выкручиваетесь в таких случаях?
правка 1
правка принятаавтор кейса взял в работу
Цвет можно не трогать, можно поменять то, что на нём. Два варианта:
1. Тёмный текст на оранжевом. #1a1a1a на #ff8a00 даёт около 7:1, кнопка остаётся фирменной, а читается отлично. Для шиномонтажа тёмное на оранжевом ещё и выглядит естественно, это цвета дорожных знаков и спецтехники.
2. Сделать для кнопок рабочий оттенок фирменного, темнее, например #b35600, белый на нём около 4,9:1. В брендбуках так часто и пишут: основной цвет для вывесок, затемнённый для интерфейса. Это можно предложить как дополнение к брендбуку, а не замену.
Оранжевым фоном с белым текстом даже крупные плашки не спасти, 2,4:1 не дотягивает и до 3:1 для крупного текста. Я бы показала заказчику первый вариант рядом с текущим, на телефоне.
1. Тёмный текст на оранжевом. #1a1a1a на #ff8a00 даёт около 7:1, кнопка остаётся фирменной, а читается отлично. Для шиномонтажа тёмное на оранжевом ещё и выглядит естественно, это цвета дорожных знаков и спецтехники.
2. Сделать для кнопок рабочий оттенок фирменного, темнее, например #b35600, белый на нём около 4,9:1. В брендбуках так часто и пишут: основной цвет для вывесок, затемнённый для интерфейса. Это можно предложить как дополнение к брендбуку, а не замену.
Оранжевым фоном с белым текстом даже крупные плашки не спасти, 2,4:1 не дотягивает и до 3:1 для крупного текста. Я бы показала заказчику первый вариант рядом с текущим, на телефоне.
правка 2
И не забудьте про состояния: если кнопка тёмным по оранжевому, наведение делайте темнее основного фона, а не светлее, иначе текст опять пропадёт.
правка 3
С такими заказчиками у меня работает фраза: «вывеска висит на высоте трёх метров, её видно издалека, а кнопку смотрят с телефона в руке». И показать на их же телефоне на улице. В кабинете под лампами все кнопки читаются.
правка 4
Показали оба варианта на телефоне директора, прямо на парковке у их шиномонтажа. Тёмный текст на оранжевом он выбрал сам, сказал «как наши жилеты». Сайт сдали 29 ноября. Алина, спасибо, ход с дорожными знаками зашёл лучше любых цифр контраста.