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

読みやすい本文テキストのカラー、分かりやすいリンクのカラー、目立たせたいボタンのカラーなど、Webデザインのカラーを決める時にもう一歩進めた良いコントラストのつくり方を紹介します。

より良いリーダビリティのためのカラーコントラスト

Color Contrast for Better Readability

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

サイトのキャプチャ

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

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

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

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

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

カラーパレットの作り方

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

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

ティント、トーン、シェード

参考: From Darkness to Light

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

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

ティントとトーンとシェードを使って5つのカラー

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

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

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

サイトのキャプチャ

Colorable

3. 本文のコントラスト

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

本文のコントラスト

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

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

AAA評価を得た中で最も明るいグレー

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

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

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

ホワイト(#FFFFF )をさまざまな色と組み合わせたテスト

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

AAA評価のブルーとレッド

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

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

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

ベースの組み合わせ

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

背景を明るくした組み合わせ

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

背景を暗くした組み合わせ

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

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

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

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

top of page

©2017 coliss