BridgeComfortable

Previews use

Applies to every design system preview on the site. The Bridge app chrome stays the same.

Brand

Density

Accessibility

Bridge targets WCAG 2.2 AA: text needs 4.5:1 against its background, control edges, icons and focus rings need 3:1. The token build checks every gated color pair in both brands and both themes, so a token change that breaks a pair fails the build before it ships.

Updated Oct 16, 2026

Open in Studio Checks

What every component guarantees

  • Keyboard and screen readers. Every interactive component is keyboard operable, with the right role, name and state (aria-checked, aria-expanded, aria-invalid, aria-busy). Behavior comes from native elements or Base UI parts, and the wrappers do not break it.
  • Visible focus. A 2px ring in the focus color, offset by 2px, on :focus-visible only. Inputs draw it inside so it hugs the field. The ring keeps 3:1 against canvas and surfaces.
  • Color is never the only signal. Status has text and an icon; an invalid field has a message.
  • Targets of at least 24 by 24 px in both densities.
  • Reduced motion. With prefers-reduced-motion: reduce, every motion duration in tokens.css drops to 0.
  • Checked in CI. Storybook runs the accessibility addon in error mode, and the component tests run axe-core on keyboard and ARIA behavior.

Contrast grid

The pairs the token build gates on, computed at build time from the token values. Fix a failing pair with a token change, never locally.

100%

220 of 220 checks pass AA

  • Bridge light 55/55
  • Bridge dark 55/55
  • Ocean light 55/55
  • Ocean dark 55/55

Text needs 4.5:1 for AA and 7:1 for AAA.

UI (control edges, icons, focus rings) needs 3:1, WCAG 1.4.11. There is no AAA level for UI.

To gate a new combination, add it to packages/tokens/src/contrast.checks.json as ["<fg token path>", "<bg token path>", <min ratio>]. The token build checks it in every brand and theme and fails below the minimum.

All pairs

Failing pairs first. Each tile renders the real tokens in that brand and theme, whatever this page is set to.

Contrast ratio per token pair, brand and theme
Foreground on background Use Bridge lightBridge darkOcean lightOcean dark
color.text.default
on color.bg.default 		Text min 4.5:1
Aa
14.04:1 #1c2735 / #f4f7fa AA pass AAA pass
Aa
16.61:1 #f4f7fa / #0d1826 AA pass AAA pass
Aa
13.99:1 #162839 / #f4f7fb AA pass AAA pass
Aa
16.69:1 #f4f7fb / #061829 AA pass AAA pass
color.text.default
on color.surface.default 		Text min 4.5:1
Aa
15.09:1 #1c2735 / #ffffff AA pass AAA pass
Aa
14.04:1 #f4f7fa / #1c2735 AA pass AAA pass
Aa
15.03:1 #162839 / #ffffff AA pass AAA pass
Aa
13.99:1 #f4f7fb / #162839 AA pass AAA pass
color.text.default
on color.surface.raised 		Text min 4.5:1
Aa
15.09:1 #1c2735 / #ffffff AA pass AAA pass
Aa
10.09:1 #f4f7fa / #333e4c AA pass AAA pass
Aa
15.03:1 #162839 / #ffffff AA pass AAA pass
Aa
10.08:1 #f4f7fb / #2d3f50 AA pass AAA pass
color.text.default
on color.surface.selected 		Text min 4.5:1
Aa
13.99:1 #1c2735 / #fff4f1 AA pass AAA pass
Aa
16.93:1 #f4f7fa / #320400 AA pass AAA pass
Aa
14.02:1 #162839 / #edf9ff AA pass AAA pass
Aa
16.62:1 #f4f7fb / #001a26 AA pass AAA pass
color.text.default
on color.surface.hover 		Text min 4.5:1
Aa
13.10:1 #1c2735 / #edeff2 AA pass AAA pass
Aa
10.09:1 #f4f7fa / #333e4c AA pass AAA pass
Aa
13.11:1 #162839 / #ecf0f3 AA pass AAA pass
Aa
10.08:1 #f4f7fb / #2d3f50 AA pass AAA pass
color.text.muted
on color.bg.default 		Text min 4.5:1
Aa
4.89:1 #636d79 / #f4f7fa AA pass Not AAA
Aa
7.61:1 #a2aab5 / #0d1826 AA pass AAA pass
Aa
4.88:1 #5e6e7d / #f4f7fb AA pass Not AAA
Aa
7.66:1 #9eabb8 / #061829 AA pass AAA pass
color.text.muted
on color.bg.subtle 		Text min 4.5:1
Aa
4.56:1 #636d79 / #edeff2 AA pass Not AAA
Aa
6.43:1 #a2aab5 / #1c2735 AA pass Not AAA
Aa
4.57:1 #5e6e7d / #ecf0f3 AA pass Not AAA
Aa
6.42:1 #9eabb8 / #162839 AA pass Not AAA
color.text.muted
on color.surface.default 		Text min 4.5:1
Aa
5.25:1 #636d79 / #ffffff AA pass Not AAA
Aa
6.43:1 #a2aab5 / #1c2735 AA pass Not AAA
Aa
5.24:1 #5e6e7d / #ffffff AA pass Not AAA
Aa
6.42:1 #9eabb8 / #162839 AA pass Not AAA
color.text.muted
on color.surface.raised 		Text min 4.5:1
Aa
5.25:1 #636d79 / #ffffff AA pass Not AAA
Aa
4.62:1 #a2aab5 / #333e4c AA pass Not AAA
Aa
5.24:1 #5e6e7d / #ffffff AA pass Not AAA
Aa
4.62:1 #9eabb8 / #2d3f50 AA pass Not AAA
color.text.muted
on color.surface.hover 		Text min 4.5:1
Aa
4.56:1 #636d79 / #edeff2 AA pass Not AAA
Aa
4.62:1 #a2aab5 / #333e4c AA pass Not AAA
Aa
4.57:1 #5e6e7d / #ecf0f3 AA pass Not AAA
Aa
4.62:1 #9eabb8 / #2d3f50 AA pass Not AAA
color.text.link
on color.surface.default 		Text min 4.5:1
Aa
5.17:1 #22749e / #ffffff AA pass Not AAA
Aa
9.65:1 #a7d5f1 / #1c2735 AA pass AAA pass
Aa
5.15:1 #107699 / #ffffff AA pass Not AAA
Aa
9.69:1 #8adafe / #162839 AA pass AAA pass
color.text.link
on color.bg.default 		Text min 4.5:1
Aa
4.81:1 #22749e / #f4f7fa AA pass Not AAA
Aa
11.42:1 #a7d5f1 / #0d1826 AA pass AAA pass
Aa
4.79:1 #107699 / #f4f7fb AA pass Not AAA
Aa
11.56:1 #8adafe / #061829 AA pass AAA pass
color.text.signal
on color.surface.default 		Text min 4.5:1
Aa
8.15:1 #962600 / #ffffff AA pass AAA pass
Aa
9.31:1 #fdbcaa / #1c2735 AA pass AAA pass
Aa
7.38:1 #005d79 / #ffffff AA pass AAA pass
Aa
9.69:1 #8adafe / #162839 AA pass AAA pass
color.text.signal
on color.signal.subtle 		Text min 4.5:1
Aa
7.04:1 #962600 / #ffeae4 AA pass AAA pass
Aa
9.56:1 #fdbcaa / #4a0e00 AA pass AAA pass
Aa
6.44:1 #005d79 / #ddf3fe AA pass Not AAA
Aa
9.61:1 #8adafe / #002b3b AA pass AAA pass
color.text.inverse
on color.surface.inverse 		Text min 4.5:1
Aa
15.09:1 #ffffff / #1c2735 AA pass AAA pass
Aa
15.50:1 #0d1826 / #edeff2 AA pass AAA pass
Aa
15.03:1 #ffffff / #162839 AA pass AAA pass
Aa
15.65:1 #061829 / #ecf0f3 AA pass AAA pass
color.border.strong
on color.surface.default 		UI min 3:1
3.49:1 #818a96 / #ffffff AA pass
4.32:1 #818a96 / #1c2735 AA pass
3.49:1 #7c8b9a / #ffffff AA pass
4.30:1 #7c8b9a / #162839 AA pass
color.border.strong
on color.bg.default 		UI min 3:1
3.25:1 #818a96 / #f4f7fa AA pass
5.11:1 #818a96 / #0d1826 AA pass
3.24:1 #7c8b9a / #f4f7fb AA pass
5.14:1 #7c8b9a / #061829 AA pass
color.border.strong
on color.surface.raised 		UI min 3:1
3.49:1 #818a96 / #ffffff AA pass
3.10:1 #818a96 / #333e4c AA pass
3.49:1 #7c8b9a / #ffffff AA pass
3.10:1 #7c8b9a / #2d3f50 AA pass
color.control.track
on color.surface.default 		UI min 3:1
3.49:1 #818a96 / #ffffff AA pass
4.32:1 #818a96 / #1c2735 AA pass
3.49:1 #7c8b9a / #ffffff AA pass
4.30:1 #7c8b9a / #162839 AA pass
color.control.checked.bg
on color.surface.default 		UI min 3:1
15.09:1 #1c2735 / #ffffff AA pass
14.04:1 #f4f7fa / #1c2735 AA pass
5.15:1 #107699 / #ffffff AA pass
9.69:1 #8adafe / #162839 AA pass
color.control.checked.fg
on color.control.checked.bg 		Text min 4.5:1
Aa
15.09:1 #ffffff / #1c2735 AA pass AAA pass
Aa
16.61:1 #0d1826 / #f4f7fa AA pass AAA pass
Aa
5.15:1 #ffffff / #107699 AA pass Not AAA
Aa
11.51:1 #001a26 / #8adafe AA pass AAA pass
color.control.thumb
on color.control.track 		UI min 3:1
3.49:1 #ffffff / #818a96 AA pass
3.25:1 #f4f7fa / #818a96 AA pass
3.49:1 #ffffff / #7c8b9a AA pass
3.24:1 #f4f7fb / #7c8b9a AA pass
color.signal.default
on color.surface.default 		UI min 3:1
4.00:1 #e64611 / #ffffff AA pass
6.04:1 #fb8160 / #1c2735 AA pass
5.15:1 #107699 / #ffffff AA pass
6.57:1 #38b8e8 / #162839 AA pass
color.signal.default
on color.bg.default 		UI min 3:1
3.72:1 #e64611 / #f4f7fa AA pass
7.15:1 #fb8160 / #0d1826 AA pass
4.79:1 #107699 / #f4f7fb AA pass
7.85:1 #38b8e8 / #061829 AA pass
color.signal.default
on color.bg.muted 		UI min 3:1
3.09:1 #e64611 / #dce3eb AA pass
4.34:1 #fb8160 / #333e4c AA pass
3.97:1 #107699 / #d9e3ee AA pass
4.74:1 #38b8e8 / #2d3f50 AA pass
focus.ring.color
on color.surface.default 		UI min 3:1
4.00:1 #e64611 / #ffffff AA pass
6.04:1 #fb8160 / #1c2735 AA pass
5.15:1 #107699 / #ffffff AA pass
6.57:1 #38b8e8 / #162839 AA pass
focus.ring.color
on color.bg.default 		UI min 3:1
3.72:1 #e64611 / #f4f7fa AA pass
7.15:1 #fb8160 / #0d1826 AA pass
4.79:1 #107699 / #f4f7fb AA pass
7.85:1 #38b8e8 / #061829 AA pass
focus.ring.color
on color.surface.raised 		UI min 3:1
4.00:1 #e64611 / #ffffff AA pass
4.34:1 #fb8160 / #333e4c AA pass
5.15:1 #107699 / #ffffff AA pass
4.74:1 #38b8e8 / #2d3f50 AA pass
color.action.primary.text
on color.action.primary.bg 		Text min 4.5:1
Aa
15.09:1 #ffffff / #1c2735 AA pass AAA pass
Aa
16.61:1 #0d1826 / #f4f7fa AA pass AAA pass
Aa
5.15:1 #ffffff / #107699 AA pass Not AAA
Aa
11.51:1 #001a26 / #8adafe AA pass AAA pass
color.action.primary.text
on color.action.primary.bg-hover 		Text min 4.5:1
Aa
10.85:1 #ffffff / #333e4c AA pass AAA pass
Aa
13.80:1 #0d1826 / #dce3eb AA pass AAA pass
Aa
7.38:1 #ffffff / #005d79 AA pass AAA pass
Aa
13.92:1 #001a26 / #bdeaff AA pass AAA pass
color.action.primary.bg
on color.surface.default 		UI min 3:1
15.09:1 #1c2735 / #ffffff AA pass
14.04:1 #f4f7fa / #1c2735 AA pass
5.15:1 #107699 / #ffffff AA pass
9.69:1 #8adafe / #162839 AA pass
color.action.secondary.text
on color.action.secondary.bg 		Text min 4.5:1
Aa
15.09:1 #1c2735 / #ffffff AA pass AAA pass
Aa
14.04:1 #f4f7fa / #1c2735 AA pass AAA pass
Aa
15.03:1 #162839 / #ffffff AA pass AAA pass
Aa
13.99:1 #f4f7fb / #162839 AA pass AAA pass
color.action.secondary.text
on color.action.secondary.bg-hover 		Text min 4.5:1
Aa
13.10:1 #1c2735 / #edeff2 AA pass AAA pass
Aa
10.09:1 #f4f7fa / #333e4c AA pass AAA pass
Aa
13.11:1 #162839 / #ecf0f3 AA pass AAA pass
Aa
10.08:1 #f4f7fb / #2d3f50 AA pass AAA pass
color.action.ghost.text
on color.surface.default 		Text min 4.5:1
Aa
10.85:1 #333e4c / #ffffff AA pass AAA pass
Aa
13.10:1 #edeff2 / #1c2735 AA pass AAA pass
Aa
10.83:1 #2d3f50 / #ffffff AA pass AAA pass
Aa
13.11:1 #ecf0f3 / #162839 AA pass AAA pass
color.action.ghost.text
on color.action.ghost.bg-hover 		Text min 4.5:1
Aa
9.42:1 #333e4c / #edeff2 AA pass AAA pass
Aa
9.42:1 #edeff2 / #333e4c AA pass AAA pass
Aa
9.45:1 #2d3f50 / #ecf0f3 AA pass AAA pass
Aa
9.45:1 #ecf0f3 / #2d3f50 AA pass AAA pass
color.action.danger.text
on color.action.danger.bg 		Text min 4.5:1
Aa
5.90:1 #ffffff / #c3184c AA pass Not AAA
Aa
5.90:1 #ffffff / #c3184c AA pass Not AAA
Aa
5.90:1 #ffffff / #c3184c AA pass Not AAA
Aa
5.90:1 #ffffff / #c3184c AA pass Not AAA
color.action.danger.text
on color.action.danger.bg-hover 		Text min 4.5:1
Aa
8.33:1 #ffffff / #9d0639 AA pass AAA pass
Aa
8.33:1 #ffffff / #9d0639 AA pass AAA pass
Aa
8.33:1 #ffffff / #9d0639 AA pass AAA pass
Aa
8.33:1 #ffffff / #9d0639 AA pass AAA pass
color.feedback.success.text
on color.feedback.success.bg 		Text min 4.5:1
Aa
6.83:1 #036252 / #eefaf6 AA pass Not AAA
Aa
11.51:1 #9eddcc / #001d16 AA pass AAA pass
Aa
6.83:1 #036252 / #eefaf6 AA pass Not AAA
Aa
11.51:1 #9eddcc / #001d16 AA pass AAA pass
color.feedback.warning.text
on color.feedback.warning.bg 		Text min 4.5:1
Aa
7.22:1 #6f4c03 / #fef6ea AA pass AAA pass
Aa
12.41:1 #fad091 / #221400 AA pass AAA pass
Aa
7.22:1 #6f4c03 / #fef6ea AA pass AAA pass
Aa
12.41:1 #fad091 / #221400 AA pass AAA pass
color.feedback.danger.text
on color.feedback.danger.bg 		Text min 4.5:1
Aa
7.74:1 #9d0639 / #fff4f4 AA pass AAA pass
Aa
11.17:1 #ffb8bf / #34000c AA pass AAA pass
Aa
7.74:1 #9d0639 / #fff4f4 AA pass AAA pass
Aa
11.17:1 #ffb8bf / #34000c AA pass AAA pass
color.feedback.info.text
on color.feedback.info.bg 		Text min 4.5:1
Aa
6.93:1 #0a5b80 / #f0f8fe AA pass Not AAA
Aa
11.38:1 #a7d5f1 / #001a29 AA pass AAA pass
Aa
7.51:1 #653d8c / #f9f5ff AA pass AAA pass
Aa
11.23:1 #dbc0fc / #1f0c30 AA pass AAA pass
color.feedback.success.text
on color.surface.default 		Text min 4.5:1
Aa
7.30:1 #036252 / #ffffff AA pass AAA pass
Aa
9.82:1 #9eddcc / #1c2735 AA pass AAA pass
Aa
7.30:1 #036252 / #ffffff AA pass AAA pass
Aa
9.78:1 #9eddcc / #162839 AA pass AAA pass
color.feedback.warning.text
on color.surface.default 		Text min 4.5:1
Aa
7.74:1 #6f4c03 / #ffffff AA pass AAA pass
Aa
10.42:1 #fad091 / #1c2735 AA pass AAA pass
Aa
7.74:1 #6f4c03 / #ffffff AA pass AAA pass
Aa
10.37:1 #fad091 / #162839 AA pass AAA pass
color.feedback.danger.text
on color.surface.default 		Text min 4.5:1
Aa
8.33:1 #9d0639 / #ffffff AA pass AAA pass
Aa
9.24:1 #ffb8bf / #1c2735 AA pass AAA pass
Aa
8.33:1 #9d0639 / #ffffff AA pass AAA pass
Aa
9.20:1 #ffb8bf / #162839 AA pass AAA pass
color.feedback.info.text
on color.surface.default 		Text min 4.5:1
Aa
7.44:1 #0a5b80 / #ffffff AA pass AAA pass
Aa
9.65:1 #a7d5f1 / #1c2735 AA pass AAA pass
Aa
8.07:1 #653d8c / #ffffff AA pass AAA pass
Aa
9.27:1 #dbc0fc / #162839 AA pass AAA pass
color.feedback.success.icon
on color.feedback.success.bg 		UI min 3:1
4.68:1 #007e6a / #eefaf6 AA pass
7.88:1 #62bda7 / #001d16 AA pass
4.68:1 #007e6a / #eefaf6 AA pass
7.88:1 #62bda7 / #001d16 AA pass
color.feedback.warning.icon
on color.feedback.warning.bg 		UI min 3:1
5.02:1 #8e6201 / #fef6ea AA pass
9.31:1 #e9b154 / #221400 AA pass
5.02:1 #8e6201 / #fef6ea AA pass
9.31:1 #e9b154 / #221400 AA pass
color.feedback.danger.icon
on color.feedback.danger.bg 		UI min 3:1
5.48:1 #c3184c / #fff4f4 AA pass
7.21:1 #fd798e / #34000c AA pass
5.48:1 #c3184c / #fff4f4 AA pass
7.21:1 #fd798e / #34000c AA pass
color.feedback.danger.icon
on color.surface.default 		UI min 3:1
5.90:1 #c3184c / #ffffff AA pass
5.96:1 #fd798e / #1c2735 AA pass
5.90:1 #c3184c / #ffffff AA pass
5.94:1 #fd798e / #162839 AA pass
color.feedback.info.icon
on color.feedback.info.bg 		UI min 3:1
4.81:1 #22749e / #f0f8fe AA pass
7.70:1 #73b2d8 / #001a29 AA pass
5.22:1 #7f53ac / #f9f5ff AA pass
7.46:1 #bb96e5 / #1f0c30 AA pass
color.text.on-solid
on color.feedback.success.solid 		Text min 4.5:1
Aa
5.00:1 #ffffff / #007e6a AA pass Not AAA
Aa
5.00:1 #ffffff / #007e6a AA pass Not AAA
Aa
5.00:1 #ffffff / #007e6a AA pass Not AAA
Aa
5.00:1 #ffffff / #007e6a AA pass Not AAA
color.text.on-solid
on color.feedback.warning.solid 		Text min 4.5:1
Aa
5.38:1 #ffffff / #8e6201 AA pass Not AAA
Aa
5.38:1 #ffffff / #8e6201 AA pass Not AAA
Aa
5.38:1 #ffffff / #8e6201 AA pass Not AAA
Aa
5.38:1 #ffffff / #8e6201 AA pass Not AAA
color.text.on-solid
on color.feedback.danger.solid 		Text min 4.5:1
Aa
5.90:1 #ffffff / #c3184c AA pass Not AAA
Aa
5.90:1 #ffffff / #c3184c AA pass Not AAA
Aa
5.90:1 #ffffff / #c3184c AA pass Not AAA
Aa
5.90:1 #ffffff / #c3184c AA pass Not AAA
color.text.on-solid
on color.feedback.info.solid 		Text min 4.5:1
Aa
5.17:1 #ffffff / #22749e AA pass Not AAA
Aa
5.17:1 #ffffff / #22749e AA pass Not AAA
Aa
5.62:1 #ffffff / #7f53ac AA pass Not AAA
Aa
5.62:1 #ffffff / #7f53ac AA pass Not AAA
color.text.default
on color.selection.bg 		Text min 4.5:1
Aa
13.04:1 #1c2735 / #ffeae4 AA pass AAA pass
Aa
10.67:1 #f4f7fa / #6e1c02 AA pass AAA pass
Aa
13.12:1 #162839 / #ddf3fe AA pass AAA pass
Aa
9.88:1 #f4f7fb / #044459 AA pass AAA pass

What to do with a failing pair

  • Do not fix it locally in a screen or a component. That hides the problem and the next team hits it again.
  • Open an issue or a DS Bridge proposal with the pair, the ratio and where it shows up. A token change is Tier 3: design and tech owners both approve it.
  • Until it ships, avoid using that pair in new places.