Color
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/
Color
カラー
Color is a great way to impart vitality, provide visual continuity, communicate status information, give feedback in response to user actions, and help people visualize data. Look to the system’s color scheme for guidance when picking app tint colors that look great individually and in combination, on both light and dark backgrounds.
色は見た目に活力を与え、視覚的な連続性を提供し、状態情報を伝達し、ユーザーの行動に応じてフィードバックを与え、人々がデータを視覚化するのを助ける素晴らしい方法です。 明るい背景と暗い背景の両方で、個別に、または組み合わせて最適な色合いの色を選ぶときは、システムの配色を見てください。
R 255G 59B 48
RedR 255G 149B 0
OrangeR 255G 204B 0
YellowR 76G 217B 100
GreenR 90G 200B 250
Teal BlueR 0G 122B 255
BlueR 88G 86B 214
PurpleR 255G 45B 85
PinkUse color judiciously for communication. The power of color to call attention to important information is heightened when used sparingly. For example, a red triangle that warns people of a critical problem becomes less effective when red is used elsewhere in an app for noncritical reasons.
コミュニケーションには慎重に色を使用してください。 重要な情報に注意を喚起する色の力は、控えめに使用する（多用しない）と高まります。 たとえば、重大な問題を警告する赤い三角形は、重要でない理由で赤がアプリケーション内の別の場所で使用されていると効果が低下します。
Use complementary colors throughout your app. The colors in your app should work well together, not conflict or distract. If pastels are essential to your app’s style, for example, use a coordinating set of pastels.
アプリ全体で補色を使用します。 あなたのアプリの色は、葛藤や混乱を招くことなく、うまく機能するはずです。 たとえば、パステルがアプリのスタイルに不可欠な場合は、調整可能なパステルセットを使用します。
In general, choose a limited color palette that coordinates with your app logo.Subtle use of color is a great way to communicate your brand.
一般的には、アプリのロゴから調整された、限られたカラーパレットを選択してください。色をうまく使用することは、ブランドに伝えるうえで最適な方法です。
Consider choosing a key color to indicate interactivity throughout your app. In Notes, interactive elements are yellow. In Calendar, interactive elements are red. If you define a key color that denotes interactivity, make sure other colors don’t compete with it.
アプリ全体で対話性を示すためにキーカラーを選択することを検討してください。 Notesでは、インタラクティブな要素は黄色です。 カレンダーでは、インタラクティブな要素は赤です。 インタラクティブ性を示すキーカラーを定義する場合は、他の色と競合しないようにしてください。
Avoid using the same color for interactive and noninteractive elements. If interactive and noninteractive elements have the same color, it’s hard for people to know where to tap.
対話型および非対話型の要素には同じ色を使用しないでください。 インタラクティブな要素と非インタラクティブな要素が同じ色を持つ場合、人々はどこでタップするのかを知ることは難しいです。
Enabled and disabled elements
Consider how artwork and translucency affect nearby colors. Variations in artwork sometimes warrant changes to nearby colors in order to maintain visual continuity and prevent interface elements from becoming overpowering or underwhelming. Maps, for example, displays a light color scheme when using map mode but switches to a dark color scheme when satellite mode is activated. Colors can also appear different when placed behind a translucent element, or when applied to a translucent element, such as a toolbar.
アートワークと透明度が近接要素の色にどのように影響するかを考えてください。視覚的な連続性を保ち、インターフェイス要素の印象が強くなりすぎるのを防ぐために、アートワークにバリエーションに応じて、近辺の色に影響させることがあります。 たとえば、マップは地図モードを使用しているときは明るい配色を表示しますが、サテライトモードがアクティブなときは暗い配色に切り替わります。 また、半透明要素の背後に配置したり、ツールバーなどの半透明要素に着色したりすると、色が異なるように見えることがあります。
Test your app’s color scheme under a variety of lighting conditions. Lighting varies significantly both indoors and outdoors, based on room ambiance, time of day, the weather, and more. Colors you see on your computer won’t always look the same when your app is used in the real world. Always preview your app under multiple lighting conditions, including outdoors on a sunny day, to see how colors appear. If necessary, adjust colors to provide the best possible viewing experience in the majority of use cases.
さまざまな照明条件下でアプリの配色をテストします。 照明は、部屋の雰囲気、時間帯、天候などに基づいて、屋内と屋外の両方で大きく異なります。 あなたのコンピュータで見られる色は、あなたのアプリが現実世界で使用されているときに常に同じに見えるとは限りません。 色がどのように表示されるかを確認するには、晴れた日の屋外など、複数の照明条件下でアプリを常にプレビューします。 必要に応じて、色を調整して、大部分のユースケースで最高の視聴体験を提供します。
Consider how the True Tone display affects color. The True Tone display uses ambient light sensors to automatically adjust the white point of the display to adapt to the lighting conditions of the current environment. Apps that focus primarily on reading, photos, video, and gaming can strengthen or weaken this effect by specifying a white point adaptivity style. For developer guidance, see Information Property List Key Reference.
True Toneディスプレイがどのように発色に影響するかを配慮してください。 True Toneディスプレイは、周囲光センサを使用して、現在の環境の照明条件に適応するようにディスプレイの白色点を自動的に調整します。 読書、写真、ビデオ、ゲームに焦点を当てたアプリは、ホワイトポイントのアダプティブスタイルを指定することで、この効果を強化または弱めることができます。 開発者ガイダンスについては、「情報プロパティーリストのキーリファレンス」を参照してください。
Be aware of colorblindness. Many colorblind people, for example, find it difficult to distinguish red from green (and either color from gray), or blue from orange. Avoid using these color combinations as the only way to distinguish between two states or values. For example, instead of using red and green circles to indicate offline and online, you could use a red square and a green circle. Some image-editing software includes tools that can help you proof for colorblindness.
色盲を意識してください。 例えば、多くの色盲人は、赤を緑色（および灰色）、または青色をオレンジ色から区別するのが難しいと感じています。 2つの状態や値を区別する唯一の方法として、これらの色の組み合わせを使用しないでください。 たとえば、赤と緑の円を使用してオフラインとオンラインを示す代わりに、赤い四角と緑の円を使用できます。 画像編集ソフトウェアの中には、色盲を証明するのに役立つツールがあります。
As seen without color blindness.
As seen with red-green color blindness.
Consider how your use of color might be perceived in other countries and cultures.In some cultures, for example, red communicates danger. In others, red has positive connotations. Make sure the colors in your app send the appropriate message.
あなたの色の使用が他の国や文化でどのように認識されるのかを考えてみましょう。例えば、赤は危険を伝える文化もあります。 他の国では、赤は肯定的な意味を持っています。 あなたのアプリの色が適切なメッセージを送信することを確認してください。
Use sufficient color contrast ratios. Insufficient contrast in your app makes content hard to read for everyone. Icons and text might blend with the background, for example. An online color contrast calculator can help you accurately analyze the color contrast in your app, to ensure that it meets optimal standards. Strive for a minimum contrast ratio of 4.5:1, although 7:1 is preferred because it meets more stringent accessibility standards.
十分な色コントラスト比を使用してください。 アプリのコントラストが不十分であると、誰もが読むことが難しくなります。 たとえば、アイコンやテキストが背景と混ざることがあります。 オンラインカラーコントラスト計算機を使用すると、アプリのカラーコントラストを正確に分析し、最適な基準を満たしているかどうかを確認できます。 4.5：1の最小コントラスト比を目指しますが、より厳しいアクセシビリティ基準を満たすため、7：1が好まれます。
Color Management
Apply color profiles to your images. The default color space on iOS is Standard RGB (sRGB). To ensure that colors are correctly matched to this color space, make sure your images include embedded color profiles.
画像にカラープロファイルを適用します。 iOSのデフォルトの色空間は標準RGB（sRGB）です。 色がこの色空間に正しく一致するようにするには、画像に埋め込みカラープロファイルが含まれていることを確認してください。
Use wide color to enhance the visual experience on compatible displays. Wide color displays support a P3 color space, which can produce richer, more saturated colors than sRGB. As a result, photos and videos that use wide color are more lifelike, and visual data and status indicators that use wide color are more impactful. When appropriate, use the Display P3 color profile at 16 bits per pixel (per channel) and export images in .png format. Note that a wide color display is needed to design wide color images and select P3 colors.
互換性のあるディスプレイでの視覚体験を向上させるためにワイドカラーを使用します。 ワイドカラーディスプレイはP3カラースペースをサポートしており、より豊かで飽和した色をsRGBよりも生成することができます。 その結果、ワイドカラーを使用する写真やビデオはよりリアルになり、ワイドカラーを使用するビジュアルデータとステータスインジケータはよりインパクトのあるものになります。 必要に応じて、ディスプレイP3カラープロファイルを1ピクセルあたり16ビット（1チャネルあたり）で使用し、画像を.png形式で書き出します。 ワイドカラー画像をデザインし、P3カラーを選択するには、ワイドカラーディスプレイが必要であることに注意してください。
Provide color space-specific image and color variations when the experience calls for it. In general, P3 colors and images tend to appear as expected on sRGB devices. Occasionally, however, it may be hard to differentiate between two very similar P3 colors when they're viewed in sRGB. Gradients that use colors in the P3 spectrum can also sometimes appear clipped on sRGB devices. To avoid these issues, you can provide distinct images and colors in the asset catalog of your Xcode project to ensure visual fidelity on both wide color and sRGB devices.
カラースペースに特化したイメージとカラーバリエーションがあればそれを提供します。 一般に、P3の色と画像は、sRGBデバイスでは期待どおりに表示される傾向があります。 しかし、時には、sRGBで見たときに非常に似通った2つのP3カラーを区別することは難しいかもしれません。 P3スペクトルで色を使用するグラデーションは、sRGBデバイスで切り取って表示されることもあります。 これらの問題を回避するために、Xcodeプロジェクトのアセットカタログに明確なイメージとカラーを提供して、ワイドカラーデバイスとsRGBデバイスの両方で視覚的な忠実性を確保することができます。
Preview your app’s colors on actual sRGB and wide color displays. Make adjustments as needed to ensure an equally great visual experience on both types of displays.
実際のsRGBおよびワイドカラーディスプレイでアプリの色をプレビューします。 両方のタイプのディスプレイで同じように優れた視覚体験を得るために、必要に応じて調整を行います。
