[a11y] Darken background color on switches

[47hao]

Changes

Darkened the background color of off-state switches to achieve a minimum contrast ratio of 3.26:1.

• Changed light mode only
• Text changed to white, since the new color contrasts with white
• Inactive background color is #878F9B, with hover and active states darker.

Screenshots

Before:

After:

Screen.Recording.2025-11-25.at.5.26.41.PM.mov

[changelog-app]

Generate changelog in packages/core/changelog/@unreleased

Type (Select exactly one)

• Feature (Adding new functionality)
• Improvement (Improving existing functionality)
• Fix (Fixing an issue with existing functionality)
• Break (Creating a new major version by breaking public APIs)
• Deprecation (Removing functionality in a non-breaking way)
• Migration (Automatically moving data/functionality to a new system)

Description

Darken background color on switches

Check the box to generate changelog(s)

• Generate changelog entry

[changelog-app]

✅ Successfully generated changelog entry!

Need to regenerate?

Simply interact with the changelog bot comment again to regenerate these entries.

---

📋Changelog Preview

🐛 Fixes

• Darken background color on switches (#7658)

[svc-palantir-github]

Update contrast ratio to 3.54+

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[ggdouglas]

It looks like the contrast ratio of $gray1 (#5F6B7C) at 70% opacity has only a 2.94:1 contrast ratio on a white background. Is that sufficient to meet this minimum contrast ratio requirement?

[47hao]

I wonder if it's overlaid on other colors? I measured #878F9B color picking from a screenshot 5F6B7CB3

[ggdouglas]

This is what I'm measuring as the background-color on .bp6-control-indicator (#5F6B7CB3, which is #5F6B7C) at 70% opacity)

If we want to get the effective color here considering the transparent color on a white background, the calculation would be something like:

R = (95 × 0.7) + (255 × 0.3) = 66.5 + 76.5 = 143
G = (107 × 0.7) + (255 × 0.3) = 74.9 + 76.5 = 151
B = (124 × 0.7) + (255 × 0.3) = 86.8 + 76.5 = 163

which equals #8F97A3

FWIW, I think the contrast checker tool already does this since #5F6B7CB3 and #8F97A3 return the same result for contrast ratio at 2.94:1.

[svc-palantir-github]

Update contrast ratio to 3.54+

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[svc-palantir-github]

Don't use opaque colors

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[ggdouglas]

@ryannono can you do a pass on these color changes for design approval?

[ryannono]

@ggdouglas @mm-wang I'd say we skip this one.

Reasoning behind it is I tested using this in a few UIs and it's just too visually heavy.

Additionally, I looked around and even un-styled libraries who's sole focus is accessibility like React Aria, Headless UI, Reka etc don't bother and achieve a color contrast ratio of ~1.2-1.6. Not to mention Apple's own toggle component on Mac OS and IOS both fail at around that ~1.2-1.6 range as well.

BLAB If the most strict and popular accessibility libs don't follow this I think there's reason for it and we should be pragmatic.