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

A WCAGでは通常テキストに4.5:1(AA)、7:1(AAA)の最低コントラスト比が要求されます。

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

A はい、完全無料です。

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

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

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

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