コンテンツにスキップ
Cavalry 中文文档

Contrasting Color

概要

「概要」という見出しのセクション

入力色と対比する色を出力します。

UI デザインでよくあるタスクは、背景色と十分なコントラストを持つテキストやアイコンの色を選び、はっきりと読みやすくすることです。Contrasting Color Utility はこのプロセスを自動化し、最新の WCAG アクセシビリティ基準 への準拠を保証します。

UI

「UI」という見出しのセクション

Mode - Input Color を Primary Color に対してテストするコントラスト比を設定します：

  • Most Contrasting - Input Color と最もコントラストの強い色（Primary または Secondary）を出力します。
  • Least Contrasting - Input Color と最もコントラストの弱い色（Primary または Secondary）を出力します。
  • 3:1 - 最小限のレベル。A レベル（必須準拠）とも呼ばれます。
  • 4.5:1 - ほとんどのユーザーにとって使用可能でアクセシブル。AA レベル（許容可能な準拠）とも呼ばれます。
  • 7:1 - ゴールドスタンダードのアクセシビリティレベル。AAA レベル（最適な準拠）とも呼ばれます。
  • Custom - カスタム Custom Ratio を設定します。

Custom Ratio - カスタム比率 [value]:1 を設定します。

Input Color - Primary Color に対してテストする色を設定します。通常、テキストやアイコンの色です。

Primary Color - Input Color に対してテストする色を設定します。コントラスト比テストに合格した場合、この色が出力されます。

Secondary Color - Primary Color がコントラスト比テストに不合格だった場合に出力される代替色を設定します。

  1. Rectangle を作成します。
  2. Ellipse を作成します：
    • Radius を 70 に設定。
    • Fill を無効に。
    • Stroke を有効に。
  3. Rectangle と Ellipse を Group 化します。
  4. Group を選択した状態で、Shelf の Duplicator アイコンをクリックします。
  5. Duplicator の Grid Size（Width と Height）を 500 に設定します。
  6. Color Array を作成します。
  7. Button iconAdd ボタンでさらに 3 つのインデックスを追加し、それぞれに異なる色を設定します。明暗の色を混ぜてください。
  8. colorArray.id→rectangle.fill.color を接続します。
  9. Contrasting Color Utility を作成します。
  10. colorArray.id→contrastingColor.inputColor を接続します。
  11. contrastingColor.id→ellipse.stroke.color を接続します。

明るい色の矩形上にある楕円の Stroke 色は Primary Color に設定され、その逆も同様です。

ベストプラクティスは、互いにコントラストのある Primary と Secondary の色を選択し、一方が不合格でも他方が十分なコントラストを持って読みやすくなるようにすることです。