前景色と背景色のコントラスト比を確認する方法

概要と使いどころ

前景色と背景色の組み合わせが、文字の読みやすさに関する基準値をどの程度満たすか確認するためのツールです。色を入力するとコントラスト比を小数第2位まで丸めて表示し、通常の大きさの文字と大きな文字について、複数のしきい値による判定を返します。配色案の比較や、背景色とのコントラスト不足を調べたい場面で使えます。

使い方の手順

前景色と背景色の入力欄を用意します。前景色は文字やアイコン側、背景色はその背後の色です。どちらも省略できますが、省略時は前景色が黒（#000000）、背景色が白（#ffffff）として扱われます。
色を、#000 や #336699 のような3桁または6桁の16進数で入力します。rgb(0, 0, 0) のように、rgbで始まり、カンマ区切りの数値を3つ含む形式も使えます。入力の前後の空白や大文字・小文字は解析時に整えられます。
チェックを実行し、コントラスト比と判定結果を確認します。入力した色を見直す場合は、前景色と背景色を入れ替えたり、一方だけを変更したりして再確認します。
判定は通常の文字について4.5と7.0、大きな文字について3.0と4.5のしきい値で行われます。用途に合う文字サイズの結果を読み取り、必要なら色の明るさや濃さを調整します。

結果の読み方と注意点

表示された比率は、2つの色の差を確認するための数値です。判定では通常の文字に4.5と7.0、大きな文字に3.0と4.5が使われるため、どの文字サイズの結果かを区別して読んでください。これは入力した2色に対する確認であり、書体、文字サイズ、背景画像、周囲の要素などを含むデザイン全体の評価を保証するものではありません。

色を解析できない場合は、通常の判定ではなく、エラーを示す結果になります。3桁または6桁の16進数、または3つの数値を含むrgb形式かを確認してください。2色が同じ場合、コントラスト比は1.0になります。

使用例

黒い文字と黒い背景を組み合わせた配色案について、2つの入力欄に#000000を入れて確認します。

前景色と背景色の両方に#000000を入力してチェックを実行し、表示された比率と判定を確認します。

コントラスト比が1.0と表示され、通常の文字と大きな文字の各しきい値に対する判定が返ります。

制限事項

判定は入力した前景色と背景色のコントラスト比に基づく確認です。デザイン全体の読みやすさやアクセシビリティを評価するものではありません。

よくある間違い

blueや、対応していない16進数形式を入力すると解析できず、通常の判定が返りません。3桁・6桁の#付き16進数、または3つの数値を含むrgb形式に修正してから再実行してください。

よくある質問

色を入力しなくても確認できますか？

はい。前景色と背景色を省略した場合は、それぞれ黒（#000000）と白（#ffffff）として扱われます。

どの色の書式に対応していますか？

3桁または6桁の#付き16進数、またはrgbで始まり、カンマ区切りの数値を3つ含む形式を使えます。任意のCSS色名などには対応していません。

色の入力が正しくないときはどうなりますか？

入力を解析できない場合は、処理が失敗したという扱いではなく、エラーを示す結果が返り、通常のコントラスト判定は作成されません。