CSS Colors

Example

<p class="text-header">.text-header</p>
<p class="text-navy">.text-navy</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning">.text-warning</p>
<p class="text-white bg-dark-gray py-1">.text-white</p>
<p class="text-caption">.text-caption</p>

Note: The State of Michigan has its own selection of colors that it uses on its websites for branding and alert purposes. For more information on this, click here.

Background color

Like contextual text color classes, you can apply contextual classes to set the background of an element. It's worth noting that background utilities do not alter the color property. Therefore, in specific scenarios, you may need to complement them with the .text-* utilities.

<div class="p-2 mb-1 bg-navy text-white">
  .bg-navy
</div>
<div class="p-2 mb-1 bg-white">
  .bg-white
</div>
<div class="p-2 mb-1 bg-light-gray" style="border: 1px solid #d0d0d0"}>
  .bg-light-gray
</div>
<div class="p-2 mb-1 bg-dark-gray text-white">
  .bg-dark-gray
</div>

Convey meaning

Utilizing color solely for conveying meaning offers a visual cue that may not be accessible to users of assistive technologies like screen readers. It is essential to guarantee that the information conveyed by the color is either explicitly evident from the content itself, such as visible text, or is supplemented through alternative methods, like incorporating additional text hidden with the .sr-only class.