web-dev-qa-db-ja.com

グーグルマップの高コントラスト/可視色

Googleマップを使用するアプリケーションのカスタムマーカーをいくつか作成しています

彼らはレッカー車と壊れた車の略です。

重要な制約は、多くの状況で、以下のマップと対比する必要があることです。たとえば、ライトブルー（水とのコントラストが低い）とライトグリーン（公園とのコントラストが低い）は除外されます。

この例では、レッカー車（私は満足しています）と壊れた車（コントラストが悪いと思います）があります。

どの色がぴったりでしょうか？

デザインに色彩理論があることは理解していますが、それについては何も知りません。それへの適切な指針を持つ説明は、特に貴重です。

example

iconscolorcontrast
4
josinalvo

色理論から覚えておくべきことがいくつかあります：色相、彩度、明度。ここに良いリファレンスがあります： http://www.colorsontheweb.com/Color-Theory/Color-Contrast

最大のコントラストを持つ2色を探している場合は、WebAIM Color Contrast Analyzerを使用します。 https://webaim.org/resources/contrastchecker/

それはあなたの2色に基づいて4つの評価を与えます。 4つの評価は、Webコンテンツアクセシビリティガイドラインを参照しています。最大のコントラストと読みやすさのために、4つすべての評価でPASSを探す必要があります。

Googleマップの色を背景として貼り付け、前景の色と明るさを試して、カラーパレットやブランドを維持しながら、希望のコントラストを実現します。

Googleマップが使用する色（私が取ったスクリーンショットのAFAIK）は次のとおりです。

  • 水：＃A3CCFF
  • 公園：＃CBE6A3
  • 都市：#DFDFDF
  • ストリート：＃FDE7C4
  • 高速道路：＃FED89D
3
kerr

幸運なことに、ほとんどの人はこれらのドロップ型のタグをGoogleマップで探すことを知っています。これにより、色を選択する作業が簡単になります（それほど重要ではありません）。

私はそれを安全にプレイし、色を選択しません。 Googleマップでは、クレヨンボックスのほとんどの色がすでに使用されています。そして、誰が将来どんな機能が来るかを知っています。したがって、「コンストラクションイエロー」で黒一色の形状を使用することは、IMOの中で何よりも際立っています。

また、2つのタグのみを使用している場合は、2つのアイコンを別の色にする必要がないことも認めます。

enter image description here

2
jhurley