Skip to main content
appkiro.com
色

WCAG カラーコントラストチェック

前景色と背景色のHEXペア1組のコントラスト比を計算し、実装済みの文字・UI判定を確認します。

確認済みの処理はブラウザ内で実行されます。ネットワークURLを明示的に開く操作がない限り、ファイルと色値はページ内に留まります。

大きな文字（24px以上）

16pxの通常文字で実際の読みやすさを確認します。

注記やキャプション向けの14px小文字です。

コントラスト比
—

要点

前景色と背景色のHEXペア1組のコントラスト比を計算し、実装済みの文字・UI判定を確認します。 1組の色が合格しても、ページ全体のWCAG適合や法的適合を意味しません。現行入力は半透明の前景色を背景と合成しません。

このツールでできること

前景色と背景色のHEXペア1組のコントラスト比を計算し、実装済みの文字・UI判定を確認します。 文字／背景またはコンポーネント／背景を確認した後、実際のUIで文字条件・状態・フォーカス・色以外の手掛かりも確認してください。

確認済みの機能

開始値を用意

前景色と背景色のHEXペア1組のコントラスト比を計算し、実装済みの文字・UI判定を確認します。

必要な設定を調整

線形化したsRGBチャンネルから相対輝度を算出し、4.5:1・3:1・7:1と比較します。修正候補は色相と彩度を保ちながらHSL明度を探索します。

精度の範囲を確認

1組の色が合格しても、ページ全体のWCAG適合や法的適合を意味しません。現行入力は半透明の前景色を背景と合成しません。 再利用する前に、利用先の要件と結果を照合します。

適した用途

  • 文字／背景またはコンポーネント／背景を確認した後、実際のUIで文字条件・状態・フォーカス・色以外の手掛かりも確認してください。
  • 線形化したsRGBチャンネルから相対輝度を算出し、4.5:1・3:1・7:1と比較します。修正候補は色相と彩度を保ちながらHSL明度を探索します。 「適した用途 2」では、この内容をWCAG カラーコントラストチェックに合わせて適用します。
  • 文字／背景またはコンポーネント／背景を確認した後、実際のUIで文字条件・状態・フォーカス・色以外の手掛かりも確認してください。 言語を変えずに、最初の関連ツールでWCAG カラーコントラストチェックの結果を引き続き活用できます。

使い方

  1. 開始値を用意

    前景色と背景色のHEXペア1組のコントラスト比を計算し、実装済みの文字・UI判定を確認します。 「使い方: 開始値を用意」では、この内容をWCAG カラーコントラストチェックに合わせて適用します。

  2. 必要な設定を調整

    線形化したsRGBチャンネルから相対輝度を算出し、4.5:1・3:1・7:1と比較します。修正候補は色相と彩度を保ちながらHSL明度を探索します。 「使い方: 必要な設定を調整」では、この内容をWCAG カラーコントラストチェックに合わせて適用します。

  3. 結果を確認して次へ

    文字／背景またはコンポーネント／背景を確認した後、実際のUIで文字条件・状態・フォーカス・色以外の手掛かりも確認してください。 「使い方: 結果を確認して次へ」では、この内容をWCAG カラーコントラストチェックに合わせて適用します。

  4. 精度の範囲を確認

    1組の色が合格しても、ページ全体のWCAG適合や法的適合を意味しません。現行入力は半透明の前景色を背景と合成しません。 再利用する前に、利用先の要件と結果を照合します。 本番利用やアクセシビリティ判断に使う前に、記載された制限を確認します。

操作項目の説明

開始値を用意

前景色と背景色のHEXペア1組のコントラスト比を計算し、実装済みの文字・UI判定を確認します。 「操作項目の説明: 開始値を用意」では、この内容をWCAG カラーコントラストチェックに合わせて適用します。

必要な設定を調整

線形化したsRGBチャンネルから相対輝度を算出し、4.5:1・3:1・7:1と比較します。修正候補は色相と彩度を保ちながらHSL明度を探索します。 「操作項目の説明: 必要な設定を調整」では、この内容をWCAG カラーコントラストチェックに合わせて適用します。

結果の算出方法

線形化したsRGBチャンネルから相対輝度を算出し、4.5:1・3:1・7:1と比較します。修正候補は色相と彩度を保ちながらHSL明度を探索します。 「結果の算出方法」では、この内容をWCAG カラーコントラストチェックに合わせて適用します。

精度と制限

  • 1組の色が合格しても、ページ全体のWCAG適合や法的適合を意味しません。現行入力は半透明の前景色を背景と合成しません。
  • クリップボード、ファイルのデコード、ダウンロード、権限を使う操作は現在のブラウザ機能に依存します。

処理とプライバシー

確認済みの処理はブラウザ内で実行されます。ネットワークURLを明示的に開く操作がない限り、ファイルと色値はページ内に留まります。

実用的なヒント

  • 既知のサンプルから始め、効果を確認できるよう一度に1つの項目だけ変更します。
  • 本番利用やアクセシビリティ判断に使う前に、記載された制限を確認します。

トラブルシューティング

入力または操作が動作しない

表示されている範囲やファイル条件を確認し、リセット後に小さい入力またはブラウザ対応形式で再試行します。権限を使う操作にはセキュアコンテキストが必要な場合があります。

精度と制限

1組の色が合格しても、ページ全体のWCAG適合や法的適合を意味しません。現行入力は半透明の前景色を背景と合成しません。 「トラブルシューティング: 精度と制限」では、この内容をWCAG カラーコントラストチェックに合わせて適用します。

精度の範囲を確認

1組の色が合格しても、ページ全体のWCAG適合や法的適合を意味しません。現行入力は半透明の前景色を背景と合成しません。 リセットして既知の対応値で再試行してから、アルゴリズムの問題かを判断します。

よくある質問

WCAG カラーコントラストチェックは何をするツールですか？

前景色と背景色のHEXペア1組のコントラスト比を計算し、実装済みの文字・UI判定を確認します。 「WCAG カラーコントラストチェックは何をするツールですか？」では、この内容をWCAG カラーコントラストチェックに合わせて適用します。

最も重要な制限は何ですか？

1組の色が合格しても、ページ全体のWCAG適合や法的適合を意味しません。現行入力は半透明の前景色を背景と合成しません。 「最も重要な制限は何ですか？」では、この内容をWCAG カラーコントラストチェックに合わせて適用します。

データはどこで処理されますか？

確認済みの処理はブラウザ内で実行されます。ネットワークURLを明示的に開く操作がない限り、ファイルと色値はページ内に留まります。 「データはどこで処理されますか？」では、この内容をWCAG カラーコントラストチェックに合わせて適用します。

WCAG カラーコントラストチェックには何を用意しますか？

前景色と背景色のHEXペア1組のコントラスト比を計算し、実装済みの文字・UI判定を確認します。 前景色と背景色のHEXペア1組のコントラスト比を計算し、実装済みの文字・UI判定を確認します。

WCAG カラーコントラストチェックの結果を使う前に何を確認しますか？

1組の色が合格しても、ページ全体のWCAG適合や法的適合を意味しません。現行入力は半透明の前景色を背景と合成しません。 再利用する前に、利用先の要件と結果を照合します。 「WCAG カラーコントラストチェックの結果を使う前に何を確認しますか？」では、この内容をWCAG カラーコントラストチェックに合わせて適用します。

WCAG カラーコントラストチェックの次にどの作業へ進めますか？

言語を変えずに、最初の関連ツールでWCAG カラーコントラストチェックの結果を引き続き活用できます。 文字／背景またはコンポーネント／背景を確認した後、実際のUIで文字条件・状態・フォーカス・色以外の手掛かりも確認してください。

次のカラーワークフロー

文字／背景またはコンポーネント／背景を確認した後、実際のUIで文字条件・状態・フォーカス・色以外の手掛かりも確認してください。 「次のカラーワークフロー」では、この内容をWCAG カラーコントラストチェックに合わせて適用します。

関連ツールで続ける

言語を変えずに、最初の関連ツールでWCAG カラーコントラストチェックの結果を引き続き活用できます。

色覚シミュレーターでデザインの見え方を確認