web-dev-qa-db-ja.com

入力フィールドが無効であることを示す最も一般的な色は何ですか？

入力フィールドの設計についてさまざまなリファレンスを調べてきたところ、人々は灰色または白の背景でフリップフロップで入力フィールドが有効か無効かを示す傾向があることに気付きました。

これについての詳細情報がどこにあるかを誰かが知っていますか？

formsinput-fieldscolordisabled
22
ec1234

正しい用語はGreyoutです。

重要性、関連性、優先度の低下、または無効化やアクセス不能などのステータスの変化を示します。

オックスフォード辞書による定義 ：

名詞

特に飛行中に強い加速力を受けた人が経験する部分的または初期の停電。 （より一般的には）視力や意識の一時的な減少、または記憶の部分的な喪失。

起源

1940年代; The Richmond Times-Dispatchで見つかった最も古い使用法。停電後、グレーアウトへ。

したがって、私たちは、グレーアウトがbeforebefore（-===-）blackout、endになると推測できます。

39
Juan Jesús Millo

フレームワークを使用している場合は、デフォルトでパターンが定義されているはずです。灰色を使用するのが一般的で、多くの場合、背景とテキストの両方が暗くなります。

フレームワークを実装していない場合でも、そのパターンをアプリケーションに組み込むことができます。

Bootstrap

それらのフォームセクションは無効な要素を示します。

enter image description here

材料設計

それらは inputs の2つの異なるスタイルを持っているので、アプリケーションに一致するかもしれないものを見回してください。これはアウトラインテキストフィールドセクションです：

enter image description here

そして、それらの塗りつぶされたテキストフィールド：

enter image description here

26
Mike M

無効になっている入力フィールドは通常灰色です（灰色のテキストと灰色の背景）。ただし、コントラスト比や、スクリーンリーダーの操作など、その他のアクセシビリティの問題には注意する必要があります。

記事 無効化されたボタンは吸う必要はありません！ 、それはボタンについてですが、無効化されたフィールドを改善するために適用できるいくつかの素晴らしいヒントがあります（フィールドに適用するように変更しました）：

  • フォントを大きくしたり、色を暗くしたりして、コントラストを高めます。
  • スクリーンリーダーなどの支援技術には、無効にされたフィールド内の情報は読み上げられないため（フィールドはスキップされることが多いため）、フィールドにいくつかの情報を提供します。
  • ユーザーが無効なフィールドをタップ、ホバー、またはクリックしたときに情報を提供します。または、他のヒントを（たとえばツールチップを介して）提供します。たとえば、フィールドが無効になっている理由を説明できます。
8
Aline

私は他のほとんどの人と同意しますが、色だけでなくコントラスト：

Enabled

Disabled

コントラストのレベルを低くすると、要素が薄く表示されます。これは、白の背景に黒を使用してグレー表示を行うのと同じです。私の意見では、これにより、UI要素がフォーカスから外れて表示されます。このソリューションは最もアクセスしにくい場合があるので、テーマの使用を検討する必要があるかもしれないことを覚えておいてください。

さらに、要素を完全に非表示にすることもできます。 UXに関しては、これはユーザーの認知的負荷を軽減し、アプリの生産性を高めるのに役立ちます。適切に実装されていない場合、欠点が生じる可能性があることに注意してください。コンテンツの再表示を遅らせるアプリをいくつか見ましたが、これはかなり耳障りです。

マテリアルデザインのモーションガイド を読んで、2番目のアプローチの詳細を学ぶことができます。

8
Nicholas Miller

最も共通色は何ですか

最も一般的なのは標準ブラウザのデフォルトです。

Chrome v73

enter image description here

Firefox v66

enter image description here

次のhtmlを使用します。

<!DOCTYPE html>
<html lang="en">
  <body>
    <input type="text" value="normal">
    <input disabled type="text" value="disabled">
  </body>
</html>

古いブラウザ

Styling Disabled Form Fields に関するこのブログ投稿には、さまざまな古いブラウザーで標準化された例の優れたセットがあります。

アクセシビリティ

これについての詳細情報がどこにあるかを誰か知っていますか？

しかし、無効化されたフィールドのアクセシビリティ要件を検討することは価値があります。フィールドが必要かどうかという最初の質問です。

この w3c githubアクセシビリティの問題 は、無効な入力に関するさまざまな側面について良い議論があり、無効な入力をテキストだけで置き換える良い例があります。つまり、色のコントラストを保つことができます。 続行するには、少なくとも4つ以上タップしますボタンに注意してください。

前：

enter image description here

後：

enter image description here

3
icc97

標準は、背景や色ではなく、色や枠に関連しています。無効化された要素は通常、テキストがグレー表示されます。要素が無効になっている場合、ユーザーのアクションに応答せず、フォーカスできません。

一部のデザイナー/開発者は、ボタンがtype = "submit"の入力になることがあるので、背景/テキストの不透明度を低くしてこの状態を強調表示します。また、通常の状態で入力の背景も灰色の場合、灰色の背景が無効な状態であっても大きな違いはありませんが、不透明度を低くするとさらに効果があります。

0
Madalina Taina