こんにちは、こんばんは。にゃんこ師匠です。今回はアクセシビリティに配慮した注意と警告に最適の色の3回目となります。

Webセーフカラー

どのようなモニターや、OSでも正確に再現可能な色をWebセーフカラーといい、216色があります。すでにフルカラー(数十万色)が当たり前の時代に、Webセーフカラーにこだわる制作者も少なくなっています。

しかし「その色は絶対に再現できるのか?」という問いかけに対する答えは、Webセーフカラー(216色)だけです。
特にEFOのように売り上げに関わるページでは、確実な再現性と視認性を重視するためWebセーフカラーを基準色にするのは非常に重要です。

スクリーンショット 2014-10-06 16.44.03

だからフォームの色はこう選ぶ

  • 定着している意味に合った色を選ぶ
    「禁止」「必須」は赤系、「注意」「警告」は黄色系など
  • コントラストに注意する
  • Webセーフカラーを使う

色を決定する手順

まず、Webセーフカラーから、「禁止」「必須」は赤系、「注意」「警告」は黄色系で色を選びましょう。同様に「セーフ」「完了」は緑や青の色を選びます。
http://ja.wikipedia.org/wiki/ウェブカラー

次に色をチェックするツール(またはソフト)で候補色がアクセシビリティに準拠しているか確認します。

【参考】色のアクセシビリティをチェックするツールまとめ

文字色を黒(#000000)とした場合の「背景用の必須項目色」をピックアップしてみました。
値を全てクリアしたのは以下でした。

16進
R/G/B
赤系の色
FF CC CC
FF 99 99
ピンク系の色
FF CC FF
FF 99 FF
FF 99 CC
オレンジ系の色
FF CC 99

個人的には#FFCCFFか、#FFCCCCですが、テストにパスした色であれば個人の好みに合わせても問題は無いでしょう。

イメージ写真はクリエイティブコモンズ・ライセンスに基づき掲載しています。 写真掲載元:Julio César Cerletti García