Color

Color provides an intuitive way of communicating information to users. It can be used to signal interactivity, give feedback to user actions, convey state information, and give your interface a sense of visual continuity.

Use color carefully. 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. It's a good idea to choose one color to indicate elements of your application that are interactive. For example, many web pages use blue text to denote a hyperlink. This also means you should avoid using the same color for noninteractive elements, as users may find this confusing.

Color is personal. 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.

Accent color

Windows and Xbox users can pick a single color called an "accent" from the Settings > Personalization > Colors menu. This color is reflected throughout their experience--in the Start menu, the taskbar, and many other places. On Windows, they can choose from a curated set of 48 color swatches. On Xbox, they can choose from a palette of 21 colors.

Windows accent colors

FFB900 E74856 0078D7 0099BC 7A7574 767676
FF8C00 E81123 0063B1 2D7D9A 5D5A58 4C4A48
F7630C EA005E 8E8CD8 00B7C3 68768A 69797E
CA5010 C30052 6B69D6 038387 515C6B 4A5459
DA3B01 E3008C 8764B8 00B294 567C73 647C64
EF6950 BF0077 744DA9 018574 486860 525E54
D13438 C239B3 B146C2 00CC6A 498205 847545
FF4343 9A0089 881798 10893E 107C10 7E735F

Xbox accent colors

FF8C00 DE507F 0F68C2 137D7D 107C10 5D5A58
DE4710 AB0E6B 1A3999 4A9418 767676 7D705B
C20F1E 81318C 0F76B8 547A72 68768A 724F2F
A31127 744DA9 107D6D

You can personalize the experience of each user by incorporating their accent color into your application. For example, see how the Settings app highlights interactive elements of its interface using shades of the user accent color. Mouse settings accent color

In XAML, the primary accent color is exposed as a theme resource named SystemAccentColor

<SolidColorBrush x:Key"UserAccentColor" Color="{ThemeResource SystemAccentColor}" />

Avoid using the user's accent color as a background, especially for text and icons. Because the accent color can change, if you must use it as a background, additional work must be done to ensure that foreground text is easy to read. For example, if your text is white and the accent color is light gray, your text will be difficult to see because the contrast ratio between white and light gray is small. You can work around the issue by testing the accent color to determine whether it’s a dark color.

Use the following code to determine whether a background color is light or dark.

void accentColorUpdated(FrameworkElement elementWithText)
{
    var uiSettings = new Windows.UI.ViewManagement.UISettings();
    Windows.UI.Color c = uiSettings.GetColorValue(UIColorType.Accent);

    bool colorIsDark = (5 * c.G + 2 * c.R + c.B) <= 8 * 128;
    if (colorIsDark)
    {
        elementWithText.RequestedTheme = ElementTheme.Light;
    }
    else
    {
        elementWithText.RequestedTheme = ElementTheme.Dark;
    }
}

Once you’ve determined whether the accent color is light or dark, choose an appropriate foreground color. We recommend using SystemControlForegroundBaseHighBrush from the light theme for dark backgrounds and using the dark theme version, SystemControlForegroundAltHighBrush for light backgrounds.

Accent color palette

Once an accent color is selected, light and dark shades of the accent color are created based on HSB values of color luminosity. Apps can use shade variations to create visual hierarchy and to provide an indication of interaction.

By default, hyperlinks will use the user's accent color. If the page background is a similar color, you can choose to assign a lighter (or darker) shade of accent to the hyperlinks for better contrast.

The various light/dark shades of the default accent color.
3 shades lighter
2 shades lighter
1 shade lighter
Sample accent color
1 shade darker
2 shades darker
3 shades darker

Just like the primary accent, these shades are exposed as theme resources, labeled SystemAccentColorLight3, SystemAccentColorLight2, SystemAccentColorLight1, SystemAccentColorDark1, SystemAccentColorDark2, and SystemAccentColorDark3. You can also access them programmatically with the UISettings.GetColorValue method and UIColorType enum.

Here's an example of how color logic gets applied to a design spec. Redlines for Colored Action Center

Themes

Windows users can choose between a light, dark, or high contrast theme for their operating system. You can choose to alter the look of your application based on the user’s theme preference, or to opt out. For example, see how the Settings app changes to fit the user's chosen theme.

Color settings theme

To make designing for themes easier, Windows provides the following theme resources, which automatically adapt to the users theme and accent color.

Light theme

Base

The base light theme

Alt

The alt light theme

List

The list light theme

Chrome

The chrome light theme

Dark theme

Base

The base dark theme

Alt

The alt dark theme

List

The list dark theme

Chrome

The chrome dark theme

Changing the theme

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>

Removing the RequestedTheme property means that your application will honor the user’s system settings, and they will be able to view your app in either the dark or light themes.

Learn more

To learn more about theme resources and how to use them, see XAML theme resources

Color APIs

There are several APIs that can be used to add color to your application. First, the Colors class, which implements a large list of predefined colors. These can be accessed automatically with XAML properties. 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>

You can create your own colors from RGB or hex values using the Color struct in XAML.

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

You can also create the same color in code by using the FromArgb method.

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

The letters "Argb" stands for Alpha (opacity), Red, Green, and Blue, which are the four components of a color. Each argument can range from 0 to 255. You can choose to omit the first value, which will give you a default opacity of 255, or 100% opaque.

Note

If you're using C++, you must create colors by using the ColorHelper class.

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. 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>

The brush can then be applied to a XAML elements.

<Button 
  Background="{StaticResource ButtonBackgroundBrush}" 
  Foreground="{StaticResource ButtonForegroundBrush}">
    Button text
</Button>

Color picker control

The color picker is a new control introduced in the Fall Creators Update. It allows users to select colors in your application, using hex codes, RGB values, or by using its graphical interface. Use the color picker in scenarios where you want users to select colors in your application.

Color picker control

Accessibility

When considering what colors to use in your application, accessiblity should be a primary concern. Use the guidance below to make sure your application is accessible to as many users as possible.

Contrast

Make sure that elements and images have sufficient contrast to differentiate between them, regardless of the user's chosen theme. We recommend maintaining a contrast ratio for text of 4.5:1 against the background for optimal readability. There are many free tools available to test whether or not your colors pass, like Contrast Ratio.

Many users will require an extra-high level of contrast to differentiate between elements. Windows 10 comes with built-in high contrast themes, which automatically effect common controls in UWP apps. See High contrast themes to learn how to optimize your user interface for use with high contrast themes.

Transparency

Adding transparency effects to elements like the new acrylic brush can make your app more exciting and help establish a visual hierarchy, but be aware of how these effects can affect accessibility. A translucent background with low opacity could make foreground text hard to read if an element moves behind it with low contrast to the text. Make sure that foreground elements are still legible, no matter how their background shifts.

Lighting

Be aware that variation in ambient lighting can affect the useability 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. (This a great reason to implement both light and dark themes in your application!) Always be sure to test your application in a variety of indoor and outdoor environments.

Colorblindness

Be aware of how colorblindness could affect the useability of your application. For example, a user with red-green colorblindness will have difficulty distinguishing red and green elements from each other. Avoid using these color combinations as the sole differentiator between application elements, or consider adding a colorblind-safe mode, which alters the color palette used to make it more accessible.

Learn more

To learn more about accessibility outside the realm of color, see the Accessibility home page.