カラーコントラストチェッカー：WCAG AA/AAAアクセシビリティテスト | 無料

A はい、HEX、RGB、HSLのすべてに対応しています。値をフィールドに貼り付けるだけで、ツールが自動でフォーマットを認識します。たとえば「rgb(255, 0, 0)」や「hsl(0, 100%, 50%)」と入力すれば即座に処理されます。CSSコードから色を拾うときに便利です。

A はい。まずデフォルトのペアを入力し、次にホバー時の色を別途入れ替えてテストします。WCAGでは、ホバー状態とフォーカス状態も最低限のコントラストを満たす必要があります。例えば、ボタンの背景が#007bffから#0056b3に変わる場合、白いテキストに対して両方をテストしてください。よくある落とし穴：デザイナーがホバー背景を明るくしすぎてコントラストを損なうことです。

A テキスト以外の要素にもコントラスト基準があります。WCAGではUIコンポーネントやアイコン、ボタン、フォームの枠線には3:1の比率が求められます。このツールでアイコンの色と背景をテストしてみてください。3:1を下回るとAA不合格です。実用的なコツ：アイコンにはテキストと同じ色を使うと合格しやすいです。

A 目を信じてはいけません。人間の目はコントラストの判断が驚くほど苦手です。あなたにとって問題なく見える2色でも、比率が2.5:1しかなくWCAG AAに不合格かもしれません。このツールは人間の色覚と輝度を考慮し数学的に計算します。例えば薄灰色#C0C0C0と白#FFFFFFは一見読めそうですが、スコアは1.6:1しかありません。必ず私たちの合格/不合格インジケーターで確認してください。

A はい、大きく異なります。AAは18px未満の標準テキストに4.5:1を要求しますが、大きなテキスト（18px太字または24px標準）には3:1で十分です。AAAは標準テキストに7:1、大きなテキストに4.5:1を求めます。32pxの見出しが4.0:1ならAA合格でもAAA不合格です。本ツールは両方の閾値を即座に表示します。実用的なコツ：本文はAA、見出しはAAAを目指しましょう。見出しが大きいほど高い比率を達成しやすいからです。

A モニターの調整やパネル種類で見た目は変わりますが、コントラスト比自体は数学的な計算です。4.5:1を満たしていれば、輝度差は実際に存在します。薄く見えるのは、たいていコントラストではなく明るさ設定が原因です。別の端末で確認するか、OSのカラープロファイルをsRGBに切り替えてみてください。Webデザインの標準ターゲットがsRGBなので、実際のユーザーが見る見え方に近づきます。一度試すと、違いがはっきり分かりますよ。

A 日光は計算式を変えませんが、快適さは変わります。WCAG AAの4.5:1が最低ラインですが、屋外では余裕を持たせましょう。数秒以上読むものには7:1（AAA）を目指してください。アイコンやタイムスタンプなど一瞬見るだけのUIなら3:1で足りるかもしれませんが、実機で輝度を最大にして確認を。2.9:1の色の組み合わせは、モニターで合格していても屋外ではほぼ見えません。

A 上限も登録も日次制限もありません。5組でも500組でも、結果は1秒以内に表示され、正確なコントラスト比とAA/AAAの判定が出ます。データは保存されないので、ブランドカラーがブラウザの外に出ることはありません。知人のデザイナーはクライアント案件で40通り試して、ようやくアクセシブルなアクセントカラーにたどり着きました。ブックマークして、パレット検討時のメモ帳代わりにどうぞ。

A その方法は失敗することが多いです。白い背景に不透明度を下げた黒を重ねると薄いグレーになり、WCAG基準を満たさないことがあります。推測するのではなく、ツール上で実際に混ざった色を直接テストしてください。最終的な合成色のRGB値を入力すれば、一瞬で正確な判定が分かります。

A 大抵の場合、明るさや太さを変更しないと不合格になります。#121212 の背景に #999999 を置くとコントラスト比は 3.2:1 となり基準を満たしません。文字色を #CCCCCC に明るくするか、太字に調整してください。ツールが数値を即座に再計算します。