ツールを実行
文字色（前景色）と背景色の2つのカラーコードを指定して、コントラスト比と視認性の基準判定を確認できるツールです。入力には「#000000」や「#ffffff」などの3桁・6桁の16進数カラーコード（HEX）、または「rgb(255, 255, 255)」のようなRGB形式のテキストを使用できます。前景色と背景色の組み合わせに対して、小数点以下2桁に丸められたコントラスト比を算出し、通常テキスト向け（4.5および7.0）と大きめのテキスト向け（3.0および4.5）の各基準に達しているかを判定します。ウェブデザインやUI設計における文字の読みやすさの確認に役立ちます。
使い方
- 「前景色（文字色）」の入力欄に、確認したい文字色のカラーコード（HEX形式またはRGB形式）を入力します。
- 「背景色」の入力欄に、文字の背景となる色のカラーコードを入力します。
- 両方の色を入力すると、計算結果欄に2色間のコントラスト比が表示されます。
- 通常テキスト（基準値4.5・7.0）および大きなテキスト（基準値3.0・4.5）の判定結果を確認します。
使用例
- 前景色に「#000000」、背景色に「#ffffff」を指定すると、コントラスト比21.00と算出され、通常テキスト・大きなテキストの全基準を満たす結果が表示されます。
- 前景色に「rgb(100, 100, 100)」、背景色に「rgb(255, 255, 255)」を指定すると、コントラスト比5.90と算出され、通常テキスト基準4.5および大きなテキスト基準を満たす判定が表示されます。
よくある質問
どのようなカラーコード形式に対応していますか？
「#」で始まる3桁または6桁の16進数表記（例: #333、#1a2b3c）と、「rgb」で始まりカンマで区切られた3つの10進数による表記（例: rgb(255, 255, 255)）に対応しています。
入力欄を空にした場合はどうなりますか？
前景色と背景色の入力は任意です。未指定の場合は、前景色に黒（#000000）、背景色に白（#ffffff）が自動的に適用されます。
同じ色同士を指定した場合はどう表示されますか？
前景色と背景色にまったく同じ色を指定した場合、コントラスト比は最小値である1.0と表示されます。
エラーが表示された場合はどう対応すればよいですか？
色の指定形式が正しく解析できない場合にエラー案内が表示されます。先頭の「#」の有無や、RGB表記の数値区切りが半角カンマになっているかを確認して再入力してください。