STAFF BLOG

スタッフブログ

ホームページのテキストと背景色は大丈夫?カラーコントラストアナラ​​イザー

ホームページを作成時、テキスト色と背景色の指定、どうしていますか?

背景色とテキストのコントラストが低い場合、
「隠しテキスト」としてペナルティーを受けてしまうことはご存知かと思います。
「そんなことは知ってるから、やらないよ」といっても、こんな場合はどうでしょうか?

隠しテキストの意図はなく、
デザインとして作成したものが、少しだけ色が薄いのが良かった。

こんなケースはあるのではないでしょうか?
実は、背景色とテキストのコントラストは、けっこう色の差をつけないとダメなんです。
人間が見て、普通に可読できていても実はダメ、というケースは多いのです。

以前のように、
画像とキャッチコピーテキストを一緒に書き出すのなら、問題ありませんが、
レスポンシブデザインが多くなった現在では、
画像や工夫を凝らした背景の上に、テキストを重ねて表示する。ケースも多いかと。
その時に、かっこ良くするため、背景色とテキスト色を同系色指定にすると、カラーコントラストに引っかかる可能性が高まるかと思います。

そんな時、便利なのがこちら。

背景色とテキスト色のコントラストを確認

WCAG 2 AAコントラスト比を使用し、背景色とテキスト色のコントラストを確認してくれます。
※英語のサイトなので、日本語で表示したい方は、Chromeにて閲覧し翻訳機能をご利用ください。

Color Contrast Analyzer

https://dequeuniversity.com/rules/axe/2.2/color-contrast

Color Contrast Analyzer

 

使い方

1 Foreground Color へ任意のカラーを指定

テキストのカラー指定色を指定する。

2 Background Color へ任意のカラーを指定

背景のカラー指定色を指定する。

結果表示

「小さい文字」と「大きい文字」について、結果を表示してくれます。

Pass:問題なし

FAIL:問題あり

 

とても便利なのが、

Foreground Color、Background Color 共にスライダーがついており、
リアルタイムにその場で、色の微調整ができてしまいます。

これは良いですね。

皆さんも、ホームページのカラーコントラスト大丈夫ですか?
実は人間の感覚よりも、カラーコントラストがシビアですので、ぜひ一度チエックしてみてください。

 

2018年09月29日  カテゴリー: Web制作に便利なツール

single.php

お問い合わせ

ご相談・お見積は無料
お気軽にお問い合わせください
  • お電話でのお問い合わせ 0283-25-1618 平日 9:00〜18:00
  • メールでのお問い合わせ