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

A 十分なコントラストにより、ロービジョンや色覚異常のユーザーもテキストを読めるようになります。

A はい、完全無料です。

A 無料のカラーコントラストチェッカーは、単色のペア向けです。グラデーション上にテキストを配置する場合、テキストの色が*最も低い*コントラストを示すグラデーションのポイントを特定してください。WCAG AAまたはAAA準拠を全体で確保するため、前景のテキスト色をグラデーション背景の最も明るい部分と最も暗い部分の両方でテストする必要があります。

A ブランドカラーがWCAGコントラストに不合格だった場合、前景（テキスト）または背景色のいずれかを調整する必要があります。当社の無料のカラーコントラストチェッカーは、迅速な反復作業を支援します。不合格となった色の色相、彩度、または明度をわずかに変更してください。新しいカラーコードをツールに再入力し、即座に再テストします。すべてのユーザーにとっての読みやすさを優先しつつ、ブランドパレットに可能な限り近い状態で、最小合格比率を目指しましょう。

A ウェブサイトのHEXカラーコードを見つけるには、ブラウザの開発者ツールを使用します。ChromeやFirefoxなどのブラウザで要素を右クリックし、「検証」を選択すると、「要素」または「スタイル」パネルにCSSの色プロパティが表示されます。また、画面上の色を直接抽出する「スポイト」ツールのようなブラウザ拡張機能を利用し、そのHEX、RGB、HSL値を当社の無料カラーコントラストチェッカーに入力することも可能です。

A いいえ、このツールは単色の組み合わせにのみ対応しています。画像の場合は別のソフトウェアが必要です。該当エリアのスクリーンショットを撮り、スポイトツールでテキスト下の最も明るいピクセルと暗いピクセルをサンプリングしてください。両方をテキスト色と比較してテストします。どちらかが不合格なら、テキストの背後に半透明のオーバーレイを追加すると効果的です — 黒で不透明度40%がよく使われます。

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しかありません。必ず私たちの合格/不合格インジケーターで確認してください。