色と背景

コントラストのある前景の色で背景色を設定します。

このページの内容

概要

色と背景のヘルパーは、.text-*ユーティリティと.bg-*ユーティリティの機能を1つのクラスに組み合わせたものです。Sassのcolor-contrast()関数を使用して、特定のbackground-colorに対するコントラストのあるcolorを自動的に決定します。

注意点！現在、CSSネイティブのcolor-contrast関数はサポートされていません。そのため、Sassを使用して独自の関数を使用しています。これは、CSS変数を使用してテーマの色をカスタマイズすると、これらのユーティリティで色のコントラストの問題が発生する可能性があることを意味します。

コントラストのある色を使用したプライマリー

コントラストのある色を使用したセカンダリー

コントラストのある色を使用した成功

コントラストのある色を使用した危険

コントラストのある色を使用した警告

コントラストのある色を使用した情報

コントラストのある色を使用したライト

コントラストのある色を使用したダーク

html

<div class="text-bg-primary p-3">Primary with contrasting color</div>
<div class="text-bg-secondary p-3">Secondary with contrasting color</div>
<div class="text-bg-success p-3">Success with contrasting color</div>
<div class="text-bg-danger p-3">Danger with contrasting color</div>
<div class="text-bg-warning p-3">Warning with contrasting color</div>
<div class="text-bg-info p-3">Info with contrasting color</div>
<div class="text-bg-light p-3">Light with contrasting color</div>
<div class="text-bg-dark p-3">Dark with contrasting color</div>

アクセシビリティに関するヒント：色のみに意味を持たせることは、視覚的な指示しか提供しません。これは、スクリーンリーダーなどの支援技術のユーザーには伝わらないでしょう。十分な色のコントラストを持つ可視テキストなど、コンテンツ自体から意味が明らかであるか、.visually-hiddenクラスで非表示にした追加テキストなど、代替手段で含めるようにしてください。

コンポーネントと共に

バッジなど、組み合わせた.text-*と.bg-*クラスの代わりに使用します。

プライマリー情報

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-info">Info</span>

またはカードで使用します。

ヘッダー

カードのタイトルを基に構築し、カードの内容の大部分を構成する簡単な例示テキストです。

ヘッダー

カードのタイトルを基に構築し、カードの内容の大部分を構成する簡単な例示テキストです。

html

<div class="card text-bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">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 text-bg-info mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>