Color

ヒーロー イメージ

色は、アプリの中でユーザーに情報を伝える直感的な方法です。操作可能な要素の強調、ユーザー操作に対するフィードバックの提供、インターフェイスの連続感の演出を色によって行うことができます。Color provides an intuitive way of communicating information to users in your app: it can be used to indicate interactivity, give feedback to user actions, and give your interface a sense of visual continuity.

UWP アプリでの色使いは、主にアクセント カラーとテーマによって指定します。In UWP apps, colors are primarily determined by accent color and theme. この記事では、アプリで色を使用する方法と、アクセント カラーとテーマ リソースを使用して、任意のテーマに対応して UWP アプリを使用できるように設定する方法について説明します。In this article, we'll discuss how you can use color in your app, and how to use accent color and theme resources to make your UWP app usable in any theme context.

色使いの原則Color principles

色が意味を持つように使用します。Use color meaningfully. 重要な要素が強調されるように控え目に色を使用すると、柔軟で直感的なユーザー インターフェイスの作成に役立ちます。When color is used sparingly to highlight important elements, it can help create a user interface that is fluid and intuitive.

操作対象の要素を示すために色を使用します。Use color to indicate interactivity. アプリケーションの中で、操作の対象要素を示す色を 1 つ決めておくことをお勧めします。It's a good idea to choose one color to indicate elements of your application that are interactive. たとえば、多くの Web ページでは、ハイパーリンクを示すために青色のテキストを使用しています。For example, many web pages use blue text to denote a hyperlink.

色は個々のユーザーが設定できます。Color is personal. Windows では、ユーザーがアクセント カラーや淡色/濃色のテーマを選んで、各自のエクスペリエンス全体に適用できます。In Windows, users can choose an accent color and a light or dark theme, which are reflected throughout their experience. 開発者は、ユーザーが選んだアクセント カラーとテーマをどのようにアプリケーションに組み込んで、個人に応じたエクスペリエンスを提供するかを選択できます。You can choose how to incorporate the user's accent color and theme into your application, personalizing their experience.

色の解釈は文化によって異なります。Color is cultural. アプリで使用する色が、異なる文化圏のユーザーにどのように解釈されるかを考慮してください。Consider how the colors you use will be interpreted by people from different cultures. たとえば、文化によっては、青が美徳と保護を表すこともあれば、服喪を連想させることもあります。For example, in some cultures the color blue is associated with virtue and protection, while in others it represents mourning.

テーマThemes

UWP アプリでは、淡色または濃色のアプリケーション テーマを使用できます。UWP apps can use a light or dark application theme. テーマは、アプリの背景、テキスト、アイコン、コモン コントロール に反映されます。The theme affects the colors of the app's background, text, icons, and common controls.

淡色テーマLight theme

淡色テーマ

濃色テーマDark theme

濃色テーマ

既定では、UWP アプリのテーマは、ユーザーが Windows の設定で選択したテーマか、デバイスの既定のテーマ (XBox では黒など) に設定されます。By default, your UWP app's theme is the user’s theme preference from Windows Settings or the device's default theme (i.e., dark on XBox). ただし、開発者が UWP アプリのテーマを設定することもできます。However, you can set the theme for your UWP app.

テーマの変更Changing the theme

テーマを変更するには、App.xaml ファイルで RequestedTheme プロパティを変更します。You can change themes by changing the RequestedTheme property in your App.xaml file.

<Application
    x:Class="App9.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App9"
    RequestedTheme="Dark">
</Application>

RequestedTheme プロパティを削除すると、アプリケーションでユーザーのシステム設定が使用されるようになります。Removing the RequestedTheme property means that your application will use the user’s system settings.

ユーザーはまたハイ コントラスト テーマを使用することができます。これはインターフェイスを見やすくするために、コントラストの大きい、少数の色のパレットを使ったテーマです。Users can also select the high contrast theme, which uses a small palette of contrasting colors that makes the interface easier to see. ハイ コントラスト テーマを使用した場合、開発者が設定した RequestedTheme はシステムによって上書きされます。In that case, the system will override your RequestedTheme.

テーマのテストTesting themes

アプリのテーマを指定しない場合は、必ず淡色テーマと濃色テーマの両方でアプリをテストして、あらゆる条件でアプリが判読できることを確認します。If you don't request a theme for your app, make sure to test your app in both light and dark themes to ensure that your app will be legible in all conditions.

注意:Visual Studio では、RequestedTheme の既定値が淡色に設定されているため、両方をテストするには、RequestedTheme を変更する必要があります。Note: In Visual Studio, the default RequestedTheme is light, so you'll need to change the RequestedTheme to test both.

テーマ ブラシTheme brushes

コモン コントロールでは、テーマ ブラシが自動的に作動して、淡色テーマと濃色テーマのコントラストが調整されます。Common controls automatically use theme brushes to adjust contrast for light and dark themes.

たとえば、AutoSuggestBox でテーマ ブラシが使用される方法を以下に示します。For example, here's an illustration of how the AutoSuggestBox uses theme brushes:

テーマ ブラシ コントロールの例

テーマ ブラシは、以下の目的で使用されます。The theme brushes are used for the following purposes:

  • Base はテキストの設定に使用されます。Base is for text.
  • Alt は、Base の反転色の設定に使用されます。Alt is the inverse of Base.
  • Chrome は、最上位の要素 (ナビゲーション ウィンドウやコマンド バーなど) の設定に使用されます。Chrome is for top-level elements, such as navigation panes or command bars.
  • List は、リスト コントロールの設定に使用されます。List is for list controls.

Low/Medium/High は色密度を指します。Low/Medium/High refer to the intensity of the color.

テーマ ブラシの使用Using theme brushes

カスタム コントロールのテンプレートを作成する際は、ハード コードで色の値を設定するのではなく、テーマ ブラシを使用することをお勧めします。When creating templates for custom controls, use theme brushes rather than hard code color values. これにより、アプリがあらゆるテーマに容易に適応できるようになります。This way, your app can easily adapt to any theme.

たとえば、これらの ListView 用の項目テンプレートは、カスタム テンプレートでテーマ ブラシを使用する方法を示しています。For example, these item templates for ListView demonstrate how to use theme brushes in a custom template.

アイコンが付いた 2 行のリスト項目の例

<ListView ItemsSource="{x:Bind ViewModel.Recordings}">
    <ListView.ItemTemplate>
        <DataTemplate x:Name="DoubleLineDataTemplate" x:DataType="local:Recording">
            <StackPanel Orientation="Horizontal" Height="64" AutomationProperties.Name="{x:Bind CompositionName}">
                <Ellipse Height="48" Width="48" VerticalAlignment="Center">
                    <Ellipse.Fill>
                        <ImageBrush ImageSource="Placeholder.png"/>
                    </Ellipse.Fill>
                </Ellipse>
                <StackPanel Orientation="Vertical" VerticalAlignment="Center" Margin="12,0,0,0">
                    <TextBlock Text="{x:Bind CompositionName}"  Style="{ThemeResource BaseTextBlockStyle}" Foreground="{ThemeResource SystemControlPageTextBaseHighBrush}" />
                    <TextBlock Text="{x:Bind ArtistName}" Style="{ThemeResource BodyTextBlockStyle}" Foreground="{ThemeResource SystemControlPageTextBaseMediumBrush}"/>
                </StackPanel>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

アプリでテーマ ブラシを使用する方法について詳しくは、テーマ リソースに関するページをご覧ください。For more information about how to use theme brushes in your app, see Theme Resources.

アクセント カラーAccent color

コモン コントロールでは、アクセント カラーを使用して、状態情報を伝達します。Common controls use an accent color to convey state information. アクセント カラーは、既定では、ユーザーが設定で選択した SystemAccentColor が使用されます。By default, the accent color is the SystemAccentColor that users select in their Settings. ただし、組織のブランドを反映するように、アプリのアクセント カラーをカスタマイズすることもできます。However, you can also customize your app's accent color to reflect your brand.

Windows コントロール

ユーザーが選択したアクセント ヘッダー ユーザーが選択したアクセント カラーuser-selected accent header user-selected accent color

カスタムのアクセント ヘッダー カスタムのブランド アクセント カラーcustom accent header custom brand accent color

アクセント カラーの上書きOverriding the accent color

アプリのアクセント カラーを変更するには、次のコードを app.xaml に追加します。To change your app's accent color, place the following code in app.xaml.

<Application.Resources>
    <ResourceDictionary>
        <Color x:Key="SystemAccentColor">#107C10</Color>
    </ResourceDictionary>
</Application.Resources>

アクセント カラーの選択Choosing an accent color

アプリに対してカスタムのアクセント カラーを選択した場合は、アクセント カラーを使用したテキストと背景との間に十分なコントラストがあり、テキストを適切に判読できることを確認してください。If you select a custom accent color for your app, please make sure that text and backgrounds that use the accent color have sufficient contrast for optimal readability. コントラストをテストするには、Windows の設定でカラー ピッカー ツールを使用するか、これらのオンライン コントラスト ツールを使用します。To test contrast, you can use the color picker tool in Windows Settings, or you can use these online contrast tools.

Windows の設定のアクセント カラー ピッカー

アクセント カラー パレットAccent color palette

Windows シェルのアクセント カラーのアルゴリズムによって、アクセント カラーの淡色と濃色の色調が生成されます。An accent color algorithm in the Windows shell generates light and dark shades of the accent color.

アクセント カラー パレット

これらの色調には、以下のテーマ リソースとしてアクセスできます。These shades can be accessed as theme resources:

  • SystemAccentColorLight3
  • SystemAccentColorLight2
  • SystemAccentColorLight1
  • SystemAccentColorDark1
  • SystemAccentColorDark2
  • SystemAccentColorDark3

また UISettings.GetColorValue メソッドと UIColorType 列挙型を使って、プログラムによってアクセント カラー パレットにアクセスすることもできます。You can also access the accent color palette programmatically with the UISettings.GetColorValue method and UIColorType enum.

アクセント カラー パレットを使用して、アプリの色のテーマを設定できます。You can use the accent color palette for color theming in your app. 以下では、ボタンに対してアクセント カラー パレットを使用する方法の例を示します。Below is an example of how you can use the accent color palette on a button.

アクセント カラー パレットのボタンへの適用

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="ButtonBackground" Color="{ThemeResource SystemAccentColor}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="{ThemeResource SystemAccentColorLight1}"/>
                <SolidColorBrush x:Key="ButtonBackgroundPressed" Color="{ThemeResource SystemAccentColorDark1}"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Page.Resources>

<Button Content="Button"></Button>

テキスト色と背景色の両方を設定する場合は、テキストと背景の間に十分なコントラストがあることを確認します。When using colored text on a colored background, make sure there is enough contrast between text and background. 既定では、ハイパーリンクまたはハイパーテキストにはアクセント カラーが使用されます。By default, hyperlink or hypertext will use the accent color. 背景にアクセント カラーのバリエーションを適用する場合は、元のアクセント カラーのバリエーションを使用して、背景色とテキスト色のコントラストを最適化します。If you apply variations of the accent color to the background, you should use a variation of the original accent color to optimize the contrast of colored text on a colored background.

以下の表は、さまざまな色調のアクセント カラーと、色付きの表面上での文字色の見え方の例を示します。The chart below illustrates an example of the various light/dark shades of accent color, and how colored type can be applied on a colored surface.

色調の組み合わせ

コントロールのスタイルについて詳しくは、「XAML スタイル」をご覧ください。For more information about styling controls, see XAML styles.

色の APIColor API

アプリケーションに色を追加できる API は複数存在します。There are several APIs that can be used to add color to your application. まず、Colors クラスを使用すると、多数の色があらかじめ定義された一覧を実装できます。First, the Colors class, which implements a large list of predefined colors. これらは、XAML プロパティを使用して自動的にアクセスできます。These can be accessed automatically with XAML properties. 以下の例では、ボタンを作成して、Color クラスのメンバーに背景色プロパティと前景色プロパティを設定しています。In the example below, we create a button and set the background and foreground color properties to members of the Colors class.

<Button Background="MediumSlateBlue" Foreground="White">Button text</Button>

XAML で Color 構造体を使用すると、RGB または 16 進数値によって独自の色を作成できます。You can create your own colors from RGB or hex values using the Color struct in XAML.

<Color x:Key="LightBlue">#FF36C0FF</Color>

また FromArgb メソッドを使用すると、コード内で同じ色を作成できます。You can also create the same color in code by using the FromArgb method.

Color LightBlue = Color.FromArgb(255,54,192,255);

"Argb" という文字は、色の 4 つの構成要素であるアルファ (Alpha、不透明度)、赤 (Red)、緑 (Green)、青 (Blue) の頭文字です。The letters "Argb" stands for Alpha (opacity), Red, Green, and Blue, which are the four components of a color. 各引数の設定可能な範囲は、0 ~ 255 です。Each argument can range from 0 to 255. 最初の値は省略可能です。その場合、透明度が既定値の 255、つまり 100% 不透明に設定されます。You can choose to omit the first value, which will give you a default opacity of 255, or 100% opaque.

注意

C++ を使用している場合、ColorHelper クラスを使って色を作成する必要があります。If you're using C++, you must create colors by using the ColorHelper class.

Color は、UI 要素を単色で塗りつぶす SolidColorBrush の引数として使用されるのが最も一般的です。The most common use for a Color is as an argument for a SolidColorBrush, which can be used to paint UI elements a single solid color. このようなブラシは、通常、ResourceDictionary で定義されているため、複数の要素に再利用できます。These brushes are generally defined in a ResourceDictionary, so they can be reused for multiple elements.

<ResourceDictionary>
    <SolidColorBrush x:Key="ButtonBackgroundBrush" Color="#FFFF4F67"/>
    <SolidColorBrush x:Key="ButtonForegroundBrush" Color="White"/>
</ResourceDictionary>

ブラシの使用方法について詳しくは、XAML ブラシに関するページをご覧ください。For more information on how to use brushes, see XAML brushes.

システムの色の範囲設定Scoping system colors

アプリで独自の色を定義するだけでなく、ColorPaletteResources タグを使用して、体系化された色の範囲をアプリ全体の目的の領域に設定することもできます。In addition to defining your own colors in your app, you can also scope our systematized colors to desired regions throughout your app by using the ColorPaletteResources tag. この API を使用すると、いくつかのプロパティを設定して一度に多数のコントロールを色分けし、テーマを設定できるだけでなく、独自のカスタムの色を手動で定義する方法では通常得られないシステム上のメリットも数多く受けられます。This API allows you to not only colorize and theme large groups of controls at once by setting a few properties, but also gives you many other system benefits that you wouldn't normally get with defining your own custom colors manually:

  • ColorPaletteResources を使用して設定された色は、ハイ コントラストに影響しません。Any color set using ColorPaletteResources will not effect High Contrast
    • つまり、デザインや開発に追加コストをかけずに、より多くの人がアプリを利用できることを意味します。Meaning your app will be accessible to more people without any additional design or dev cost
  • API に 1 つのプロパティを設定することで、両方のテーマの色を淡色、濃色、または広範囲に簡単に設定できます。Can easily set colors to Light, Dark or pervasive across both themes by setting one property on the API
  • 色を ColorPaletteResources に設定すると、そのシステム カラーも使用するすべての同様のコントロールにも反映されます。Colors set on ColorPaletteResources will cascade down to all similar controls that also use that system color
    • これにより、ブランドの外観を維持しながら、アプリ全体で一貫したカラー ストーリーを実現できます。This ensures that you will have a consistent color story across your app while maintaining the look of your brand
  • テンプレートを再作成することなく、すべての視覚的な状態、アニメーション、不透明度のバリエーションに影響します。Effects all visual states, animations and opacity variations without needing to re-template

ColorPaletteResources の使用方法How to use ColorPaletteResources

ColorPaletteResources は、どのリソースがどこにスコープされているかをシステムに通知する API です。ColorPaletteResources is an API that tells the system what resources are being scoped where. ColorPaletteResources は必ず x:Key を受け取ります。これは次の 3 つの選択肢のいずれかの可能性があります。ColorPaletteResources must take an x:Key, that can be one of three choices:

  • DefaultDefault
    • 色の変化を淡色濃色の両方のテーマで表示しますWill show your color changes in both Light and Dark theme
  • 淡色Light
  • 濃色Dark

x:Key を設定すると、どちらのテーマでも、異なるカスタムの外観が必要な場合に、システムまたはアプリのテーマに合わせて色が適切に変更されます。Setting that x:Key will ensure that your colors change appropriately to the system or app theme, should you want a different custom appearance when in either theme.

範囲が指定された色を適用する方法How to apply scoped colors

XAML の ColorPaletteResources API を使用してリソースの範囲を指定すると、テーマ リソース ライブラリにあるシステム カラーまたはブラシを使って、ページまたはコンテナーの範囲内で再定義できます。Scoping resources through the ColorPaletteResources API in XAML allows you to take any system color or brush that's in our theme resources library and redefine them within the scope of a page or container.

たとえば、グリッドの内側に BaseLowBaseMediumLow の 2 つのシステム カラーを定義してから、そのグリッドの内側に 1 つ、外側に 1 つの 2 つのボタンをページに配置したとします。For example, if you defined two system colors - BaseLow and BaseMediumLow inside a grid, and then placed two buttons on your page: one inside that grid, and one outside:

<Grid x:Name="Grid_A">
    <Grid.Resources>
        <ColorPaletteResources x:Key="Default"
        BaseLow="LightGreen"
        BaseMediumLow="DarkCyan"/>
    </Grid.Resources>

    <Buton Content="Button_A"/>
</Grid>
<Buton Content="Button_B"/>

Button_A には新しい色が適用され、Button_B はシステムの既定ボタンのままのように見えます。You would get Button_A with the applied new colors, and Button_B would remain looking like our system default button:

ボタンの範囲が指定されたシステム カラー

ただし、すべてのシステム カラーは他のコントロールにも反映されるため、BaseLow および BaseMediumLow の設定はボタン以外にも影響します。However, since all our system colors cascade down to other controls too, setting BaseLow and BaseMediumLow will affect more than just buttons. この場合、ToggleButtonRadioButtonSlider のようなコントロールも、このようなシステム カラーの変更の影響を受けます (これらのコントロールが上の例のグリッドの範囲に配置されている場合)。In this case, controls like ToggleButton, RadioButton and Slider will also be effected by these system color changes, should those controls be put in above example grid's scope. システム カラーの変化を "1 つのコントロールのみ" の範囲に指定する場合は、それを行うためにそのコントロールのリソース内で ColorPaletteResources を定義します。If you wish to scope a system color change to a single controls only you can do so by defining ColorPaletteResources within that control's resources:

<Grid x:Name="Grid_A">
    <Button Content="Button_A">
        <Button.Resources>
            <ColorPaletteResources x:Key="Default"
                BaseLow="LightGreen"
                BaseMediumLow="DarkCyan"/>
        </Button.Resources>
    </Button>
</Grid>
<Button Content="Button_B"/>

基本的には以前とまったく同じですが、グリッドに追加される他のコントロールでは、その色の変化が選択されなくなります。You essentially have the exact same thing as before, but now any other controls added to the grid will not pick up the color changes. これは、それらのシステム カラーの範囲が Button_A のみだからです。This is because those system colors are scoped to Button_A only.

範囲が指定されたリソースを入れ子にするNesting scoped resources

システム カラーを入れ子にとすることもできます。そのためには、アプリ レイアウトのマークアップ内で入れ子になった要素のリソースに ColorPaletteResources を配置します。Nesting system colors is also possible, and is done so by placing ColorPaletteResources in the nested elements' resources within the markup of your app layout:

<Grid x:Name="Grid_A">
    <Grid.Resources>
        <ColorPaletteResources x:Key="Default"
            BaseLow="LightGreen"
            BaseMediumLow="DarkCyan"/>
    </Grid.Resources>

    <Button Content="Button_A"/>
    <Grid x:Name="Grid_B">
        <Grid.Resources>
            <ColorPaletteResources x:Key="Default"
                BaseLow="Goldenrod"
                BaseMediumLow="DarkGoldenrod"/>
        </Grid.Resources>

        <Button Content="Nested Button"/>
    </Grid>
</Grid>

この例では、Button_AGrid_A のリソースの色の定義を継承し、入れ子になったボタンGrid_B のリソースから色を継承します。In this example, Button_A is inheriting colors define in Grid_A's resources, and Nested Button is inheriting colors from Grid_B's resources. その延長で話すと、Grid_B 内に配置されている他のすべてのコントロールでは、Grid_A のリソースがチェックまたは適用される前に、まず Grid_B のリソースがチェックまたは適用されます。また、ページやアプリのレベルで何も定義されていない場合は、最終的に既定の色が適用されます。By extension, this means that any other controls placed within Grid_B will check or apply Grid_B's resources first, before checking or applying Grid_A's resources, and finally applying our default colors if nothing is defined at the page or app level.

これは、リソースに色の定義がある入れ子になった要素数がいくつでも機能します。This works for any number of nested elements whose resources have color definitions.

ResourceDictionary を使った範囲指定Scoping with a ResourceDictionary

コンテナーやページのリソースに限定されず、ResourceDictionary でこのようなシステム カラーを定義することもできます。通常、これはディクショナリの統合と同じ方法で任意の範囲で統合できます。You are not limited to a container or page’s resources, and can also define these system colors in a ResourceDictionary that can then be merged at any scope the way you normally would merge a dictionary.

MyCustomTheme.xamlMyCustomTheme.xaml

まず、ResourceDictionary を作成します。First, you would create a ResourceDictionary. 次に、ColorPaletteResources を ThemeDictionaries 内に配置し、希望のシステム カラーをオーバーライドします。Then place the ColorPaletteResources within the ThemeDictionaries and override the desired system colors:

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestApp">

    <ResourceDictionary.ThemeDictionaries>
        <ResourceDictionary x:Key="Default">
            <ResourceDictionary.MergedDictionaries>

                <ColorPaletteResources x:Key="Default"
                    Accent="#FF0073CF"
                    AltHigh="#FF000000"
                    AltLow="#FF000000"/>

            </ResourceDictionary>
        </ResourceDictionary.MergedDictionaries>        
    </ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>

MainPage.xamlMainPage.xaml

レイアウトを含むページで、目的の範囲でそのディクショナリを統合します。On the page containing your layout, simply merge that dictionary in at the scope you want:

<Grid x:Name="Grid_A">
    <Grid.Resources>
            <ResourceDictionary>
                <ResourceDictionary.MergedDictionaries>
                    <ResourceDictionary Source="MyCustomTheme.xaml"/>
                </ResourceDictionary.MergedDictionaries>
            </ResourceDictionary>
    </Grid.Resources>

    <Button Content="Button_A"/>
</Grid>

これで、すべてのリソース、テーマ設定、およびカスタムの色を 1 つの MyCustomTheme リソース ディクショナリに配置し、レイアウトのマークアップを複雑にすることなく、必要に応じて範囲を指定できます。Now, all resources, theming, and custom colors can be placed in a single MyCustomTheme resource dictionary and scoped where needed without having to worry about extra clutter in your layout markup.

色のリソースを定義するその他の方法Other ways to define color resources

ColorPaletteResources では、システム カラーを配置して、インラインではなくラッパーとしてその中で直接定義することもできます。ColorPaletteResources also allows for system colors to be placed and defining directly within it as a wrapper, rather than in line:

<ColorPaletteResources x:Key="Dark">
    <Color x:Key="SystemBaseLowColor">Goldenrod</Color>
</ColorPaletteResources>

ユーザビリティUsability

コントラストの図

コントラストContrast

アクセント カラーやテーマに関係なく、要素とイメージに、それぞれを区別するのに十分なコントラストがあることを確認してください。Make sure that elements and images have sufficient contrast to differentiate between them, regardless of the accent color or theme.

アプリケーションで使用する色を検討するときは、アクセシビリティが主要な考慮事項になります。When considering what colors to use in your application, accessibility should be a primary concern. 以下のガイダンスを使用して、できるだけ多くのユーザーがアプリケーションにアクセスできるようにしてください。Use the guidance below to make sure your application is accessible to as many users as possible.

コントラストの図

照明Lighting

環境光の変化がアプリのユーザビリティに影響する可能性があることに注意してください。Be aware that variation in ambient lighting can affect the usability of your app. たとえば、背景が黒のページは、画面の輝きによって外で読めなくなる可能性があり、背景が白のページは、暗い部屋では見づらくなる可能性があります。For example, a page with a black background might unreadable outside due to screen glare, while a page with a white background might be painful to look at in a dark room.

コントラストの図

色覚障碍Colorblindness

色覚障碍によるアプリケーションのユーザビリティへの影響に注意してください。Be aware of how colorblindness could affect the usability of your application. たとえば、赤と緑の色覚障碍のあるユーザーは、赤と緑の要素をそれぞれ区別するのが困難になります。For example, a user with red-green colorblindness will have difficulty distinguishing red and green elements from each other. 男性の約 8%女性の約 0.5% に赤と緑の色覚障碍があるため、これらの色の組み合わせをアプリケーション要素の唯一の差別化要因として使用することは避けてください。About 8 percent of men and 0.5 percent of women are red-green colorblind, so avoid using these color combinations as the sole differentiator between application elements.