# Using tokens in charts

Give every chart series equal contrast, plus a second cue for readers who can't tell hues apart.

Give every series in a chart the same contrast, so no series looks more important than another. Take one family per series from a [harmony](https://colortokenskit.com/advanced/color-theory/index.md#other-hues-that-go-with-yours), and draw each with its [`foregroundTertiary`](https://colortokenskit.com/getting-started/semantic-tokens/index.md) token:

```swift
import Charts

struct Booking: Identifiable {
    let id = UUID()
    let month: String
    let kind: String
    let count: Int
}

struct BookingsChart: View {
    let bookings: [Booking]
    let kinds = ["Flights", "Hotels", "Tours"]
    let colors = brand.triad.map(\.foregroundTertiary)   // _700 in light mode, _300 in dark

    var body: some View {
        Chart(bookings) { booking in
            BarMark(
                x: .value("Month", booking.month),
                y: .value("Bookings", booking.count)
            )
            .foregroundStyle(by: .value("Kind", booking.kind))
            .position(by: .value("Kind", booking.kind))
        }
        .chartForegroundStyleScale(domain: kinds, range: colors)
        .padding()
        .background(Color.backgroundPrimary)     // white in light mode, black in dark
    }
}
```

What this draws, with `#00B386`:

| Color                           | light mode                             | dark mode                              |
| ------------------------------- | -------------------------------------- | -------------------------------------- |
| `app.backgroundPrimary`         | #ffffff                                | #000000                                |
| `foregroundTertiary`            | color(display-p3 0.1149 0.4143 0.3028) | #4cd2a5                                |
| `hue:286.99.foregroundTertiary` | #5c539a                                | color(display-p3 0.7236 0.7051 0.9948) |
| `hue:46.99.foregroundTertiary`  | #91481f                                | color(display-p3 0.9747 0.6601 0.4827) |
| `app.foregroundSecondary`       | #2c2c2c                                | #dddddd                                |

`foregroundStyle(by:)` names each series, and `chartForegroundStyleScale(domain:range:)` maps the names to your colors in order.

## Contrast on every background

Lines, bars and points need 3:1 against the chart's background, under WCAG's [non-text contrast rule, 1.4.11](https://www.w3.org/TR/WCAG22/#non-text-contrast). `foregroundTertiary` clears it on every background token, in both modes and every hue. On the white and black page above, each series measures at least 6.66:1.

A fixed stop doesn't follow the mode. `_600` passes on white, but on a dark `backgroundSecondary` card it falls to 2.99:1.

## Spread the hues for more series

Use [`triad`](https://colortokenskit.com/api/triad/index.md) for three series and [`square`](https://colortokenskit.com/api/square/index.md) for four. For any other count, [`analogous(count:spread:)`](https://colortokenskit.com/api/analogous/index.md) with 360° divided by the count spaces the hues evenly around the wheel:

```swift
let colors = brand.analogous(count: 5, spread: .degrees(72)).map(\.foregroundTertiary)
```

What this draws, with `#00B386`:

| Color                           | light mode                             | dark mode                              |
| ------------------------------- | -------------------------------------- | -------------------------------------- |
| `hue:22.99.foregroundTertiary`  | #954341                                | color(display-p3 0.9944 0.637 0.6105)  |
| `hue:94.99.foregroundTertiary`  | color(display-p3 0.4263 0.3579 0.0185) | #d7bb4a                                |
| `foregroundTertiary`            | color(display-p3 0.1149 0.4143 0.3028) | #4cd2a5                                |
| `hue:238.99.foregroundTertiary` | color(display-p3 0.1423 0.3787 0.5601) | color(display-p3 0.4897 0.7657 0.9948) |
| `hue:310.99.foregroundTertiary` | #744b8e                                | color(display-p3 0.8329 0.6645 0.9834) |

Each series you add brings the closest pair nearer, so past five or six, label the series directly or group the smaller ones.

For data that runs from low to high, such as bookings per day, use a [lightness set](https://colortokenskit.com/advanced/color-theory/index.md#lighter-and-darker-steps-of-one-hue) instead. Its steps differ in lightness, so they also read in grayscale.

## Add a second cue besides color

Series drawn with one token differ only in hue, so they match in grayscale, and some look alike to people with a color vision deficiency. Simulated for deuteranopia (Machado and colleagues, 2009), the chart's Flights and Tours colors in light mode drop from 0.195 apart in OKLab to 0.078. Change "See as" to compare:

A harmony explorer marks each harmony's hues on a strip of every OKLCH hue. By default it shows the triad of `Color.proBlue._400`: #63a7fd, #ed8295, #8ab24d. [Try it on the live page](https://colortokenskit.com/advanced/charts/).

So give each series a second cue. In a line chart, `symbol(by:)` gives each series its own point shape. In a bar chart, label the bars directly. Separate stacked bars and pie slices with a thin line in the background color. WCAG's [use of color rule, 1.4.1](https://www.w3.org/TR/WCAG22/#use-of-color), asks for this as well.

## See also

- [.contrastRatio(to:method:)](https://colortokenskit.com/api/contrast-ratio/index.md): Check WCAG 2 and APCA contrast in Swift, and keep your color pairs passing with a unit test.
- [.harmony(\_:)](https://colortokenskit.com/api/harmony/index.md): Build the harmony someone picks at runtime, from a picker or a setting, in one call.
- [What does equal lightness cost?](https://colortokenskit.com/under-the-hood/trade-offs/index.md): What equal contrast costs, from quieter reds to olive yellows, and what you can do about each.
- [How accessible is it?](https://colortokenskit.com/basics/how-accessible/index.md): What the palette guarantees for contrast in every hue and mode, and what you still need to check.

---

From ColorTokensKit, by Penguin Design Ventures: https://colortokenskit.com/advanced/charts/ (updated September 26, 2026).