Colour contrast when the screen is in sunlight

Every colour decision in a fitness app is made indoors, on a calibrated display, at full brightness, by somebody who is sitting still. The app is then used in direct sun, through a film of sweat, at arm's length, by somebody whose eyes are bouncing. The palette that looked confident in the design review is a grey rectangle on a treadmill.

Both platforms publish guidance on this, and only one of them gives you numbers.

What Apple says#

Apple's Human Interface Guidelines say: "Strive to meet color contrast minimum standards." And: "To ensure all information in your app is legible, it's important that there's enough contrast between foreground text and icons and background colors."

Note the verb. Apple says strive to meet, so this page says strive to meet.

Apple also names the measurement standards. The sentence begins "Two popular standards of measure for color contrast are the", carries a link whose text our extraction did not capture, and ends with "the Accessible Perceptual Contrast Algorithm (APCA)". So what you can take from Apple here is that APCA is one of two popular standards of measure that Apple names. We are not going to guess at the other one, and nothing on this page rests on it.

What Google says, with numbers#

Google's Android accessibility guidance is specific:

"The exact threshold depends on the text's font size and whether the text appears in bold: If the text is smaller than 18sp, or if the text is bold and smaller than 14sp, use foreground and background colors that result in a color contrast ratio of at least 4.5:1. For all other text, set the color contrast ratio to at least 3:1."

For checking it, Google's advice on the same page is to "use an online color contrast checker or the Accessibility Scanner app."

Most of a workout screen lives in the top rows of that table. The hero timer might clear 18sp comfortably; the set labels, the unit suffixes, the secondary pace line and the rest-timer caption almost certainly do not. Teams tend to check the big number and ship the small ones.

Increase Contrast is a setting, and system colours respond to it#

Apple asks apps to respond to the system setting: "ensure it at least provides a higher contrast color scheme when the system setting Increase Contrast is turned on."

Apple also gives the low-effort route to that: "Prefer system-defined colors. These colors have their own accessible variants that automatically adapt when people adjust their color preferences, such as enabling Increase Contrast or toggling between the light and dark appearances."

That sentence is worth taking literally on a workout screen. Every hard-coded hex in your metrics view is a value that will not adapt when the user turns Increase Contrast on. A palette built from system-defined colours adapts without you writing a second palette, and the places where you genuinely need brand colour become a short list you can handle deliberately.

Brand colour was chosen for a slide, not for a treadmill#

An accent colour is usually picked because it looked good large, saturated and isolated on a white slide. On a workout screen it usually ends up as small text on a dark card, which is the exact case Google's 4.5:1 row is about.

Our judgement, not a platform statement: let brand colour own large non-text surfaces and let text colour be chosen for contrast. Nobody has ever uninstalled an app because the accent appeared on a fill instead of on a caption, and small brand-coloured text is the first place we would look on any screen that fails a checker.

Heart-rate zones are the failure that matters#

In our judgement this is the most common colour problem in fitness UI, and it is not a contrast problem at all. Five zones rendered as five hues, a ring that turns from one colour to another, a chart with coloured bands and a legend that is itself coloured squares. The colour is the entire message.

Apple's guidance addresses it directly: "For someone with red-green color blindness, these indicators might appear the same. Both visual indicators and color help differentiate between indicators."

The fix is to make hue the second channel rather than the only one. Put the zone number in the band. Label the ring with the zone name, not just its colour. Give the chart bands distinguishable fills or boundaries as well as distinguishable colours, and put the value on the axis. Anywhere a legend maps a colour to a meaning, ask what a user sees if the two colours are indistinguishable to them — if the answer is nothing, that legend carries no information. Which metric you are colouring in the first place is the heart-rate API's subject; making the resulting chart perceivable is this one's.

The same test applies to green-for-good and red-for-bad on form feedback, to the coloured dots that mark completed sets, and to a streak calendar where the only difference between a done day and a missed day is fill colour.

Sunlight, sweat and distance#

Three things happen outdoors that never happen at a desk, and none of them are claims about a platform.

Sunlight raises the light reflected off the glass, which compresses the difference between your foreground and your background regardless of what a checker said about the pair. Sweat, sunscreen and rain leave a film that scatters light across the whole screen, doing the same thing again. And distance costs you effective size: a phone on a bike mount or in a treadmill cradle is read from much further than a phone in the hand, and small low-contrast text is the first thing to disappear.

We have not measured any of that and we are not going to put numbers on it. The design consequence is directional and clear: on the screens used while moving, choose the higher end of the range rather than the threshold, prefer weight and size over cleverness, and be suspicious of any secondary text you can only read comfortably in a dim room. Building a running app is where all three conditions land at once, and the watch platform differences page covers the smaller screen version of the same problem.

Monday morning#

Take one screen — the live workout screen — and list every foreground and background pair on it. Run them through a contrast checker, which is Google's own suggestion, and sort by which fall under the 18sp line. Fix the small text first.

Then make a second list: every place where hue alone carries meaning. Zones, form feedback, set state, calendar fills, chart bands. Each one needs a second channel.

For tooling, Apple's Accessibility Inspector audits, in Apple's words, "appropriate text size and color contrast levels" alongside clipped text and unlabeled elements. On Android, Google's testing guidance describes the Accessibility Scanner as looking at "content labels, clickable items, contrast, and more", and a figure caption on that page states that "UI Check Mode shows previews of the UI with recommendations for how to fix insufficient color contrast."

Then do the part no tool does. Take the phone outside at midday, put it where your users put it, and read your own secondary text.