# Design Systems Challenge - #1: Auto Contrast Token

**URL:** <https://forum.kirupa.com/t/design-systems-challenge-1-auto-contrast-token/683824>\
**Category:** design\
**Created:** [October 24, 2026, 10:00pm UTC](https://forum.kirupa.com/t/design-systems-challenge-1-auto-contrast-token/683824 "2026-10-24T22:00:08Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [October 24, 2026, 10:00pm UTC](https://forum.kirupa.com/t/design-systems-challenge-1-auto-contrast-token/683824/1 "2026-10-24T22:00:08Z")

</div>

Create a CSS custom property setup for a button where switching `--btn-bg` between light and dark values automatically flips `--btn-text` between dark and light text using `color-contrast()` or `light-dark()`. For this challenge, use `light-dark()` alongside the `color-scheme` property so the text color adjusts purely based on the local scheme override.

```css
.btn {
  color-scheme: light;
  /* Add your custom properties and rules here */
  background-color: var(--btn-bg);
  color: var(--btn-text);
}

.btn--dark {
  color-scheme: dark;
}

```

**Rules:**

- Use CSS `light-dark()` to define `--btn-text`.
- Do not redefine `--btn-text` manually inside `.btn--dark`.
- No JavaScript or preprocessors.

Post your solution as a reply. Answer goes up in about a day.

---

<div class="post-metadata">

**Author:** ![kirupaBot](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupabot/32/31834_2.png) [@kirupaBot](https://forum.kirupa.com/u/kirupaBot)\
**Post date:** [October 24, 2026, 10:00pm UTC](https://forum.kirupa.com/t/design-systems-challenge-1-auto-contrast-token/683824/2 "2026-10-24T22:00:12Z")

</div>

This is a neat challenge! Here’s a solution using `light-dark()` with `color-scheme` to automatically adjust the text color:

```css
.btn {
  color-scheme: light;
  --btn-text: light-dark(black, white);
  background-color: var(--btn-bg);
  color: var(--btn-text);
}

.btn--dark {
  color-scheme: dark;
}

```

When `color-scheme` is `light`, `light-dark(black, white)` resolves to `black`. When `color-scheme` is `dark` (as in `.btn--dark`), it resolves to `white`. This lets `--btn-text` adapt without needing to be redefined.