ウェブサイトをデザインするときに、ユーザーが色をどのように見るかを知るにはどうすればよいですか？

ウェブサイトをデザインするときに、ユーザーが色をどのように見るかを知るにはどうすればよいですか？MacbookやWindowsデスクトップ/ノートブックとはウェブサイトの色が異なって見えます。特に、デスクトップでは明るい色が見えません。たとえば、テーブルの灰色の境界線が見えません。

設計時に気にする必要があるのはどれですか。設計ソリューションを使用して、すべての画面を非常に類似させることができますか？

短い答え：そうではありません。

より長い回答：すべての画面設定と調整、状況、および視聴者の視覚（不）能力を考慮することは文字通り不可能です。そのため、たとえば、テキストとその背景のコントラストについて、少なくとも大部分の場合にある程度のユーザビリティを保証するためのガイドラインがあります。

私の個人的なワークフローには、少なくとも2つの未調整のモニターと、さまざまな照明状況におけるさまざまなモバイルデバイスでのいくつかのテストが含まれています。

W3Cは色の使用と必要なコントラストについていくつかのガイドラインを作成しました。個人的には、Lea Verouのテキストに対してこのコントラストツールを使用して、テキストの色がガイドラインに従っているか、少なくとも近いかどうかを確認しています。

そうする必要はありません。また、全員のモニター/デバイスで同じ設定を制御または適用することはできません。あなたができる最善のことは、ウェブ用のラスター画像をエクスポートするときにsRGBカラープロファイルを使用することです。

sRGBは、Web上で色を再現するための世界標準の色空間です。

これはある程度役立ちますが、最終的にはユーザー自身の設定により、デバイスでの画像の表示方法が決まります。明らかに、これはラスター画像用であり、ページ上の他のグラフィック要素ではありません。

今日の最新のブラウザーとコンピューターでは、正しい色の表示に問題が発生することはほとんどありません（その詳細については、https：//websafecolors.info/learnを参照してください）。

色が違って見えるのはディスプレイ自体のようです。これは、モニターの明るさ、コントラスト、および青色光レベルの設定が原因である可能性があります。さらに、LEDやパネルのタイプなどのモニターのテクノロジー自体が原因である可能性もあります。ディスプレイ間で一貫した設定を適用する方法や、設定を読み取ってWebサイトを調整する方法はありません。

Inspect Elementを使用して、各プラットフォームの色の16進コードを確認することをお勧めします。それらが同一であれば、それがディスプレイであることがわかります。解決策は、互いによりコントラストのある色を使用することです。これにより、すべての画面で目立つ可能性が高くなります。または、太いボーダー、またはボーダーレスのパッド入りテーブルを試してください！ほとんどのユーザーは高精細画面を使用しており、通常はピクセル単位のテキストとフォーマットを使用するテーブルデザインの可能性を広げます。

答えはノーです。なぜなら、ラップトップの色とデスクトップの色は各コンピューターで同じではないからです。色が同じであることを確認したい場合は、カラーコードを使用できます。たとえば、次のコードをcssに入力できます。

background-color: #D2B48C