文字と背景のコントラスト比イメージチートシートを作ってみた。

こんにちは。インハウスでＷＥＢデザイナーをしているTakuyaです。
今回は、デザイナーを苦しめる要素の一つである「文字色と背景色コントラスト比」のチートシートを作りました。

・手っ取り早く、大体のコントラスト比のイメージをつかみたい
・コントラスト比が高いときと、低いときで、見た目の違いが知りたい
・とにかく、たくさんのコントラスト比のサンプルが見たい
・白（黒）文字を重ねて、コントラスト比が担保される背景色が知りたい

といった人に向けての記事です。

私自身、デザイナーになりたての頃に、こんなチートシートあったらいいのに。と探し回ったのですが、英語で書いてあって良く分からなかったり、かゆいところに手が届かなかったり、探すのが面倒になってしまいました。

「文字」「色」「コントラスト比」「見やすい」と検索すると、
Web Content Accessibility Guidelines (WCAG) 2.0
という企画のガイドラインに従うことで、見やすいコントラスト比になるらしい。という事がわかります。

しかし、膨大な色の組み合わせを、毎回コントラストチェッカーを使って調べるのは大変だよ。という人も多いのではないでしょうか。私は大変でした。

今回は私が191種類の背景色を選び、その色に「白#FFFFFF」「黒#000000」の文字を重ねて、見た目のイメージと、それぞれのコントラスト比をまとめました。色の組み合わせは382通りあります。

・白抜き文字を置ける色と、できない色のイメージをつかみやすい。
・コントラスト比の違いにおける、見やすさ（見にくさ）が一覧でわかる。
・背景に、白文字を重ねたときと、黒文字を重ねたときのイメージの違いがわかる。
・塗りつぶしの円と、中抜きの円、線の太さが変わることでの色のイメージの違いがわかる。

※今回使用した色は私の独断でピックアップした色なので、あくまでもザックリとした色を参考にするものとしてお使いください。

サンプル

「あa」を円で囲った上に書いてある数値が、文字色と背景色のコントラスト比となります。

コントラスト比の詳しい情報は割愛しますが、

Web Content Accessibility Guidelines (WCAG) 2.0によれば、読みやすい文字のコントラストはAAに準拠する場合

通常文字(22px未満）は4.5以上、巨大文字（22px以上）は3以上、太文字（14px)以上は3以上必要だそうです。

チートシートのダウンロードはこちらから。支援いただいたお金は、先人の方々の素敵なデザイン系有料note購入費に充てさせていただきます。