Un buen conjunto de colores para un mensaje de alerta sobre un fondo oscuro

Creo que todo lo que necesitas hacer es cambiar el color de tu texto a Blanco:

Cualquier color de alto contraste funcionaría según su imagen. No tiene que ser rojo o una forma de rojo/rosa. Un amarillo, naranja, azul más claro, violeta, etc., todo funcionaría. Lo único que haría es evitar el verde para evitar una impresión de "éxito". Puede personalizar fácilmente la alerta para que coincida con cualquier esquema de color existente que pueda estar utilizando.

La clave es simplemente mantener alto el contraste.

Obviamente, el rojo también funciona, pero también debe conservar el contraste entre el fondo rojo y el texto. El texto rojo sobre un fondo rojo simplemente no es lo suficientemente alto en contraste.

Tienes razón con que los colores no son suficientes para el escenario: no hay suficiente contraste para que sea fácil de leer. Aquí también hay una buena lectura sobre la redacción, que podría ser útil: también me alejaría de la redacción 'Ups' :-)

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

Para el color, supongo que recomendaría un rojo translúcido o 'rosa claro', un color bastante estándar con mensajes de error y suficiente contraste con la escritura en rojo oscuro.

(Soy +1 en la respuesta anterior porque mencionan un buen punto sobre la iconografía).

Hasta cierto punto, la cuestión del color puede tener más que ver con la estética, que es más adecuada para el intercambio de pilas GD.

Sin embargo, desde el punto de vista de la usabilidad, la cuestión más importante cuando se trata de fondos claros u oscuros es asegurarse de que el elemento tenga suficiente contraste.

Con ese fin, sugeriría usar algo como esta herramienta de contraste de color para medir los colores de primer plano y de fondo.

Los valores actuales que está utilizando son demasiado similares:

No importa de qué color sea si sus usuarios (incluidos aquellos con una visión menos que perfecta) no pueden leerlo.

O haría el fondo más oscuro y el texto más claro si quiere que ambos sean rojos, o simplemente haría que el texto fuera blanco.

¿Has probado alguna iconografía que llame la atención sobre el error en lugar de colorear la región? Podrías usar un cuadro de color claro (como el rojo que tienes) con texto negro. Eso sería muy fácil de leer y el fondo claro resaltaría contra el fondo. A continuación, utilice un icono como este en el cuadro para llamar la atención.

Reuní un ejemplo rápido a continuación: no creo que usaría blanco, pero eso es lo que era el fondo de la imagen de muestra que encontré, probablemente más como un gris claro o algo así:

Ese color de fuente rojo lo está matando, intente hacerlo más claro (quizás blanco, su fondo de alerta ya es lo suficientemente rojo).

Un buen método general que sigo es usar siempre texto en blanco o negro. Simplemente sumo cada uno de los componentes RGB y los promedio, y luego tomo la decisión de blanco o negro en función de qué lado de 127 se encuentran.

#9C2B2Ea decimal esRGB(156, 43, 46)

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

81.66 está más cerca de 0 que de 255, por lo que pondría texto en blanco en este ejemplo en particular.