Skip to content Skip to main navigation Report an accessibility issue

Context Color in the Background

Documentation

Do
  • Color can convey information, it should not be used as decoration.
Don't
  • Do not rely only on color to convey information. This can cause accessibilty problems or become meaningless when printed to a black and white printer. For example, when giving a warning be sure to state it with icons or text as well as changing it’s color.
EXAMPLE

Shhhhh!

The Form Got Finished!

There were mistakes.

You forgot to fill in these elements.

Will Robinson! Will Robinson!

Code

HTML
<p class="bg-muted">Shhhhh!</p>
<p class="bg-success">The Form Got Finished!</p>
<p class="bg-info">There were mistakes.</p>
<p class="bg-warning">You forgot to fill in these elements.</p>
<p class="bg-danger">Will Robinson! Will Robinson!</p>