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

Я думаю, все, что вам нужно сделать, это изменить цвет текста на белый:

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

Ключ в том, чтобы просто поддерживать высокую контрастность.

Очевидно, что красный тоже работает, но вам также нужно сохранить контраст между красным фоном и текстом. Красный текст на красном фоне просто недостаточно контрастен.

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

http://uxmovement.com/forms/how-to-make-your-form-error-messages-more-reassuring/

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

(Я +1 к ответу выше, потому что они поднимают хороший вопрос об иконографии.)

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

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

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

Текущие значения, которые вы используете, слишком похожи:

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

Я бы либо сделал фон темнее, а текст светлее, если вы хотите, чтобы они оба были красными, либо просто сделал текст белым.

Вы пробовали какую-нибудь иконографию, чтобы привлечь внимание к ошибке вместо того, чтобы раскрашивать область? Вы можете использовать светлое поле (например, красное, которое у вас есть) с черным текстом. Это было бы очень легко читать, и светлый фон выделялся бы на фоне. Затем используйте значок, подобный этому, в поле для привлечения внимания.

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

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

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

#9C2B2Eдо десятичнойRGB(156, 43, 46)

(156 + 43 + 46)/3 ~= 81,67

81,66 ближе к 0, чем к 255, поэтому в этом конкретном примере я бы поместил белый текст.