06Цвет и контрастиз архива
Серый #9a9a9a для подписей под работами, правда всё так плохо?
Алина Л показала 8 апреля 2025
- Правки
- 6 правок
- Последняя
- 15 апреля 2025
- В разборе
кейс
Первый настоящий веб-заказ: лендинг для знакомой керамической мастерской в Ростове. Фон белый, под фотографиями изделий подписи вида «Чашка, 350 мл, 1800 ₽» серым #9a9a9a, 14 px. Мне нравится, что серый не спорит с фото, всё спокойно и дорого. Хозяйка мастерской говорит, что её мама не может прочитать цену. Я думаю, мама просто смотрит с телефона без очков, но всё равно сомневаюсь. Как иллюстратору мне важно, чтобы фотографии были главными, а текст не перетягивал внимание. Если сделать подписи чёрными, мне кажется, сетка из карточек станет пёстрой. Подписи в две строки, название и цена через запятую.
правка 1
#9a9a9a на белом это около 2,8:1, а для текста 14 px нужно 4,5:1. Мама не виновата, это не проходит. Причём цена в подписи главное, её как раз надо делать тёмной. Серым можно объём, а цену в #222.
правка 2
Спокойно и дорого - это когда цену видно. Невидимая цена не дорого, а неудобно.
правка 3
но ведь у всех красивых сайтов так, светло-серые подписи, воздух. сделаю тёмным, и будет прайс в магазине хозтоваров. мне кажется, 4,5:1 это больше для госсайтов
правка 4
правка принятаавтор кейса взял в работу
в ответ @Алина Л
Алина, 4,5:1 не для госсайтов, это минимум для обычного текста, вот сам стандарт: https://www.w3.org/TR/WCAG21/ . Для крупного текста, от 24 px или от 18,7 px жирным, хватает 3:1. Но дело даже не в стандарте. Посмотри, кто покупает керамику за 1800: часто это женщины 35-60, подарки мамам и подругам. Я бы сделала простую проверку: дала телефон с лендингом пятерым людям из этой аудитории, попросила назвать цену третьей чашки и посмотрела, кто щурится или растягивает экран пальцами. Если хоть один, ответ есть.
Как сохранить спокойствие: название изделия #6b6b6b, это около 5,3:1, объём тем же серым, а цену #222 и на 1-2 px крупнее. Серая подпись с тёмной ценой выглядит аккуратно и ничуть не похожа на хозтовары.
Как сохранить спокойствие: название изделия #6b6b6b, это около 5,3:1, объём тем же серым, а цену #222 и на 1-2 px крупнее. Серая подпись с тёмной ценой выглядит аккуратно и ничуть не похожа на хозтовары.
правка 5
Сделала, как Надя написала. Название #6b6b6b, цена тёмная 16 px. Проверку тоже провела, правда на троих: мама хозяйки, моя тётя и соседка по мастерской. На старой версии двое растянули экран, на новой никто. Хозяйка сказала, что так даже солиднее. Признаю, была не права.
правка 6
Хороший пример для студентов, сохраню себе как разбор.