最も重要なことのいくつかは、高コントラスト、大きなテキスト、明るいデザインの暗いになります。
ハイコントラストデザインの良い例は、こちら Web Design Guru Blog にあります。彼らはいくつかの素晴らしい色の例を持っていますが、それを最小限に保つことを忘れないでください。
読みやすいようにテキストを大きくして、できるだけ多くのテキストを切り取ってください。インタラクション領域（ボタン/リンク）を大きくして、人々が押しやすいようにし、そのような要素の境界を非常に明確にして、見やすくします。
明るい背景の暗いテキストは重要です。明るさは、ほとんどのスマートフォンモデルで太陽を追い抜くための鍵です。
最も重要なこと：複数の主要なスマートフォンモデルでデザインをテストします。いくつかの違いを簡単に確認するには、このビデオをご覧ください 直射日光下でのスマートフォン画面の比較 。
IPhone 4S、Galaxy Nexusをテストして、それが終了したと言うだけではいけません。さまざまなデバイスの最も人気のある（最もハイテクではない）モデルをテストして、直射日光の下でディスプレイがどの程度よく見えるかを確認します。
実際のユーザーに直射日光の当たる晴れた日にサイトをテストしてもらいます。彼らはあなたのサイトが合理的に読みやすいかどうかを教えてくれるでしょう。可能であれば、電話のいくつかの異なるモデルも試してください。あなたやあなたのデザインチームは、彼らがサイトで何を探しているのかを知っており、新しいユーザーがそうでないかもしれないものを解析することができます。新鮮な表情が重要です。
直射日光で現れるこの独特の効果は solarization です。 「古い」プラズマテレビを斜めから見た場合も同様です。
ソラリゼーション 、16のカラーパレットは、科学的に設計およびテストされ、「さまざまな照明条件で」その他のプロパティ、選択的コントラスト：
Solarizedは明るさのコントラストを減らしますが、多くの低コントラストcolorchemesとは異なり、構文の強調表示の読みやすさのために（colorwheel関係に基づく）対照的な色相を保持します。
これにより、前述の高コントラストおよび大きな読み取り可能なフォント推奨事項。
これらはすべてのWebサイト、特にモバイルデバイス、さらには屋外で有効です。
- ハイコントラスト
- 明るい背景に暗いテキスト
- 実際のコンテンツに十分な大きさのフォントサイズ
- 否定的な空間を恐れないでください。コンテンツに余裕を持たせます。
- 可愛らしい外見より可読性を好む
- 速くするか、少なくとも不必要に遅くしない
- ボタンやリンクなどを配置するときにモバイルデバイスを保持するときの指の位置を考えます
色とコントラストについて...
コントラストの式は次のとおりです：contrast =（L1 + 0.05）/（L2 + 0.05）ここで、L1は2つの強度のうち明るい方で、L1とL2は次のように正規化されます。 [0,1]の範囲。
一般的に：
- 黒地に白と白地に黒のコントラストは同じになります。
- 灰色の白と白の灰色の結果は同じコントラストになります。
- 黒のグレーは、白のグレーよりもbetterコントラストになります。
太陽光の下：
- 白地に黒は白地に濃い灰色（高コントラスト）で表示されます。
- 白地に濃い灰色は白地に明るい灰色（低コントラスト）で表示されます。
- 黒地に白は濃い灰色（高コントラスト）に白く表示されます。
- 黒のライトグレーはダークグレーの白に表示されます（ハイコントラスト）。
さらに明るい日光の下：
- 白地に黒は白地に明るい灰色（低コントラスト）で表示されます。
- 白地に濃い灰色が白地に白で表示されます（コントラストなし）。
- 黒地に白は明るい灰色（低コントラスト）に白く表示されます。
- 黒のライトグレーは明るいグレーの白に表示されます（コントラストが低い）。
「日光の下」のポイント1と2と3と4からわかるように、明るいテキストの色合いの違いはより困難です。したがって、複数の色のテキストがあり、できることが重要である場合それらを区別して、明るい背景に暗いテキストが望ましいです。
「さらに明るい日光の下」のポイント1と2と3と4から、色合いの違いが不可能になり、暗い背景に明るいテキストが望ましいことがわかります（白の濃い灰色が白に白く表示されるため、はもう読めません）。