文字と背景色のコントラストを確認する方法（WCAG）

結論：Imgovoの画像からカラーパレットを作成を開き、コントラストタブで文字色と背景色を選ぶと、WCAG 2.2の結果が表示されます。コントラスト比が4.5:1なら通常の文字でAA、3:1なら大きな文字でAA、7:1なら通常の文字でAAAを満たします。色は写真から作ることも、HEXコードを自分で入力することもできます。何もアップロードされません。

コントラスト比とは

コントラスト比は、2色の明るさの差を比べた値です。1:1（同じ色）から21:1（白地に黒）までの範囲があります。コントラストが足りない文字は読みにくく、とくに弱視の人、日差しの下のスマートフォン、画質の悪い画面で困ります。

覚えておきたい数値

レベル	通常のテキスト	大きいテキスト	UI部品とアイコン
AA	4.5:1	3:1	3:1
AAA	7:1	4.5:1	–

大きな文字とは、24px以上、または太字なら18.66px以上のものです。

手順

1. 画像からカラーパレットを作成を開きます。画像を追加してパレットを作るか、画像なしでパレットを作るを使います。
2. コントラストタブを開きます。
3. パレットから文字の色と背景色を選ぶか、自分で入力します。
4. サンプル（大きな文字と通常の文字）と、このペアのWCAG 2.2の結果を見ます。コントラスト比と、AA、AAAそれぞれの合否が表示されます。
5. 合格しない組み合わせなら、読みやすい文字色を提案をクリックし、提案を使うを押します。
6. 入れ替えで、暗い背景に明るい文字、またはその逆を試せます。すべての組み合わせでは、パレット内のすべての組み合わせを確認できます。

写真から作った色の場合

写真からパレットを作った場合、そのまま文字に使えるとは限りません。やわらかい色や似た色の組み合わせは、合格しないことがよくあります。文字に暗い色、背景に明るい色の色見本を選ぶ（またはその逆にする）などして、組み合わせを試してください。パレットの作り方は画像からカラーパレットを作る方法をご覧ください。

ほかの人にどう見えるかを確認する

このツールには、一般的な色覚の違いを近似して表示する機能もあります。人によって似て見える色に気づく助けになります。コントラストのテストではなく、医療用のツールでもありません。

UIで色を試す

プレビュータブでは、ページ、カード、文字、アクセント、枠線を含む小さなレイアウトに色を当てはめて表示します。CSSにコードをコピーする前に、実際の使われ方の中で確認できます。

制限

このチェックが測るのは、単色2色の組み合わせ1つです。文字の後ろの写真、グラデーション、ホバー時の状態、そのほかのアクセシビリティの要素は検査しません。結果は便利な確認として使い、証明書とは考えないでください。

プライバシー

色はお使いのブラウザの中で確認されます。何もアップロードされません。

今すぐ試す

画像からカラーパレットを作成を開き、コントラストで文字色と背景色を試してみましょう。