Ignite UI for Angular
コンポーネント 使用開始

color

#

function adaptive-contrast public コードを表示 open_in_new

指定された色に対して CSS ランタイムで計算された相対色 (黒または白) を返します。

例
.my-component {
   --bg: #09f;
   background: var(--bg);
   color: adaptive-contrast(var(--bg)); // hsl(from color(from var(--bg) var(--y-contrast)) h 0 l)
 }
パラメーター
名前 型 デフォルト 説明
$color *
Color
- 計算に使用する基本色。
#

function text-contrast public コードを表示 open_in_new

渡された色のコントラスト色を返します。

warning 非推奨

Use adaptive-contrast instead.

例
.my-component {
   background: #09f;
   color: text-contrast(#09f);
 }
パラメーター
名前 型 デフォルト 説明
$background *
Color
- コントラスト色/前景色を返すために使用される背景色。
$foreground
Color | List<Color>
#fff 指定された背景で使用できる 前景色のリスト。
$contrast
AAA | AA | A
AAA WCAG 2.0 規格に準拠したコントラスト レベル。
必要条件
参照
外部リンク
#

function to-hsl public コードを表示 open_in_new

指定された色の色相、彩度、および明度の値のコンマ区切りリストを返します。

warning 非推奨

Not needed anymore and will be removed in the future.

例

#000 を HSL 値リストに変換します。

$hsl-list: to-hsl(#000); // (0deg, 0%, 0%);
パラメーター
名前 型 デフォルト 説明
$color *
Color
- HSL 値リストに変換される色。
#

function luminance public コードを表示 open_in_new

指定された色の輝度を計算します。

例
$white: luminance(#fff); // 1
$blue: luminance(#09f); // 0.3
$black: luminance(#000); // 0
パラメーター
名前 型 デフォルト 説明
$color *
Color
- 輝度が計算するための色。
外部リンク
#

mixin configure-colors public コードを表示 open_in_new

カラー モジュールを構成します。

例
.enhanced-accessibility {
   @include configure-colors(true);
 }
パラメーター
名前 型 デフォルト 説明
$enhanced-accessibility
Boolean
null チャートテーマに対して、色覚に配慮したブラシなどの機能を有効にします。
参照
#

mixin adaptive-contrast public コードを表示 open_in_new

WCAG コントラスト計算用の CSS カスタム プロパティを設定します。 これらのプロパティは、WCAG アクセシビリティ ガイドラインに基づいて 適切なテキストの色を決定するために使用されます。

例

デフォルトの AA レベルでミックスインを使用します。

.my-component {
  @include adaptive-contrast();
}
例

AAA レベルでミックスインを使用します。

.my-component {
  @include adaptive-contrast('aaa');
}
例

生成された CSS カスタムプロパティ

:root {
  --ig-wcag-a: 0.31;    // レベル A の閾値
  --ig-wcag-aa: 0.185;   // レベル AA の閾値
  --ig-wcag-aaa: 0.178;  // レベル AAA の閾値
  --ig-contrast-level: var(--ig-wcag-aa);
  --y: clamp(0, (y / var(--ig-contrast-level) - 1) * -infinity, 1);
  --y-contrast: xyz-d65 var(--y) var(--y) var(--y);
}
パラメーター
名前 型 デフォルト 説明
$level
String
'aa' WCAG コントラスト レベル ('a'、'aa'、または 'aaa')

ドキュメントを検索