Error Messages & Warnings

For users who cannot see color or differences in color, provide design elements to support messaging, such as text, stroke, shape, patterns.

ALERT MESSAGES

Alert messages should not be comprised solely of color. It is strongly recommended to put on-page alerts, versus a modal popup, since users of a screen-reader may miss such modal dialogs.

Include icons, text, shading and patterns to bring attention to the user. For example, if a user is colorblind, they would not necessarily see a specific color box, but they could see shading or gradients, as well as icons that can call attention.

ERROR MESSAGE WITH COLOR AND TEXT

An error message should be immediately beneath a form field while a user is inputting characters, such as this example from Google Material Design Accessibility Guidelines:

PROVIDING COMBO OF TEXT, COLOR, & SHAPES

Observe the Twitter app, which has the primary user experience of composing a tweet within 140 characters. The user interface uses shape, color, and text to inform users of how much they have ‘left’ to compose.

In the screenshot below,

  1. The circle in the bottom right shows as partially filled, as I approach the maximum characters

  2. As I approach the maximum number of characters, a yellow color appears, supplemented with a remaining character count-down; and

  3. A circle disappears, with a negative sign, red, and highlighted text over where I went ‘out of the boundary’ Even if I were colorblind, I could still see the shading behind the text where I am out of range. I receive adequate information through absence of shape and the presence of text.

Twitter App workflow with in-line validation of character count limit feedback