Ignore increased color scheme contrast for SwiftUI Color or View

Question

The settings options in my app are styled with an icon on a solid colour background and a text label next to them, similar to the items in Apple's iOS Settings app:

HStack(alignment: .center, spacing: 0) {
    Image(...)
    .foregroundColor(.white)
    .frame(width: 28, height: 28, alignment: .center)
    .background(
        RoundedRectangle(cornerRadius: 6, style: .continuous)
        .fill(Color.blue)) // Color may be a property instead, simplified here.
    .accessibility(hidden: true)

    Text(title)
        .font(.system(
            size: 16,
            weight: .medium,
            design: .rounded))
        .padding(.leading)
}

However, I've noticed that the background color (SwiftUI Color) for my icon views change when the system 'Increase Contrast' accessibility option is enabled, whereas the background colour of Apple's Settings icons do not. As an example, Color.orange looks more like a red color when 'Increase Contrast' is enabled.

I'd therefore like to ignore the current color scheme's contrast setting (ColorSchemeContrast environment value) if it's set to .increased, just for the background colour of my icon view.

Unfortunately, using the environment modifier gives an error, as .colorSchemeContrast is not a writable property: .environment(\.colorSchemeContrast, .standard). This is similarly documented by Apple: "Your app cannot override the user’s choice.".

I'm only trying to avoid specific small areas of colour changing when contrast is increased, as Apple themselves do, so I can only assume there should be some way of achieving this.

Is there any other way to work around this issue?

user_2378196 · Answer

Answer might come late, but I've stumbled into this problem myself and found a solution.

Supporting Light & Dark modus with custom colors

First of all, whenever you want to use custom colors and support both Light & Dark modus, It's always a good idea to create a custom color in your Asset library:

Go to your asset library (Usually images.xcassets)
Click + in the Assets Navigator
Select 'Color Set' and give your new color a name
In the inspector area (right of the screen), select the Attributes Inspector, and set 'Appearances' to 'Any, Light, Dark'. This will allow you to provide a color for all appearances.

If you then use Color("testColor") or UIColor(named: testColor), you'll see that your color automatically adapts light & dark mode

Anticipating for High Contrast

When users enable High Contrast in their system accessibility settings, you'll notice that your colors don't anticipate on both light & dark modus anymore. Don't worry though, enabling this is a matter of simply checking a checkbox:

Go to your asset library
Select the color for which you want to support high system contrast
Check the 'High Contrast' Checkbox

This allow you to define another custom color for high system contrast, but by default it just copies the colors you already defined earlier.

Ignore increased color scheme contrast for SwiftUI Color or View

1 Answers