カラーコントラストチェッカー：WCAG AA・AAA【無料】
無料・登録不要で、ブラウザで動作します。 WCAGのコントラスト比で、文字が背景の上で読みやすいかをチェックできます。通常の文字、大きな文字、UI部品それぞれのAA・AAAの判定を表示し、基準を満たす最も近い色も提案します。
大きなテキストはこのように見えます
通常の本文テキストはこのように見えます。いろはにほへと ちりぬるを。キャプションのような小さな文字は、その下に表示されます。
小さなテキスト：14pxのキャプション。
ボタンコントラスト比13.08:1
- 通常のテキスト、AA：合格本文、4.5:1以上
- 通常のテキスト、AAA：合格強化基準、7:1以上
- 大きなテキスト、AA：合格18pt以上、または太字14pt以上、3:1以上
- 大きなテキスト、AAA：合格強化基準、4.5:1以上
- アイコンとUI部品、AA：合格ボタン、枠線、グラフの線：3:1
WCAG 2 のコントラスト計算式を使用しています。比率は切り上げないため、4.49:1 は 4.5:1 とみなされません。チェックはお使いのデバイス上で行われます。
コントラストチェッカーを使う理由
- 完全無料
- 何度でもお使いいただけます。登録不要、透かしなし、インストールも不要です。
- プライバシーを重視した設計
- 入力した内容はブラウザ内にとどまり、当社に送信されることはありません。
- どのデバイスでも使える
- Windows、Mac、Linux、Android、iPhone のブラウザで動作します。アプリは不要です。
コントラストチェッカーの使い方
- 文字色と背景色を入力するか、選びます。
- コントラスト比と、合格・不合格の結果を確認します。
- 不合格の場合は、提案された合格する色をクリックします。
よくある質問
- 必要なコントラスト比は？
- WCAG AAでは、通常の文字は4.5:1、大きな文字とボタンやアイコンなどのUI部品は3:1が必要です。AAAでは7:1と4.5:1です。
- 大きな文字とは？
- 標準の太さで18ポイント（24px）以上、または太字で14ポイント（約18.7px）以上の文字です。
- 半透明の文字色にも対応していますか？
- はい。透けた文字色は、背景と合成してからコントラストを測ります。
- 4.49:1が不合格になるのはなぜですか？
- WCAGでは比率を切り上げてはいけないと定められているため、4.5:1未満は通常の文字のAAを満たしません。
- コントラストチェッカーは無料ですか？
- はい。無料でお使いいただけます。登録もインストールも不要です。
関連ツール
- HEX・RGBカラー変換色をHEX、RGB、HSL、HSV、CMYKの間で一度に変換できます。透明度にも対応。どの形式のコードでも貼り付けるか色を選び、必要な形式をコピーして、文字のコントラストも確認できます。
- カラーパレット生成キーを押すだけでカラーパレットを生成し、気に入った色はロックできます。ベースカラーから類似色、補色、トライアドの配色でパレットを作ることも。CSS変数、Tailwind、JSONで書き出せます。
- 色の名前検索どんな色でも名前がわかります。HEX、RGB、HSLのコードを貼り付けると、近いCSSの色名、わかりやすい説明、閲覧できる148色の名前付きカラー一覧が表示されます。