文字の読みやすさチェックの使い方｜文字色と背景色のコントラスト比を測る

この記事のサービス

文字の読みやすさチェック

文字色と背景色のコントラスト比を計算し、読みやすさを判定。

• 誰でも：登録しなくても使える

文字の読みやすさチェックを開く →

これで何ができるか

文字色と背景色を入れると、明るさの差（コントラスト比）をその場で計算し、アクセシビリティの国際基準 WCAG 2.2 の AA・AAA に届くかを判定します。届かないときは、近い色の候補も出します。

使える人：だれでも（会員登録なし・無料）。入れた色はお使いのブラウザの中だけで計算し、サーバーには送りません。

はじめ方

まず動画で流れを見てください（音は出ません）。

1. ツールを開く：上に「文字色」と「背景色」の欄があり、色を選ぶか、#333333 のように打ち込めます。「⇄ 入れ替え」で2つを入れ替えられ、「よく使う組み合わせで試す」のボタンでも試せます。
2. 結果を見る：色を入れるとすぐに、コントラスト比と、AA・AAA のそれぞれに「合格・不合格」が出ます。右の「この色で見ると」で、見出し・本文・ボタンがその色でどう見えるかも確かめられます。
3. 届かないときは候補を選ぶ：「近い色の候補」に、基準にぎりぎり届く文字色・背景色が出ます。押すとその色に入れ替わります。
4. 入れ替えたあとを確かめる：候補を押すと比が変わり、届いた基準が「合格」になります。

文字の読みやすさチェックを開く →

よくある使い方

• 本文の文字色を決める：まず AA（4.5:1 以上）に届くかを見ます。薄いグレーの文字は、見た目はおしゃれでも届いていないことがよくあります。
• ブランドの色が届かないとき：ブランドの色は背景や枠に使い、文字には「近い色の候補」の濃い色を使うと、印象を変えずに読みやすくできます。
• ボタンの文字色を決める：「この色で見ると」の塗りのボタンで、文字と背景を逆にしたときの見え方も確かめます。