AnyTools
🌓
色のコントラスト計算機
任意の前景色と背景色の WCAG 2.1 コントラスト比を確認し、サンプルテキストをプレビューして、AA/AAA 合格結果を即座に確認できます。
色の入力
前景色
背景色
プレビュー
サンプルテキスト
プレビュー見出しアクセシブルなインターフェイスは、活気のあるブランドカラーと、コピーを読みやすく保つのに十分なコントラストをペアリングします。
コントラスト結果
コントラスト比
19.79:1
相対輝度
前景色0.003
背景色1.000
| 基準 | 必要 | 状態 | 備考 |
|---|---|---|---|
| AA – 通常テキスト | 4.5:1 | 合格 | 本文 ≥ 4.5:1 |
| AAA – 通常テキスト | 7.0:1 | 合格 | 重要度の高いコピー ≥ 7:1 |
| AA – 大きなテキスト | 3.0:1 | 合格 | テキスト ≥ 18pt 通常または 14pt 太字 ≥ 3:1 |
| AAA – 大きなテキスト | 4.5:1 | 合格 | 大きなテキスト ≥ 4.5:1 |
| UI グラフィックス/アイコン | 3.0:1 | 合格 | 必須アイコンと視覚的な状態 ≥ 3:1 |
デザインガイダンス
比率テーブルをガードレールとして使用し、すべての状態がターゲットレベルに達するまで反復します。
- 写真にテキストを配置する場合は、透明度またはオーバーレイを追加してコントラストを維持します。
- AAA はミッションクリティカルなコピー用に予約してください。AA はほとんどのダッシュボードにとって優れたデフォルトです。
- 開発者が準拠したパレットを再利用できるように、承認された色のペアをデザインシステムに文書化します。
❓色のコントラストテストとは
色のコントラストテストは、前景と背景の輝度の差を測定することで、テキストまたはアイコンが読みやすい状態を保つことを保証します。これは WCAG とほとんどのブランドガイドラインの重要な要件です。
✨主な機能
🎨
ライブカラーピッカー
Ant Design ピッカーで前景色と背景色を調整するか、正確な HEX 値を入力します。
📊
WCAG マトリックス
通常テキスト、大きなテキスト、UI グラフィックスの AA/AAA 要件を1つのテーブルで確認できます。
🧮
正確な輝度
コントラスト比は、線形化された RGB チャネルを使用した WCAG 2.1 に従い、色ごとの輝度読み取り値が含まれます。
👁️
プレビューブロック
選択したパレットを使用して、ライブサンプルカード内で見出しと段落をテストします。
📋使用ガイド
色を選択
前景色と背景色の HEX 値を選択または貼り付けます。
比率を確認
計算されたコントラスト比と AA/AAA テーブルで合格/不合格の洞察を確認します。
コピーを調整
サンプルテキストを編集して、実際のラベル、ボタン、またはマーケティングコピーをプレビューします。
📚技術紹介
🔢相対輝度
各 RGB チャネルは、係数 0.2126、0.7152、0.0722 で輝度を計算する前に、WCAG ガンマ曲線を使用して線形値に変換されます。
⚖️コントラスト比
比率式 (L1 + 0.05) / (L2 + 0.05) は、明るい色と暗い色を比較して、デバイス間で一貫した読みやすさを確保します。
📐閾値
AA 通常テキストは ≥ 4.5:1、大きなテキストは ≥ 3:1、AAA 通常は 7:1、AAA 大きなテキストは 4.5:1、グラフィカルオブジェクトは 3:1 を満たす必要があります。
❓
Frequently Asked Questions
❓
大きなテキストは異なる閾値を使用しますか？
はい。≥ 18px 通常または 14px 太字のテキストは大きなテキストとして認定され、AA には 3:1、AAA には 4.5:1 のみが必要です。
💬
グラデーションをテストするにはどうすればよいですか？
グラデーションの最も明るい停止点と最も暗い停止点を確認してください。各停止点のペアは、目的の比率を満たす必要があります。
🔍
アイコンはテキストとしてカウントされますか？
ソリッドアイコンと必須の UI グラフィックスは、背景に対して少なくとも 3:1 のコントラストを満たす必要があります。
💡How To & Tips
🧭
ブランドパレットから開始
色を素早く交換して、同じベースパレットからライトテーマとダークテーマの両方をテストします。
🪄
小さなステップで反復
HEX 値を微調整するか、カラーピッカースライダーを使用して、小さな調整が準拠にどのように影響するかを確認します。
📝
コンテンツをプレビュー
実際の UI コピーをプレビューブロックに貼り付けて、階層と強調を評価します。
🔗Related Documents
📝更新履歴
📌v1.0.251117v1.0.0WCAG テーブル、輝度読み取り値、ライブプレビューカードを含む初回リリース。(2025年11月17日)
📦推奨コンポーネント
User Comments
Loading...