背景色が白のときに、アクセシビリティ視点から前景色として使える色78色のまとめ

ウェブサイトの見やすさ、文章の読みやすさを決めるコントラスト比について調べてみました。
※この記事は読者によって投稿されたユーザー投稿のため、編集部の見解や意向と異なる場合があります。また、編集部はこの内容について正確性を保証できません。

ウェブサイトをデザインするときに大事な色。サイトの目的やイメージなど、色を決める要素にはいろいろなものがありますが、見やすさ、という大事な要素を忘れてはいけません。では、見やすい色の組み合わせって具体的にはどうやって決めるのでしょうか。参考になるのは「コントラスト比」。アクセシビリティのJIS(JIS X 8341-3:2010)では、少なくとも4.5:1以上のコントラスト比を要求しています。具体的にどのくらいの色がこの達成基準をクリアしているのか調べてみました。

調査のきっかけ

普段からアクセシビリティにかかわっていて、また弱視の視覚障害を持っている私は、以前から「前景色と背景色のコントラスト比と実際の見やすさにはギャップがあるよな」と感覚的には感じていました。きっかけはFlash Playerのアップデートを促すダイアログの前景色と背景色がとっても見づらいことでした。

このギャップを感じて以降、「あれ、これ見づらいな」と思ったものについてコントラスト比を調べてみるというのが癖になっていました。そして今回、じゃあウェブセーフカラーはどうなんだろう、ということで調べはじめたわけです。

やってみたこと

背景色を白(#ffffff)に固定して、文字色を#000000から#ffffffまで変えていった場合のコントラスト比と、白内障、第1色覚(赤)、第2色覚(緑)、第3色覚(青)の4つの視覚特性における見やすさ、そして私の主観的な見やすさについて調べています。

コントラスト比はカラーコントラストアナライザーでチェックし、JIS X 8341-3:2010の「最低限のコントラストに関する達成基準(7.1.4.3)(AA)」への適合、および「より十分なコントラストに関する達成基準(7.1.4.6)(AAA)」への適合を調べています。
達成基準7.1.4.3では4.5:1以上のコントラスト比(大きな文字の場合は3:1)、7.1.4.6では7:1(大きな文字の場合は4.5:1)以上のコントラスト比を要求しています。ここで「大きな文字」とは半角英数字であれば18pt、または14ptの太字、日本語や韓国語、中国語の場合は22pt、または18ptの太字以上の文字と定義されています。

また4つの視覚特性における見やすさはFujitsu ColorSelectorでそれぞれ調べました。

背景色が白のときに前景色として使えるwebセーフカラーは78色

調査の結果、背景色が白のときに前景色として使えるwebセーフカラーは78色であることがわかりました。以下に78色のカラーコードとコントラスト比の一覧を示します。
この一覧を活用して、サイトデザインにおける色選びの際の目安の一つにしてください。

なお、視覚特性ごとの見やすさやウェブセーフカラー216色すべての調査結果など詳細についてはCocktailzのウェブサイトをご覧ください。

  • #0033ff 7.2:1
  • 文字色サンプルコントラスト比
    #000000サンプル21.0:1
    #000033サンプル20.0:1
    #000066サンプル17.6:1
    #000099サンプル14.4:1
    #0000ccサンプル11.2:1
    #0000ffサンプル8.6:1
    #003300サンプル14.3:1
    #003333サンプル13.8:1
    #003366サンプル12.6:1
    #003399サンプル10.9:1
    #0033ccサンプル9.0:1
    #006600サンプル7.2:1
    #006633サンプル7.1:1
    #006666サンプル6.8:1
    #006699サンプル6.2:1
    #0066ccサンプル5.6:1
    #0066ffサンプル4.8:1
    #330000サンプル18.4:1
    #330033サンプル17.7:1
    #330066サンプル15.8:1
    #330099サンプル13.1:1
    #3300ccサンプル10.4:1
    #3300ffサンプル8.1:1
    #333300サンプル13.0:1
    #333333サンプル12.6:1
    #333366サンプル11.6:1
    #333399サンプル10.1:1
    #3333ccサンプル8.4:1
    #3333ffサンプル6.9:1
    #336600サンプル6.9:1
    #336633サンプル6.8:1
    #336666サンプル6.5:1
    #336699サンプル6.0:1
    #3366ccサンプル5.4:1
    #3366ffサンプル4.7:1
    #660000サンプル13.4:1
    #660033サンプル13.0:1
    #660066サンプル12.0:1
    #660099サンプル10.4:1
    #6600ccサンプル8.6:1
    #6600ffサンプル7.0:1
    #663300サンプル10.3:1
    #663333サンプル10.1:1
    #663366サンプル9.4:1
    #663399サンプル8.4:1
    #6633ccサンプル7.2:1
    #6633ffサンプル6.0:1
    #666600サンプル6.1:1
    #666633サンプル6.0:1
    #666666サンプル5.7:1
    #666699サンプル5.3:1
    #6666ccサンプル4.8:1
    #990000サンプル8.9:1
    #990033サンプル8.7:1
    #990066サンプル8.2:1
    #990099サンプル7.5:1
    #9900ccサンプル6.5:1
    #9900ffサンプル5.5:1
    #993300サンプル7.4:1
    #993333サンプル7.3:1
    #993366サンプル7.0:1
    #993399サンプル6.4:1
    #9933ccサンプル5.7:1
    #9933ffサンプル4.9:1
    #996600サンプル4.9:1
    #996633サンプル4.9:1
    #996666サンプル4.7:1
    #996699サンプル4.5:1
    #cc0000サンプル5.9:1
    #cc0033サンプル5.8:1
    #cc0066サンプル5.6:1
    #cc0099サンプル5.2:1
    #cc00ccサンプル4.7:1
    #cc3300サンプル5.2:1
    #cc3333サンプル5.1:1
    #cc3366サンプル5.0:1
    #cc3399サンプル4.7:1
    この記事が役に立ったらシェア!
    みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
    • SEOやデジタルマーケの最新情報をゲット
    • 事例やインタビューも見逃さない
    • 要チェックのセミナー情報も届く
    みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
    • SEOやデジタルマーケの最新情報をゲット
    • 事例やインタビューも見逃さない
    • 要チェックのセミナー情報も届く

    Web業界の転職情報

    人気記事トップ10(過去7日間)

    今日の用語

    フィーチャーフォン
    高機能ケータイ電話を指す呼び方。 主に海外で、電話の機能だけをもったケータ ...→用語集へ

    連載/特集コーナーから探す

    インフォメーション

    Web担のメルマガを購読しませんか?
    Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

    Web担に広告を掲載しませんか?
    購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

    サイトマップ
    RSSフィード


    Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]