Contrast
Set color or background to contrast color or an accessible color by using SaSS function.
Contrast Colors
Use .fg-* and .bg-* classes in combination with .fg-contrast and .bg-contrast classes to set opposite property to contrast color defined by design tokens.
Contrast Text
Use fg-contrast with bg-* classes.
Default background with contrast color text.
Alternate background with contrast color text.
Primary background with contrast color text.
Secondary background with contrast color text.
Neutral background with contrast color text.
Danger background with contrast color text.
Success background with contrast color text.
Warning background with contrast color text.
Info background with contrast color text.
Black background with contrast color text.
White background with contrast color text.
<p class="bg-default fg-contrast p-xsmall">Default background with contrast color text.</p>
<p class="bg-alternate fg-contrast p-xsmall">Alternate background with contrast color text.</p>
<p class="bg-primary fg-contrast p-xsmall">Primary background with contrast color text.</p>
<p class="bg-secondary fg-contrast p-xsmall">Secondary background with contrast color text.</p>
<p class="bg-neutral fg-contrast p-xsmall">Neutral background with contrast color text.</p>
<p class="bg-danger fg-contrast p-xsmall">Danger background with contrast color text.</p>
<p class="bg-success fg-contrast p-xsmall">Success background with contrast color text.</p>
<p class="bg-warning fg-contrast p-xsmall">Warning background with contrast color text.</p>
<p class="bg-info fg-contrast p-xsmall">Info background with contrast color text.</p>
<p class="bg-black fg-contrast p-xsmall">Black background with contrast color text.</p>
<p class="bg-white fg-contrast p-xsmall">White background with contrast color text.</p>Accessibility tip: Color alone shouldn't convey meaning as it's not perceived by assistive technology users. Ensure clarity through text with adequate contrast, ARIA attributes where needed, and consider using .visually-hidden for screen reader content.
Contrast Background
Use bg-contrast with fg-* classes.
Default text with contrast color background.
Alternate text with contrast color background.
Primary text with contrast color background.
Secondary text with contrast color background.
Neutral text with contrast color background.
Danger text with contrast color background.
Success text with contrast color background.
Warning text with contrast color background.
Info text with contrast color background.
Black text with contrast color background.
White text with contrast color background.
<p class="fg-default bg-contrast p-xsmall">Default text with contrast color background.</p>
<p class="fg-alternate bg-contrast p-xsmall">Alternate text with contrast color background.</p>
<p class="fg-primary bg-contrast p-xsmall">Primary text with contrast color background.</p>
<p class="fg-secondary bg-contrast p-xsmall">Secondary text with contrast color background.</p>
<p class="fg-neutral bg-contrast p-xsmall">Neutral text with contrast color background.</p>
<p class="fg-danger bg-contrast p-xsmall">Danger text with contrast color background.</p>
<p class="fg-success bg-contrast p-xsmall">Success text with contrast color background.</p>
<p class="fg-warning bg-contrast p-xsmall">Warning text with contrast color background.</p>
<p class="fg-info bg-contrast p-xsmall">Info text with contrast color background.</p>
<p class="fg-black bg-contrast p-xsmall">Black text with contrast color background.</p>
<p class="fg-white bg-contrast p-xsmall">White text with contrast color background.</p>Accessible Colors
With .fg-a11y and .bg-a11y classes to automatically determine the accessible fg-color or bg-color for particular context color using Bootstrap's Sass color-contrast() function.
Heads up! There's currently no support for a CSS-native color-contrast function, so we use Bootstrap's via Sass. This means that customizing context colors via CSS variables may cause color contrast issues with these utilities.
Accessible Text
Use fg-a11y to set accessible fg-color for bg-* background colors.
Default background with accessible color text.
Alternate background with accessible color text.
Primary background with accessible color text.
Secondary background with accessible color text.
Neutral background with accessible color text.
Danger background with accessible color text.
Success background with accessible color text.
Warning background with accessible color text.
Info background with accessible color text.
Black background with accessible color text.
White background with accessible color text.
<p class="bg-default fg-a11y p-xsmall">Default background with accessible color text.</p>
<p class="bg-alternate fg-a11y p-xsmall">Alternate background with accessible color text.</p>
<p class="bg-primary fg-a11y p-xsmall">Primary background with accessible color text.</p>
<p class="bg-secondary fg-a11y p-xsmall">Secondary background with accessible color text.</p>
<p class="bg-neutral fg-a11y p-xsmall">Neutral background with accessible color text.</p>
<p class="bg-danger fg-a11y p-xsmall">Danger background with accessible color text.</p>
<p class="bg-success fg-a11y p-xsmall">Success background with accessible color text.</p>
<p class="bg-warning fg-a11y p-xsmall">Warning background with accessible color text.</p>
<p class="bg-info fg-a11y p-xsmall">Info background with accessible color text.</p>
<p class="bg-black fg-a11y p-xsmall">Black background with accessible color text.</p>
<p class="bg-white fg-a11y p-xsmall">White background with accessible color text.</p>Accessible Background
Use bg-a11y to set accessible bg-color for fg-* colors.
Default text with accessible color background.
Alternate text with accessible color background.
Primary text with accessible color background.
Secondary text with accessible color background.
Neutral text with accessible color background.
Danger text with accessible color background.
Success text with accessible color background.
Warning text with accessible color background.
Info text with accessible color background.
Black text with accessible color background.
White text with accessible color background.
<p class="fg-default bg-a11y p-xsmall">Default text with accessible color background.</p>
<p class="fg-alternate bg-a11y p-xsmall">Alternate text with accessible color background.</p>
<p class="fg-primary bg-a11y p-xsmall">Primary text with accessible color background.</p>
<p class="fg-secondary bg-a11y p-xsmall">Secondary text with accessible color background.</p>
<p class="fg-neutral bg-a11y p-xsmall">Neutral text with accessible color background.</p>
<p class="fg-danger bg-a11y p-xsmall">Danger text with accessible color background.</p>
<p class="fg-success bg-a11y p-xsmall">Success text with accessible color background.</p>
<p class="fg-warning bg-a11y p-xsmall">Warning text with accessible color background.</p>
<p class="fg-info bg-a11y p-xsmall">Info text with accessible color background.</p>
<p class="fg-black bg-a11y p-xsmall">Black text with accessible color background.</p>
<p class="fg-white bg-a11y p-xsmall">White text with accessible color background.</p>With components
Use them in place of combined .text-* and .bg-* classes, like on badges:
<span class="badge primary">Primary</span>
<span class="badge fg-contrast bg-primary">Primary</span>
<span class="badge fg-a11y bg-primary">Primary</span>
<span class="badge secondary">Info</span>
<span class="badge fg-contrast bg-secondary">Info</span>
<span class="badge fg-a11y bg-secondary">Info</span>Or on cards:
Some quick example text to build on the card title and make up the bulk of the card's content.
Some quick example text to build on the card title and make up the bulk of the card's content.
<div class="card fg-a11y bg-primary mb-medium" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-content">
<p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card fg-a11y bg-info" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-content">
<p class="card-body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>