web-dev-qa-db-ja.com

背景が赤いフォームのエラーメッセージの色は何ですか?

いくつかのフォームがある大きなウェブサイトを持っています。 formコンポーネントには4つの背景色があります。それらの1つはpink/redです。

ここに画像とエラーメッセージ:

Enter image description here

フォームの背景色を変更することはできませんが、メッセージスタイル(背景色、テキスト色など)を自由に変更できます

どう思いますか?私はそれが赤の白い文字が好きではありません。背景がredであるため、エラーメッセージはあまり目立ちません。他のredスタイルといくつかのorangesを使って数日間試しましたが、奇妙に見えます。

Blueまたはgreen背景は実際に表示されていますが、混乱を招く可能性があります。 (成功=緑、エラー=赤)

このフォームを改善するにはどうすればよいですか?

つまり、エラーメッセージを変更し、selectコンポーネントには触れないでください。

あなたの答えに触発されたいくつかのオプション:

form-errors

  • 1が最新です。
  • 2見栄えがいい
  • 3奇妙な
  • 4(暗い)と5(明るい)は似ていますが、影が異なります

フィードバックありがとうございました!!

56
Baumannzone

はっきりとしたコントラストが常に保たれる色を選びます。また、ユーザーが一般的に親しんでいるスタイルの外に出すぎないようにすることも避けます。非定型のスタイルで作業しているため、見慣れない要素から逸脱して使用すると、ユーザーの特定の割合を混乱させるおそれがあります。これが私がお勧めするものです。 enter image description here

78
ke11en

背景の陰にあるものを使用しますが、アラートにはより赤いテキストがあります。テキストのシェードに境界線を追加して、エラーとして目立つようにすることもできます。

Picking a lighter shade of the background

68
Connor Wilson

黒のテキストで明るい黄色の背景がうまく機能します。

警告サインの配色に適合します。

yellow/black warning image

43
danjmorris_

エラーメッセージの標準色は赤です この質問を参照

理解しておくべき重要な点の1つは、エラーに従来の色を使用すると、エラーがより目立つようになるため重要です。エラーメッセージの色に悩まされているユーザーは、ユーザーがエラーに気付かなかったためにフォームに入力できなかった場合よりも、問題はほとんどありません。少なくともほとんどの場合。

バックグラウンドでは赤が失われるため、次善の策は、黄色と赤のエラーシンボルを使用することです。

黄色は注目を集めており、背景とのコントラストも非常に良好です。赤いエラーシンボルは、これがエラーメッセージであることをユーザーに伝えます。これは、これが広く受け入れられている標準のシンボルであるためです。

enter image description here

23
DesignerAnalyst

白い境界線を追加してから、背景色で遊んでみてください。

赤よりも「何かが間違っている」を伝える1つの色は、死の色、黒です。

Dark red with white border, black with white border

21
enthdegree

それはアクセシビリティの悪夢です!

エラーメッセージのスタイルを逆にしてみてください:白地に赤いテキスト。

enter image description here

17
Andrew Martin

他のいくつかの答えからの構築: enter image description here

色だけに頼らないでください。アイコン、テキスト、またはテクスチャを追加すると、色覚異常の人を助けるだけでなく、常連の人にとっても物事が少し簡単になります。

濃い灰色または黒のバーを使用すると、背景とのコントラストが強くなります。また、ニュートラルカラーなので、これらのボックスに他の種類/色の通知を入れることができます。

赤の代わりにオレンジまたは黄色を使用すると、背景に近すぎて見えるのを回避できます。 警告記号 からの有用な意味合いがまだあります。

9
PixelSnader

質問は実際に利用可能な代替オプションの多くを提供しましたが、明確にするために、提供された回答のいくつかを要約するとよいと思いました:

  • 補色を探す目立つものを使用する-これにはたくさんのツールがあり、二次チェックとしてブランドガイドラインを参照することもできます。これは、UI、フォントの色、またはその両方の組み合わせの場合があります。
  • 別のレイヤーを作成するフォーカスをユーザーにもたらす-最良の例は、シャドウを使用してメッセージコンポーネントを残りのインターフェイスから「ポップ」させ、3D効果を作成することです。フラットデザインスペース
  • メッセージコンポーネントのカスタマイズ残りのインターフェイスとは異なる方法でフォーカスを作成する方法。回答に記載されている、黒い背景の左側に最小限の縞模様の例は、アイデアの素晴らしい実装です
  • 相互作用または動作パターンを適用する-これは、視覚的なスタイリングではなく、動作またはパターンの設計に関するものなので、他のものとは異なります。そのため、例としては、メッセージコンポーネントのアニメーションが少し続きます長くなるため、気づきやすくなったり、ユーザーが閉じる必要がある永続的なコンポーネントを作成したりできます。
3
Michael Lai