テキストの読みやすいカラーを決めるにはこれが大切！Webデザインにおける良いコントラストのつくり方

Post on:2016年9月6日

はじめに

Webデザインでカラーパレットを作成する時、カラーの組み合わせをコントラストのためにテストしていますか？テストをしてないのであれば、あなたのデザインはリーダビリティを考慮せず、潜在的なビジターを失っているかもしれません。

私はこれまでに数多くのプロジェクトでカラーコントラストとリーダビリティについて取り組んできました。いくつかの有用なカラーコントラストのアクセシビリティツールのおかげで、私は仕事をすることができ、それを多くの人たちと共有したい思います。

私はアクセシビリティの専門家ではありません。私の目指すところはシンプルで、最適な読みやすさを念頭においてカラーを選ぶことです。完全な説明が必要であれば、W3CのContrastをチェックするとよいでしょう。また、Contrast Rebellionではコントラストの問題についてグラフィカルに学ぶことができます。

1. カラーパレットの作り方（ティント、トーン、シェードの活用）

カラーパレットを作成するためにカラーコントラストのツールを使用できますが、良い組み合わせを見つけるために既存のカラーパレットを使用することもできます。既存のカラーパレットを使って、コントラストをつけるためにティントとトーンとシェードをどのように役立たせるか説明します。

以前の記事（Add Colors To Your Palette With Color Mixing）のカラーパレットを使用します。

まずは、ティント、トーン、シェードを確認しておきましょう。

参考: From Darkness to Light

ティント(Tint): ティントはホワイトをつかった混合色で、明るさを増加させます。
トーン(Tone): トーンはグレーをつかった混合色で、色をつけることで陰影両方に作られます。
シェード(Shade): シェードはブラックをつかった混合色で、明るさを減少させます。

一つのカラーをベースに、ティントとトーンとシェードを使って5つのカラーを作ります。
最初に真ん中のカラーを基準として、次にその上下により明るい・より暗いカラーを作り、最後に最も明るい・最も暗いカラーを作ります。

この例では、グレーのトーンは不透明度20%でより暗い、不透明度50%で最も暗い、と定義しています。「最も明るい」から「最も暗い」まで5つのカラーを作ることで、必要に応じてコントラストに柔軟性とソフトな背景の彩色に役立てることができます。

2. カラーコントラスト用の便利なオンラインツール

Web上には無料で利用できる素晴らしいカラーコントラストのツールがたくさんあります。あなたにあったツールを見つけ出し、背景と前景の組み合わせをテストするために使いましょう。
オススメのツールをいくつか紹介します。

Colorable

3. 本文のコントラスト

カラーのコントラストは最初に、本文のカラーを決めるとあとが楽です。
私は通常、中間色のパレットから始め、そしてAAA(Section 508 compliant、参考: WCAG 2.0 Conformance)評価の最も明るいグレーに注目します。その明るさはテキストをソフトに見せつつ、AAA評価なので最適な読みやすさを保証します。

「Jet」「Raven」などのカラー名は私がカラーに割り当てたオリジナルの名称です。他の名称は下記のページをチェックしてみてください。
参考: Giving Colors More Colorful Names

ホワイトの背景で、本文用のニュートラルなカラーパレットをテストします。

#373D3Fの「Raven」が、AAA評価を得た中で最も明るいグレーです。

4. ボタンとリンクのコントラスト

本文のコントラストが決まったので次に、ボタンとリンクのカラーコントラストを見つけましょう。ここでは少し異なるアプローチをとります。
AAAを目指す代わりに、静的なテキストからコントラストや重要なリンクに注意を引くためにAAに注目します。ここでは、ホワイト（#FFFFF ）をさまざまな色と組み合わせてテストします。

AA評価のカラーは、ブルーとレッドに多く見られます。

私はコントラストと輝度のよい組み合わせである#107896の「Darkest Alice」を選択します。#C02F1Dの「Ruby」も同じく適切な選択です。

5. カラーの組み合わせのバリエーション

注目を集めたい要素や他のニーズに合わせて、追加のカラーの組み合わせを作成しておくとよいでしょう。

ベースは暗いグレー「Raven」のテキスト、明るいブルー「Darkest Alice」のリンクとボタンの組み合わせです。

テキスト、リンクとボタンを暗くし、背景に色をつけてみました。

テキスト、リンクとボタンを明るくし、背景を暗くしてみました。

6. スタイルガイドに定義する

最後に、スタイルガイドにカラーの組み合わせについて定義しておくことで、デザインがうまくいきます。最適なリーダビリティについて説明することで、あなたのクライアントやビジターはカラーの組み合わせを深く考えて選択されていると感心するでしょう。

本文のテキスト（AAA）: 文章を楽に読める高いコントラストを確保します。
アクションリンク（AA）: リンクがあり、アクションできることを目立たせるために、高いコントラストのカラーを探します。; 本文で使用するカラーとアクションリンクのカラーの間にも、コントラストが必要です。
その他（AAA, AA）: 他にも注意を引きつける要素のために、カラーの組み合わせのバリエーションを作成し、ドキュメント化します。