Windows 10 allows users to set accent color for the system, and in UWP apps, we usually honor those settings by using XAML pre-defined resource keys like {ThemeResource SystemControlBackgroundAccentBrush}.

But regardless of how the user set default app mode to dark or light, when we apply text on accent colors, it may have some problems.

For example, when the App is in light mode, the default text color is black, when the accent color is a light color like light yellow, black text looks fine on it. However, if the user's accent color is set to dark blue, applying black text on to a dark blue background will make the text difficult to see. Same thing happens to a dark mode app, the text will be white by default, and it is hard to see on light accent colors.

So we need a way to check which type of accent color the user is selecting, and dynamically change the text color based on the accent color type. And we should not hard code against Windows pre-defined colors, because Windows allow user to create custom colors. So here is how to do it:

private bool IsAccentColorDark()
{
    var uiSettings = new UISettings();
    var c = uiSettings.GetColorValue(UIColorType.Accent);
    bool isDark = (5 * c.G + 2 * c.R + c.B) <= 8 * 128;
    return isDark;
}

Then we can set our text color based on the result:

TestText.Foreground = new SolidColorBrush(IsAccentColorDark() ? Colors.White : Colors.Black);
Dark Accent Color Light Accent Color

But this still have some problem, because we are hard coding the color values. A better solution is to use RequestedTheme to let the system manage the text color automatically, it can covers high contract scenarios:

TestText.RequestedTheme = IsAccentColorDark() ? ElementTheme.Dark : ElementTheme.Light;

Still, one problem remain. When the App is running, and the user changes accent color settings. The text color will not be automatically updated. To solve that, we need to write a converter:

public class SmartTextColorBasedOnAccentTypeConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        return (bool)value ? ElementTheme.Dark : ElementTheme.Light;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

Add it on to the page

<local:SmartTextColorBasedOnAccentTypeConverter x:Key="SmartTextColorBasedOnAccentTypeConverter" />

And make a property in your xaml.cs file:

private bool _isDarkAccent;

public bool IsDarkAccent
{
    get => IsAccentColorDark();
    set { _isDarkAccent = value; OnPropertyChanged(); }
}

And bind to it

<TextBlock x:Name="TestText"  Text="Some Text" 
           RequestedTheme="{x:Bind IsDarkAccent, 
           Converter={StaticResource SmartTextColorBasedOnAccentTypeConverter},
           Mode=OneWay}" />

Now, when the App is running, and the user changes accent color settings. The text color will be automatically updated to fit the current accent color type.