<?xml version="1.0" encoding="utf-8"?>

Adjust error color contrast

Have you ever noticed how road signs are highly visible in the rain, snow, and even at nighttime? These signs carry essential information, and one way to ensure their visibility is to use the right contrast ratio.

Error messages in apps are similarly important. That's why they should have high color contrast and be immediately recognizable. Material Design recommends using a semi-transparent overlay with 40% opacity over the light mode's red for errors.[1]The original error color is #B00020, which is transformed to #CF6679 by overlaying 40% white. It now meets AA-level contrast standards in dark mode.

Improve your UX & Product skills with interactive courses that actually work