Contrast table (WCAG 2.2)¶
GENERATED by tools/design-tokens/tokens.py from design/tokens. Do not edit; change the source and generate again.
Every text and surface pairing that a component uses (list: design/design-rules.json),
for every theme. Thresholds: text 4.5:1 (SC 1.4.3), large-text 3:1 (SC 1.4.3),
ui 3:1 (SC 1.4.11), source https://www.w3.org/TR/WCAG22/ (retrieved 2026-10-10).
The tool stops if a pairing falls below its threshold; this page is written only on success.
Result: 806 pairings checked, 0 below the threshold (288 of them in the accent variants).
Palette guards (ban list as a test): all met.
Theme light¶
| Foreground | Background | Kind | Values | Ratio | Threshold | Result | Usage |
|---|---|---|---|---|---|---|---|
color.text.primary |
color.surface.canvas |
text | #08191c on #fbfeff |
17.77 | 4.5 | passed | Body text and titles |
color.text.primary |
color.surface.list |
text | #08191c on #eff6f7 |
16.46 | 4.5 | passed | Body text and titles |
color.text.primary |
color.surface.raised |
text | #08191c on #f5fbfc |
17.23 | 4.5 | passed | Body text and titles |
color.text.primary |
color.surface.overlay |
text | #08191c on #fbfeff |
17.77 | 4.5 | passed | Body text and titles |
color.text.primary |
color.surface.hover |
text | #08191c on #e5eef0 |
15.28 | 4.5 | passed | Body text and titles |
color.text.primary |
color.surface.selected |
text | #08191c on #ccf5f0 |
15.34 | 4.5 | passed | Body text and titles |
color.text.primary |
color.surface.input |
text | #08191c on #f5fbfc |
17.23 | 4.5 | passed | Body text and titles |
color.text.primary |
color.surface.sunken |
text | #08191c on #e5eef0 |
15.28 | 4.5 | passed | Body text and titles |
color.text.primary |
color.attention.subtle |
text | #08191c on #fef5aa |
16.17 | 4.5 | passed | Body text and titles |
color.text.primary |
color.accent.subtle |
text | #08191c on #e4fbf8 |
16.68 | 4.5 | passed | Body text and titles |
color.text.primary |
color.success.subtle |
text | #08191c on #e4fde8 |
16.73 | 4.5 | passed | Body text and titles |
color.text.primary |
color.warning.subtle |
text | #08191c on #fee6d4 |
14.99 | 4.5 | passed | Body text and titles |
color.text.primary |
color.danger.subtle |
text | #08191c on #fef2f0 |
16.44 | 4.5 | passed | Body text and titles |
color.text.primary |
color.info.subtle |
text | #08191c on #eef6fe |
16.51 | 4.5 | passed | Body text and titles |
color.text.secondary |
color.surface.canvas |
text | #3f5154 on #fbfeff |
8.24 | 4.5 | passed | Metadata, timestamps |
color.text.secondary |
color.surface.list |
text | #3f5154 on #eff6f7 |
7.63 | 4.5 | passed | Metadata, timestamps |
color.text.secondary |
color.surface.raised |
text | #3f5154 on #f5fbfc |
7.98 | 4.5 | passed | Metadata, timestamps |
color.text.secondary |
color.surface.overlay |
text | #3f5154 on #fbfeff |
8.24 | 4.5 | passed | Metadata, timestamps |
color.text.secondary |
color.surface.hover |
text | #3f5154 on #e5eef0 |
7.08 | 4.5 | passed | Metadata, timestamps |
color.text.secondary |
color.surface.selected |
text | #3f5154 on #ccf5f0 |
7.11 | 4.5 | passed | Metadata, timestamps |
color.text.secondary |
color.surface.input |
text | #3f5154 on #f5fbfc |
7.98 | 4.5 | passed | Metadata, timestamps |
color.text.secondary |
color.surface.sunken |
text | #3f5154 on #e5eef0 |
7.08 | 4.5 | passed | Metadata, timestamps |
color.text.secondary |
color.attention.subtle |
text | #3f5154 on #fef5aa |
7.49 | 4.5 | passed | Metadata, timestamps |
color.text.muted |
color.surface.canvas |
text | #59696c on #fbfeff |
5.66 | 4.5 | passed | Placeholders, hints, Done section |
color.text.muted |
color.surface.list |
text | #59696c on #eff6f7 |
5.24 | 4.5 | passed | Placeholders, hints, Done section |
color.text.muted |
color.surface.raised |
text | #59696c on #f5fbfc |
5.49 | 4.5 | passed | Placeholders, hints, Done section |
color.text.muted |
color.surface.overlay |
text | #59696c on #fbfeff |
5.66 | 4.5 | passed | Placeholders, hints, Done section |
color.text.muted |
color.surface.hover |
text | #59696c on #e5eef0 |
4.87 | 4.5 | passed | Placeholders, hints, Done section |
color.text.muted |
color.surface.input |
text | #59696c on #f5fbfc |
5.49 | 4.5 | passed | Placeholders, hints, Done section |
color.text.muted |
color.surface.sunken |
text | #59696c on #e5eef0 |
4.87 | 4.5 | passed | Placeholders, hints, Done section |
color.text.link |
color.surface.canvas |
text | #136f69 on #fbfeff |
5.91 | 4.5 | passed | Links, mention pills |
color.text.link |
color.surface.list |
text | #136f69 on #eff6f7 |
5.48 | 4.5 | passed | Links, mention pills |
color.text.link |
color.surface.raised |
text | #136f69 on #f5fbfc |
5.73 | 4.5 | passed | Links, mention pills |
color.text.link |
color.surface.overlay |
text | #136f69 on #fbfeff |
5.91 | 4.5 | passed | Links, mention pills |
color.text.link |
color.surface.sunken |
text | #136f69 on #e5eef0 |
5.08 | 4.5 | passed | Links, mention pills |
color.text.link |
color.attention.subtle |
text | #136f69 on #fef5aa |
5.38 | 4.5 | passed | Links, mention pills |
color.text.on-accent |
color.accent.bg |
text | #fbfeff on #136f69 |
5.91 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-hover |
text | #fbfeff on #0c5450 |
8.64 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-pressed |
text | #fbfeff on #063b38 |
12.26 | 4.5 | passed | Text on the primary button |
color.text.on-sidebar |
color.surface.sidebar |
text | #e4fbf8 on #063b38 |
11.51 | 4.5 | passed | Sidebar: space titles, unread channels |
color.text.on-sidebar |
color.surface.sidebar-hover |
text | #e4fbf8 on #0f4643 |
9.84 | 4.5 | passed | Sidebar: space titles, unread channels |
color.text.on-sidebar |
color.surface.sidebar-selected |
text | #e4fbf8 on #0c5450 |
8.11 | 4.5 | passed | Sidebar: space titles, unread channels |
color.text.on-sidebar-secondary |
color.surface.sidebar |
text | #a8e8e1 on #063b38 |
9.05 | 4.5 | passed | Sidebar: read channels |
color.text.on-sidebar-secondary |
color.surface.sidebar-hover |
text | #a8e8e1 on #0f4643 |
7.73 | 4.5 | passed | Sidebar: read channels |
color.text.on-sidebar-secondary |
color.surface.sidebar-selected |
text | #a8e8e1 on #0c5450 |
6.37 | 4.5 | passed | Sidebar: read channels |
color.text.on-sidebar-muted |
color.surface.sidebar |
text | #7cd5cd on #063b38 |
7.25 | 4.5 | passed | Sidebar: muted channels |
color.text.on-sidebar-muted |
color.surface.sidebar-hover |
text | #7cd5cd on #0f4643 |
6.20 | 4.5 | passed | Sidebar: muted channels |
color.accent.fg |
color.surface.canvas |
text | #136f69 on #fbfeff |
5.91 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg |
color.surface.list |
text | #136f69 on #eff6f7 |
5.48 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg |
color.surface.raised |
text | #136f69 on #f5fbfc |
5.73 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg |
color.surface.overlay |
text | #136f69 on #fbfeff |
5.91 | 4.5 | passed | Accent as text (text buttons) |
color.attention.fg |
color.surface.canvas |
text | #735e10 on #fbfeff |
6.21 | 4.5 | passed | State texts in banners and the live box |
color.attention.fg |
color.surface.list |
text | #735e10 on #eff6f7 |
5.75 | 4.5 | passed | State texts in banners and the live box |
color.attention.fg |
color.surface.raised |
text | #735e10 on #f5fbfc |
6.02 | 4.5 | passed | State texts in banners and the live box |
color.attention.fg |
color.surface.overlay |
text | #735e10 on #fbfeff |
6.21 | 4.5 | passed | State texts in banners and the live box |
color.success.fg |
color.surface.canvas |
text | #137337 on #fbfeff |
5.86 | 4.5 | passed | State texts in banners and the live box |
color.success.fg |
color.surface.list |
text | #137337 on #eff6f7 |
5.43 | 4.5 | passed | State texts in banners and the live box |
color.success.fg |
color.surface.raised |
text | #137337 on #f5fbfc |
5.68 | 4.5 | passed | State texts in banners and the live box |
color.success.fg |
color.surface.overlay |
text | #137337 on #fbfeff |
5.86 | 4.5 | passed | State texts in banners and the live box |
color.warning.fg |
color.surface.canvas |
text | #6b3b09 on #fbfeff |
9.19 | 4.5 | passed | State texts in banners and the live box |
color.warning.fg |
color.surface.list |
text | #6b3b09 on #eff6f7 |
8.51 | 4.5 | passed | State texts in banners and the live box |
color.warning.fg |
color.surface.raised |
text | #6b3b09 on #f5fbfc |
8.91 | 4.5 | passed | State texts in banners and the live box |
color.warning.fg |
color.surface.overlay |
text | #6b3b09 on #fbfeff |
9.19 | 4.5 | passed | State texts in banners and the live box |
color.danger.fg |
color.surface.canvas |
text | #63080e on #fbfeff |
13.19 | 4.5 | passed | State texts in banners and the live box |
color.danger.fg |
color.surface.list |
text | #63080e on #eff6f7 |
12.21 | 4.5 | passed | State texts in banners and the live box |
color.danger.fg |
color.surface.raised |
text | #63080e on #f5fbfc |
12.78 | 4.5 | passed | State texts in banners and the live box |
color.danger.fg |
color.surface.overlay |
text | #63080e on #fbfeff |
13.19 | 4.5 | passed | State texts in banners and the live box |
color.info.fg |
color.surface.canvas |
text | #12659d on #fbfeff |
6.14 | 4.5 | passed | State texts in banners and the live box |
color.info.fg |
color.surface.list |
text | #12659d on #eff6f7 |
5.69 | 4.5 | passed | State texts in banners and the live box |
color.info.fg |
color.surface.raised |
text | #12659d on #f5fbfc |
5.95 | 4.5 | passed | State texts in banners and the live box |
color.info.fg |
color.surface.overlay |
text | #12659d on #fbfeff |
6.14 | 4.5 | passed | State texts in banners and the live box |
color.attention.fg |
color.attention.subtle |
text | #735e10 on #fef5aa |
5.65 | 4.5 | passed | State text on its own tinted background |
color.success.fg |
color.success.subtle |
text | #137337 on #e4fde8 |
5.52 | 4.5 | passed | State text on its own tinted background |
color.warning.fg |
color.warning.subtle |
text | #6b3b09 on #fee6d4 |
7.75 | 4.5 | passed | State text on its own tinted background |
color.danger.fg |
color.danger.subtle |
text | #63080e on #fef2f0 |
12.20 | 4.5 | passed | State text on its own tinted background |
color.info.fg |
color.info.subtle |
text | #12659d on #eef6fe |
5.70 | 4.5 | passed | State text on its own tinted background |
color.attention.on-bg |
color.attention.bg |
text | #291f02 on #eddc59 |
11.60 | 4.5 | passed | Strong badges and buttons |
color.success.on-bg |
color.success.bg |
text | #fbfeff on #137337 |
5.86 | 4.5 | passed | Strong badges and buttons |
color.warning.on-bg |
color.warning.bg |
text | #331902 on #fcaf6f |
8.98 | 4.5 | passed | Strong badges and buttons |
color.danger.on-bg |
color.danger.bg |
text | #fbfeff on #b21622 |
6.84 | 4.5 | passed | Strong badges and buttons |
color.info.on-bg |
color.info.bg |
text | #fbfeff on #12659d |
6.14 | 4.5 | passed | Strong badges and buttons |
color.badge.personal-fg |
color.badge.personal-bg |
text | #810e55 on #fee3ee |
8.20 | 4.5 | passed | Backend policy badge |
color.badge.organization-fg |
color.badge.organization-bg |
text | #0b4d79 on #dceefe |
7.53 | 4.5 | passed | Backend policy badge |
color.code.fg |
color.code.bg |
text | #102326 on #e5eef0 |
13.81 | 4.5 | passed | Code |
color.category.spruce.chip-fg |
color.category.spruce.chip-bg |
text | #0c5450 on #ccf5f0 |
7.45 | 4.5 | passed | Tag chip |
color.category.loch.chip-fg |
color.category.loch.chip-bg |
text | #0b4d79 on #dceefe |
7.53 | 4.5 | passed | Tag chip |
color.category.heather.chip-fg |
color.category.heather.chip-bg |
text | #810e55 on #fee3ee |
8.20 | 4.5 | passed | Tag chip |
color.category.rowan.chip-fg |
color.category.rowan.chip-bg |
text | #890f18 on #fee4e2 |
8.12 | 4.5 | passed | Tag chip |
color.category.amber.chip-fg |
color.category.amber.chip-bg |
text | #6b3b09 on #fee6d4 |
7.75 | 4.5 | passed | Tag chip |
color.category.gorse.chip-fg |
color.category.gorse.chip-bg |
text | #59470a on #fbef8e |
7.65 | 4.5 | passed | Tag chip |
color.category.moss.chip-fg |
color.category.moss.chip-bg |
text | #0c5828 on #cff8d6 |
7.39 | 4.5 | passed | Tag chip |
color.category.granite.chip-fg |
color.category.granite.chip-bg |
text | #24363a on #e5eef0 |
10.71 | 4.5 | passed | Tag chip |
color.border.control |
color.surface.canvas |
ui | #748486 on #fbfeff |
3.85 | 3 | passed | Border of input fields and secondary buttons |
color.border.control |
color.surface.list |
ui | #748486 on #eff6f7 |
3.56 | 3 | passed | Border of input fields and secondary buttons |
color.border.control |
color.surface.raised |
ui | #748486 on #f5fbfc |
3.73 | 3 | passed | Border of input fields and secondary buttons |
color.border.control |
color.surface.overlay |
ui | #748486 on #fbfeff |
3.85 | 3 | passed | Border of input fields and secondary buttons |
color.focus.ring |
color.surface.canvas |
ui | #1b8a83 on #fbfeff |
4.14 | 3 | passed | Focus ring |
color.focus.ring |
color.surface.list |
ui | #1b8a83 on #eff6f7 |
3.83 | 3 | passed | Focus ring |
color.focus.ring |
color.surface.raised |
ui | #1b8a83 on #f5fbfc |
4.01 | 3 | passed | Focus ring |
color.focus.ring |
color.surface.overlay |
ui | #1b8a83 on #fbfeff |
4.14 | 3 | passed | Focus ring |
color.focus.ring |
color.surface.input |
ui | #1b8a83 on #f5fbfc |
4.01 | 3 | passed | Focus ring |
color.focus.ring |
color.surface.selected |
ui | #1b8a83 on #ccf5f0 |
3.57 | 3 | passed | Focus ring |
color.focus.ring-on-sidebar |
color.surface.sidebar |
ui | #d9c42b on #063b38 |
7.03 | 3 | passed | Focus ring in the sidebar |
color.focus.ring-on-sidebar |
color.surface.sidebar-hover |
ui | #d9c42b on #0f4643 |
6.01 | 3 | passed | Focus ring in the sidebar |
color.focus.ring-on-sidebar |
color.surface.sidebar-selected |
ui | #d9c42b on #0c5450 |
4.95 | 3 | passed | Focus ring in the sidebar |
color.accent.bg |
color.surface.canvas |
ui | #136f69 on #fbfeff |
5.91 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg |
color.surface.raised |
ui | #136f69 on #f5fbfc |
5.73 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg |
color.surface.overlay |
ui | #136f69 on #fbfeff |
5.91 | 3 | passed | Primary button and approval buttons against the surface |
color.success.bg |
color.surface.canvas |
ui | #137337 on #fbfeff |
5.86 | 3 | passed | Primary button and approval buttons against the surface |
color.success.bg |
color.surface.raised |
ui | #137337 on #f5fbfc |
5.68 | 3 | passed | Primary button and approval buttons against the surface |
color.success.bg |
color.surface.overlay |
ui | #137337 on #fbfeff |
5.86 | 3 | passed | Primary button and approval buttons against the surface |
color.danger.bg |
color.surface.canvas |
ui | #b21622 on #fbfeff |
6.84 | 3 | passed | Primary button and approval buttons against the surface |
color.danger.bg |
color.surface.raised |
ui | #b21622 on #f5fbfc |
6.63 | 3 | passed | Primary button and approval buttons against the surface |
color.danger.bg |
color.surface.overlay |
ui | #b21622 on #fbfeff |
6.84 | 3 | passed | Primary button and approval buttons against the surface |
color.run.queued |
color.surface.raised |
ui | #748486 on #f5fbfc |
3.73 | 3 | passed | Live box spine and run icons |
color.run.queued |
color.surface.canvas |
ui | #748486 on #fbfeff |
3.85 | 3 | passed | Live box spine and run icons |
color.run.queued |
color.surface.sunken |
ui | #748486 on #e5eef0 |
3.31 | 3 | passed | Live box spine and run icons |
color.run.queued |
color.surface.list |
ui | #748486 on #eff6f7 |
3.56 | 3 | passed | Live box spine and run icons |
color.run.running |
color.surface.raised |
ui | #1b8a83 on #f5fbfc |
4.01 | 3 | passed | Live box spine and run icons |
color.run.running |
color.surface.canvas |
ui | #1b8a83 on #fbfeff |
4.14 | 3 | passed | Live box spine and run icons |
color.run.running |
color.surface.sunken |
ui | #1b8a83 on #e5eef0 |
3.56 | 3 | passed | Live box spine and run icons |
color.run.running |
color.surface.list |
ui | #1b8a83 on #eff6f7 |
3.83 | 3 | passed | Live box spine and run icons |
color.run.waiting |
color.surface.raised |
ui | #8d7716 on #f5fbfc |
4.20 | 3 | passed | Live box spine and run icons |
color.run.waiting |
color.surface.canvas |
ui | #8d7716 on #fbfeff |
4.33 | 3 | passed | Live box spine and run icons |
color.run.waiting |
color.surface.sunken |
ui | #8d7716 on #e5eef0 |
3.73 | 3 | passed | Live box spine and run icons |
color.run.waiting |
color.surface.list |
ui | #8d7716 on #eff6f7 |
4.01 | 3 | passed | Live box spine and run icons |
color.run.completed |
color.surface.raised |
ui | #1b9046 on #f5fbfc |
3.92 | 3 | passed | Live box spine and run icons |
color.run.completed |
color.surface.canvas |
ui | #1b9046 on #fbfeff |
4.04 | 3 | passed | Live box spine and run icons |
color.run.completed |
color.surface.sunken |
ui | #1b9046 on #e5eef0 |
3.48 | 3 | passed | Live box spine and run icons |
color.run.completed |
color.surface.list |
ui | #1b9046 on #eff6f7 |
3.75 | 3 | passed | Live box spine and run icons |
color.run.failed |
color.surface.raised |
ui | #d43538 on #f5fbfc |
4.60 | 3 | passed | Live box spine and run icons |
color.run.failed |
color.surface.canvas |
ui | #d43538 on #fbfeff |
4.75 | 3 | passed | Live box spine and run icons |
color.run.failed |
color.surface.sunken |
ui | #d43538 on #e5eef0 |
4.08 | 3 | passed | Live box spine and run icons |
color.run.failed |
color.surface.list |
ui | #d43538 on #eff6f7 |
4.40 | 3 | passed | Live box spine and run icons |
color.run.cancelled |
color.surface.raised |
ui | #59696c on #f5fbfc |
5.49 | 3 | passed | Live box spine and run icons |
color.run.cancelled |
color.surface.canvas |
ui | #59696c on #fbfeff |
5.66 | 3 | passed | Live box spine and run icons |
color.run.cancelled |
color.surface.sunken |
ui | #59696c on #e5eef0 |
4.87 | 3 | passed | Live box spine and run icons |
color.run.cancelled |
color.surface.list |
ui | #59696c on #eff6f7 |
5.24 | 3 | passed | Live box spine and run icons |
color.trigger.received |
color.surface.canvas |
ui | #748486 on #fbfeff |
3.85 | 3 | passed | Trigger state icons on messages |
color.trigger.received |
color.surface.hover |
ui | #748486 on #e5eef0 |
3.31 | 3 | passed | Trigger state icons on messages |
color.trigger.received |
color.attention.subtle |
ui | #748486 on #fef5aa |
3.50 | 3 | passed | Trigger state icons on messages |
color.trigger.received |
color.surface.list |
ui | #748486 on #eff6f7 |
3.56 | 3 | passed | Trigger state icons on messages |
color.trigger.queued |
color.surface.canvas |
ui | #59696c on #fbfeff |
5.66 | 3 | passed | Trigger state icons on messages |
color.trigger.queued |
color.surface.hover |
ui | #59696c on #e5eef0 |
4.87 | 3 | passed | Trigger state icons on messages |
color.trigger.queued |
color.attention.subtle |
ui | #59696c on #fef5aa |
5.15 | 3 | passed | Trigger state icons on messages |
color.trigger.queued |
color.surface.list |
ui | #59696c on #eff6f7 |
5.24 | 3 | passed | Trigger state icons on messages |
color.trigger.working |
color.surface.canvas |
ui | #1b8a83 on #fbfeff |
4.14 | 3 | passed | Trigger state icons on messages |
color.trigger.working |
color.surface.hover |
ui | #1b8a83 on #e5eef0 |
3.56 | 3 | passed | Trigger state icons on messages |
color.trigger.working |
color.attention.subtle |
ui | #1b8a83 on #fef5aa |
3.76 | 3 | passed | Trigger state icons on messages |
color.trigger.working |
color.surface.list |
ui | #1b8a83 on #eff6f7 |
3.83 | 3 | passed | Trigger state icons on messages |
color.trigger.done |
color.surface.canvas |
ui | #1b9046 on #fbfeff |
4.04 | 3 | passed | Trigger state icons on messages |
color.trigger.done |
color.surface.hover |
ui | #1b9046 on #e5eef0 |
3.48 | 3 | passed | Trigger state icons on messages |
color.trigger.done |
color.attention.subtle |
ui | #1b9046 on #fef5aa |
3.68 | 3 | passed | Trigger state icons on messages |
color.trigger.done |
color.surface.list |
ui | #1b9046 on #eff6f7 |
3.75 | 3 | passed | Trigger state icons on messages |
color.trigger.failed |
color.surface.canvas |
ui | #d43538 on #fbfeff |
4.75 | 3 | passed | Trigger state icons on messages |
color.trigger.failed |
color.surface.hover |
ui | #d43538 on #e5eef0 |
4.08 | 3 | passed | Trigger state icons on messages |
color.trigger.failed |
color.attention.subtle |
ui | #d43538 on #fef5aa |
4.32 | 3 | passed | Trigger state icons on messages |
color.trigger.failed |
color.surface.list |
ui | #d43538 on #eff6f7 |
4.40 | 3 | passed | Trigger state icons on messages |
color.trigger.followup |
color.surface.canvas |
ui | #197fc3 on #fbfeff |
4.26 | 3 | passed | Trigger state icons on messages |
color.trigger.followup |
color.surface.hover |
ui | #197fc3 on #e5eef0 |
3.66 | 3 | passed | Trigger state icons on messages |
color.trigger.followup |
color.attention.subtle |
ui | #197fc3 on #fef5aa |
3.88 | 3 | passed | Trigger state icons on messages |
color.trigger.followup |
color.surface.list |
ui | #197fc3 on #eff6f7 |
3.95 | 3 | passed | Trigger state icons on messages |
color.attention.border |
color.surface.canvas |
ui | #8d7716 on #fbfeff |
4.33 | 3 | passed | Mention bar |
color.attention.border |
color.attention.subtle |
ui | #8d7716 on #fef5aa |
3.94 | 3 | passed | Mention bar |
color.category.spruce.on-sidebar |
color.surface.sidebar |
ui | #7cd5cd on #063b38 |
7.25 | 3 | passed | Space icon in the sidebar |
color.category.spruce.on-sidebar |
color.surface.sidebar-hover |
ui | #7cd5cd on #0f4643 |
6.20 | 3 | passed | Space icon in the sidebar |
color.category.spruce.on-sidebar |
color.surface.sidebar-selected |
ui | #7cd5cd on #0c5450 |
5.11 | 3 | passed | Space icon in the sidebar |
color.category.loch.on-sidebar |
color.surface.sidebar |
ui | #8ec9fb on #063b38 |
7.04 | 3 | passed | Space icon in the sidebar |
color.category.loch.on-sidebar |
color.surface.sidebar-hover |
ui | #8ec9fb on #0f4643 |
6.02 | 3 | passed | Space icon in the sidebar |
color.category.loch.on-sidebar |
color.surface.sidebar-selected |
ui | #8ec9fb on #0c5450 |
4.96 | 3 | passed | Space icon in the sidebar |
color.category.heather.on-sidebar |
color.surface.sidebar |
ui | #fca3cd on #063b38 |
6.66 | 3 | passed | Space icon in the sidebar |
color.category.heather.on-sidebar |
color.surface.sidebar-hover |
ui | #fca3cd on #0f4643 |
5.69 | 3 | passed | Space icon in the sidebar |
color.category.heather.on-sidebar |
color.surface.sidebar-selected |
ui | #fca3cd on #0c5450 |
4.69 | 3 | passed | Space icon in the sidebar |
color.category.rowan.on-sidebar |
color.surface.sidebar |
ui | #fcaaa3 on #063b38 |
6.75 | 3 | passed | Space icon in the sidebar |
color.category.rowan.on-sidebar |
color.surface.sidebar-hover |
ui | #fcaaa3 on #0f4643 |
5.77 | 3 | passed | Space icon in the sidebar |
color.category.rowan.on-sidebar |
color.surface.sidebar-selected |
ui | #fcaaa3 on #0c5450 |
4.76 | 3 | passed | Space icon in the sidebar |
color.category.amber.on-sidebar |
color.surface.sidebar |
ui | #fcaf6f on #063b38 |
6.80 | 3 | passed | Space icon in the sidebar |
color.category.amber.on-sidebar |
color.surface.sidebar-hover |
ui | #fcaf6f on #0f4643 |
5.82 | 3 | passed | Space icon in the sidebar |
color.category.amber.on-sidebar |
color.surface.sidebar-selected |
ui | #fcaf6f on #0c5450 |
4.79 | 3 | passed | Space icon in the sidebar |
color.category.gorse.on-sidebar |
color.surface.sidebar |
ui | #d9c42b on #063b38 |
7.03 | 3 | passed | Space icon in the sidebar |
color.category.gorse.on-sidebar |
color.surface.sidebar-hover |
ui | #d9c42b on #0f4643 |
6.01 | 3 | passed | Space icon in the sidebar |
color.category.gorse.on-sidebar |
color.surface.sidebar-selected |
ui | #d9c42b on #0c5450 |
4.95 | 3 | passed | Space icon in the sidebar |
color.category.moss.on-sidebar |
color.surface.sidebar |
ui | #89d89a on #063b38 |
7.31 | 3 | passed | Space icon in the sidebar |
color.category.moss.on-sidebar |
color.surface.sidebar-hover |
ui | #89d89a on #0f4643 |
6.25 | 3 | passed | Space icon in the sidebar |
color.category.moss.on-sidebar |
color.surface.sidebar-selected |
ui | #89d89a on #0c5450 |
5.15 | 3 | passed | Space icon in the sidebar |
color.category.granite.on-sidebar |
color.surface.sidebar |
ui | #ccd9db on #063b38 |
8.59 | 3 | passed | Space icon in the sidebar |
color.category.granite.on-sidebar |
color.surface.sidebar-hover |
ui | #ccd9db on #0f4643 |
7.34 | 3 | passed | Space icon in the sidebar |
color.category.granite.on-sidebar |
color.surface.sidebar-selected |
ui | #ccd9db on #0c5450 |
6.05 | 3 | passed | Space icon in the sidebar |
color.category.spruce.fg |
color.surface.canvas |
ui | #136f69 on #fbfeff |
5.91 | 3 | passed | Category dot and icon on content surfaces |
color.category.spruce.fg |
color.surface.list |
ui | #136f69 on #eff6f7 |
5.48 | 3 | passed | Category dot and icon on content surfaces |
color.category.spruce.fg |
color.surface.overlay |
ui | #136f69 on #fbfeff |
5.91 | 3 | passed | Category dot and icon on content surfaces |
color.category.loch.fg |
color.surface.canvas |
ui | #12659d on #fbfeff |
6.14 | 3 | passed | Category dot and icon on content surfaces |
color.category.loch.fg |
color.surface.list |
ui | #12659d on #eff6f7 |
5.69 | 3 | passed | Category dot and icon on content surfaces |
color.category.loch.fg |
color.surface.overlay |
ui | #12659d on #fbfeff |
6.14 | 3 | passed | Category dot and icon on content surfaces |
color.category.heather.fg |
color.surface.canvas |
ui | #a51f6f on #fbfeff |
6.85 | 3 | passed | Category dot and icon on content surfaces |
color.category.heather.fg |
color.surface.list |
ui | #a51f6f on #eff6f7 |
6.34 | 3 | passed | Category dot and icon on content surfaces |
color.category.heather.fg |
color.surface.overlay |
ui | #a51f6f on #fbfeff |
6.85 | 3 | passed | Category dot and icon on content surfaces |
color.category.rowan.fg |
color.surface.canvas |
ui | #b21622 on #fbfeff |
6.84 | 3 | passed | Category dot and icon on content surfaces |
color.category.rowan.fg |
color.surface.list |
ui | #b21622 on #eff6f7 |
6.33 | 3 | passed | Category dot and icon on content surfaces |
color.category.rowan.fg |
color.surface.overlay |
ui | #b21622 on #fbfeff |
6.84 | 3 | passed | Category dot and icon on content surfaces |
color.category.amber.fg |
color.surface.canvas |
ui | #8c4f10 on #fbfeff |
6.39 | 3 | passed | Category dot and icon on content surfaces |
color.category.amber.fg |
color.surface.list |
ui | #8c4f10 on #eff6f7 |
5.92 | 3 | passed | Category dot and icon on content surfaces |
color.category.amber.fg |
color.surface.overlay |
ui | #8c4f10 on #fbfeff |
6.39 | 3 | passed | Category dot and icon on content surfaces |
color.category.gorse.fg |
color.surface.canvas |
ui | #735e10 on #fbfeff |
6.21 | 3 | passed | Category dot and icon on content surfaces |
color.category.gorse.fg |
color.surface.list |
ui | #735e10 on #eff6f7 |
5.75 | 3 | passed | Category dot and icon on content surfaces |
color.category.gorse.fg |
color.surface.overlay |
ui | #735e10 on #fbfeff |
6.21 | 3 | passed | Category dot and icon on content surfaces |
color.category.moss.fg |
color.surface.canvas |
ui | #137337 on #fbfeff |
5.86 | 3 | passed | Category dot and icon on content surfaces |
color.category.moss.fg |
color.surface.list |
ui | #137337 on #eff6f7 |
5.43 | 3 | passed | Category dot and icon on content surfaces |
color.category.moss.fg |
color.surface.overlay |
ui | #137337 on #fbfeff |
5.86 | 3 | passed | Category dot and icon on content surfaces |
color.category.granite.fg |
color.surface.canvas |
ui | #3f5154 on #fbfeff |
8.24 | 3 | passed | Category dot and icon on content surfaces |
color.category.granite.fg |
color.surface.list |
ui | #3f5154 on #eff6f7 |
7.63 | 3 | passed | Category dot and icon on content surfaces |
color.category.granite.fg |
color.surface.overlay |
ui | #3f5154 on #fbfeff |
8.24 | 3 | passed | Category dot and icon on content surfaces |
color.terminal.fg |
color.terminal.bg |
text | #102326 on #f5fbfc |
15.57 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.red |
color.terminal.bg |
text | #890f18 on #f5fbfc |
9.36 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.green |
color.terminal.bg |
text | #0c5828 on #f5fbfc |
8.23 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.yellow |
color.terminal.bg |
text | #59470a on #f5fbfc |
8.62 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.blue |
color.terminal.bg |
text | #0b4d79 on #f5fbfc |
8.54 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.magenta |
color.terminal.bg |
text | #810e55 on #f5fbfc |
9.44 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.cyan |
color.terminal.bg |
text | #0c5450 on #f5fbfc |
8.37 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.bright-black |
color.terminal.bg |
text | #3f5154 on #f5fbfc |
7.98 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.bright-red |
color.terminal.bg |
text | #b21622 on #f5fbfc |
6.63 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.bright-green |
color.terminal.bg |
text | #137337 on #f5fbfc |
5.68 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.bright-yellow |
color.terminal.bg |
text | #735e10 on #f5fbfc |
6.02 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.bright-blue |
color.terminal.bg |
text | #12659d on #f5fbfc |
5.95 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.bright-magenta |
color.terminal.bg |
text | #a51f6f on #f5fbfc |
6.64 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.bright-cyan |
color.terminal.bg |
text | #136f69 on #f5fbfc |
5.73 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.black |
color.terminal.bg |
ui | #102326 on #f5fbfc |
15.57 | 3 | passed | Terminal: gray tones at the ends (ANSI 0, 7, 15) and cursor |
color.terminal.ansi.white |
color.terminal.bg |
ui | #59696c on #f5fbfc |
5.49 | 3 | passed | Terminal: gray tones at the ends (ANSI 0, 7, 15) and cursor |
color.terminal.ansi.bright-white |
color.terminal.bg |
ui | #748486 on #f5fbfc |
3.73 | 3 | passed | Terminal: gray tones at the ends (ANSI 0, 7, 15) and cursor |
color.terminal.cursor |
color.terminal.bg |
ui | #136f69 on #f5fbfc |
5.73 | 3 | passed | Terminal: gray tones at the ends (ANSI 0, 7, 15) and cursor |
color.terminal.cursor-text |
color.terminal.cursor |
text | #f5fbfc on #136f69 |
5.73 | 4.5 | passed | Terminal: character under the block cursor |
color.terminal.fg |
color.terminal.selection-bg |
text | #102326 on #ccf5f0 |
13.86 | 4.5 | passed | Terminal: selected text |
color.viz.series.1 |
color.surface.canvas |
ui | #197fc3 on #fbfeff |
4.26 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.1 |
color.surface.list |
ui | #197fc3 on #eff6f7 |
3.95 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.1 |
color.surface.raised |
ui | #197fc3 on #f5fbfc |
4.13 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.2 |
color.surface.canvas |
ui | #ae6416 on #fbfeff |
4.47 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.2 |
color.surface.list |
ui | #ae6416 on #eff6f7 |
4.14 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.2 |
color.surface.raised |
ui | #ae6416 on #f5fbfc |
4.33 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.3 |
color.surface.canvas |
ui | #136f69 on #fbfeff |
5.91 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.3 |
color.surface.list |
ui | #136f69 on #eff6f7 |
5.48 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.3 |
color.surface.raised |
ui | #136f69 on #f5fbfc |
5.73 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.4 |
color.surface.canvas |
ui | #c53a88 on #fbfeff |
4.78 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.4 |
color.surface.list |
ui | #c53a88 on #eff6f7 |
4.43 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.4 |
color.surface.raised |
ui | #c53a88 on #f5fbfc |
4.63 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.5 |
color.surface.canvas |
ui | #8d7716 on #fbfeff |
4.33 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.5 |
color.surface.list |
ui | #8d7716 on #eff6f7 |
4.01 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.5 |
color.surface.raised |
ui | #8d7716 on #f5fbfc |
4.20 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.6 |
color.surface.canvas |
ui | #063e1a on #fbfeff |
12.11 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.6 |
color.surface.list |
ui | #063e1a on #eff6f7 |
11.21 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.6 |
color.surface.raised |
ui | #063e1a on #f5fbfc |
11.74 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.7 |
color.surface.canvas |
ui | #d43538 on #fbfeff |
4.75 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.7 |
color.surface.list |
ui | #d43538 on #eff6f7 |
4.40 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.7 |
color.surface.raised |
ui | #d43538 on #f5fbfc |
4.60 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.8 |
color.surface.canvas |
ui | #748486 on #fbfeff |
3.85 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.8 |
color.surface.list |
ui | #748486 on #eff6f7 |
3.56 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.8 |
color.surface.raised |
ui | #748486 on #f5fbfc |
3.73 | 3 | passed | Charts: series and axes against the surface |
color.viz.axis |
color.surface.canvas |
ui | #748486 on #fbfeff |
3.85 | 3 | passed | Charts: series and axes against the surface |
color.viz.axis |
color.surface.list |
ui | #748486 on #eff6f7 |
3.56 | 3 | passed | Charts: series and axes against the surface |
color.viz.axis |
color.surface.raised |
ui | #748486 on #f5fbfc |
3.73 | 3 | passed | Charts: series and axes against the surface |
Theme dark¶
| Foreground | Background | Kind | Values | Ratio | Threshold | Result | Usage |
|---|---|---|---|---|---|---|---|
color.text.primary |
color.surface.canvas |
text | #f5fbfc on #15282b |
14.66 | 4.5 | passed | Body text and titles |
color.text.primary |
color.surface.list |
text | #f5fbfc on #102326 |
15.57 | 4.5 | passed | Body text and titles |
color.text.primary |
color.surface.raised |
text | #f5fbfc on #1b2e31 |
13.56 | 4.5 | passed | Body text and titles |
color.text.primary |
color.surface.overlay |
text | #f5fbfc on #24363a |
12.07 | 4.5 | passed | Body text and titles |
color.text.primary |
color.surface.hover |
text | #f5fbfc on #1b2e31 |
13.56 | 4.5 | passed | Body text and titles |
color.text.primary |
color.surface.selected |
text | #f5fbfc on #08312e |
13.49 | 4.5 | passed | Body text and titles |
color.text.primary |
color.surface.input |
text | #f5fbfc on #1b2e31 |
13.56 | 4.5 | passed | Body text and titles |
color.text.primary |
color.surface.sunken |
text | #f5fbfc on #0c1e21 |
16.42 | 4.5 | passed | Body text and titles |
color.text.primary |
color.attention.subtle |
text | #f5fbfc on #291f02 |
15.56 | 4.5 | passed | Body text and titles |
color.text.primary |
color.accent.subtle |
text | #f5fbfc on #032624 |
15.37 | 4.5 | passed | Body text and titles |
color.text.primary |
color.success.subtle |
text | #f5fbfc on #03280f |
15.28 | 4.5 | passed | Body text and titles |
color.text.primary |
color.warning.subtle |
text | #f5fbfc on #331902 |
15.68 | 4.5 | passed | Body text and titles |
color.text.primary |
color.danger.subtle |
text | #f5fbfc on #430307 |
16.01 | 4.5 | passed | Body text and titles |
color.text.primary |
color.info.subtle |
text | #f5fbfc on #02223a |
15.54 | 4.5 | passed | Body text and titles |
color.text.secondary |
color.surface.canvas |
text | #ccd9db on #15282b |
10.59 | 4.5 | passed | Metadata, timestamps |
color.text.secondary |
color.surface.list |
text | #ccd9db on #102326 |
11.25 | 4.5 | passed | Metadata, timestamps |
color.text.secondary |
color.surface.raised |
text | #ccd9db on #1b2e31 |
9.80 | 4.5 | passed | Metadata, timestamps |
color.text.secondary |
color.surface.overlay |
text | #ccd9db on #24363a |
8.72 | 4.5 | passed | Metadata, timestamps |
color.text.secondary |
color.surface.hover |
text | #ccd9db on #1b2e31 |
9.80 | 4.5 | passed | Metadata, timestamps |
color.text.secondary |
color.surface.selected |
text | #ccd9db on #08312e |
9.75 | 4.5 | passed | Metadata, timestamps |
color.text.secondary |
color.surface.input |
text | #ccd9db on #1b2e31 |
9.80 | 4.5 | passed | Metadata, timestamps |
color.text.secondary |
color.surface.sunken |
text | #ccd9db on #0c1e21 |
11.87 | 4.5 | passed | Metadata, timestamps |
color.text.secondary |
color.attention.subtle |
text | #ccd9db on #291f02 |
11.24 | 4.5 | passed | Metadata, timestamps |
color.text.muted |
color.surface.canvas |
text | #afbec0 on #15282b |
7.99 | 4.5 | passed | Placeholders, hints, Done section |
color.text.muted |
color.surface.list |
text | #afbec0 on #102326 |
8.49 | 4.5 | passed | Placeholders, hints, Done section |
color.text.muted |
color.surface.raised |
text | #afbec0 on #1b2e31 |
7.39 | 4.5 | passed | Placeholders, hints, Done section |
color.text.muted |
color.surface.overlay |
text | #afbec0 on #24363a |
6.58 | 4.5 | passed | Placeholders, hints, Done section |
color.text.muted |
color.surface.hover |
text | #afbec0 on #1b2e31 |
7.39 | 4.5 | passed | Placeholders, hints, Done section |
color.text.muted |
color.surface.input |
text | #afbec0 on #1b2e31 |
7.39 | 4.5 | passed | Placeholders, hints, Done section |
color.text.muted |
color.surface.sunken |
text | #afbec0 on #0c1e21 |
8.95 | 4.5 | passed | Placeholders, hints, Done section |
color.text.link |
color.surface.canvas |
text | #7cd5cd on #15282b |
8.94 | 4.5 | passed | Links, mention pills |
color.text.link |
color.surface.list |
text | #7cd5cd on #102326 |
9.50 | 4.5 | passed | Links, mention pills |
color.text.link |
color.surface.raised |
text | #7cd5cd on #1b2e31 |
8.27 | 4.5 | passed | Links, mention pills |
color.text.link |
color.surface.overlay |
text | #7cd5cd on #24363a |
7.37 | 4.5 | passed | Links, mention pills |
color.text.link |
color.surface.sunken |
text | #7cd5cd on #0c1e21 |
10.02 | 4.5 | passed | Links, mention pills |
color.text.link |
color.attention.subtle |
text | #7cd5cd on #291f02 |
9.49 | 4.5 | passed | Links, mention pills |
color.text.on-accent |
color.accent.bg |
text | #041c1a on #49c0b7 |
8.01 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-hover |
text | #041c1a on #7cd5cd |
10.33 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-pressed |
text | #041c1a on #a8e8e1 |
12.89 | 4.5 | passed | Text on the primary button |
color.text.on-sidebar |
color.surface.sidebar |
text | #e4fbf8 on #032624 |
14.89 | 4.5 | passed | Sidebar: space titles, unread channels |
color.text.on-sidebar |
color.surface.sidebar-hover |
text | #e4fbf8 on #08312e |
13.06 | 4.5 | passed | Sidebar: space titles, unread channels |
color.text.on-sidebar |
color.surface.sidebar-selected |
text | #e4fbf8 on #063b38 |
11.51 | 4.5 | passed | Sidebar: space titles, unread channels |
color.text.on-sidebar-secondary |
color.surface.sidebar |
text | #a8e8e1 on #032624 |
11.71 | 4.5 | passed | Sidebar: read channels |
color.text.on-sidebar-secondary |
color.surface.sidebar-hover |
text | #a8e8e1 on #08312e |
10.27 | 4.5 | passed | Sidebar: read channels |
color.text.on-sidebar-secondary |
color.surface.sidebar-selected |
text | #a8e8e1 on #063b38 |
9.05 | 4.5 | passed | Sidebar: read channels |
color.text.on-sidebar-muted |
color.surface.sidebar |
text | #7cd5cd on #032624 |
9.38 | 4.5 | passed | Sidebar: muted channels |
color.text.on-sidebar-muted |
color.surface.sidebar-hover |
text | #7cd5cd on #08312e |
8.23 | 4.5 | passed | Sidebar: muted channels |
color.accent.fg |
color.surface.canvas |
text | #7cd5cd on #15282b |
8.94 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg |
color.surface.list |
text | #7cd5cd on #102326 |
9.50 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg |
color.surface.raised |
text | #7cd5cd on #1b2e31 |
8.27 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg |
color.surface.overlay |
text | #7cd5cd on #24363a |
7.37 | 4.5 | passed | Accent as text (text buttons) |
color.attention.fg |
color.surface.canvas |
text | #d9c42b on #15282b |
8.67 | 4.5 | passed | State texts in banners and the live box |
color.attention.fg |
color.surface.list |
text | #d9c42b on #102326 |
9.21 | 4.5 | passed | State texts in banners and the live box |
color.attention.fg |
color.surface.raised |
text | #d9c42b on #1b2e31 |
8.02 | 4.5 | passed | State texts in banners and the live box |
color.attention.fg |
color.surface.overlay |
text | #d9c42b on #24363a |
7.14 | 4.5 | passed | State texts in banners and the live box |
color.success.fg |
color.surface.canvas |
text | #89d89a on #15282b |
9.01 | 4.5 | passed | State texts in banners and the live box |
color.success.fg |
color.surface.list |
text | #89d89a on #102326 |
9.57 | 4.5 | passed | State texts in banners and the live box |
color.success.fg |
color.surface.raised |
text | #89d89a on #1b2e31 |
8.34 | 4.5 | passed | State texts in banners and the live box |
color.success.fg |
color.surface.overlay |
text | #89d89a on #24363a |
7.42 | 4.5 | passed | State texts in banners and the live box |
color.warning.fg |
color.surface.canvas |
text | #fcaf6f on #15282b |
8.39 | 4.5 | passed | State texts in banners and the live box |
color.warning.fg |
color.surface.list |
text | #fcaf6f on #102326 |
8.91 | 4.5 | passed | State texts in banners and the live box |
color.warning.fg |
color.surface.raised |
text | #fcaf6f on #1b2e31 |
7.76 | 4.5 | passed | State texts in banners and the live box |
color.warning.fg |
color.surface.overlay |
text | #fcaf6f on #24363a |
6.91 | 4.5 | passed | State texts in banners and the live box |
color.danger.fg |
color.surface.canvas |
text | #fb827a on #15282b |
6.26 | 4.5 | passed | State texts in banners and the live box |
color.danger.fg |
color.surface.list |
text | #fb827a on #102326 |
6.65 | 4.5 | passed | State texts in banners and the live box |
color.danger.fg |
color.surface.raised |
text | #fb827a on #1b2e31 |
5.79 | 4.5 | passed | State texts in banners and the live box |
color.danger.fg |
color.surface.overlay |
text | #fb827a on #24363a |
5.15 | 4.5 | passed | State texts in banners and the live box |
color.info.fg |
color.surface.canvas |
text | #8ec9fb on #15282b |
8.68 | 4.5 | passed | State texts in banners and the live box |
color.info.fg |
color.surface.list |
text | #8ec9fb on #102326 |
9.22 | 4.5 | passed | State texts in banners and the live box |
color.info.fg |
color.surface.raised |
text | #8ec9fb on #1b2e31 |
8.03 | 4.5 | passed | State texts in banners and the live box |
color.info.fg |
color.surface.overlay |
text | #8ec9fb on #24363a |
7.15 | 4.5 | passed | State texts in banners and the live box |
color.attention.fg |
color.attention.subtle |
text | #d9c42b on #291f02 |
9.20 | 4.5 | passed | State text on its own tinted background |
color.success.fg |
color.success.subtle |
text | #89d89a on #03280f |
9.40 | 4.5 | passed | State text on its own tinted background |
color.warning.fg |
color.warning.subtle |
text | #fcaf6f on #331902 |
8.98 | 4.5 | passed | State text on its own tinted background |
color.danger.fg |
color.danger.subtle |
text | #fb827a on #430307 |
6.83 | 4.5 | passed | State text on its own tinted background |
color.info.fg |
color.info.subtle |
text | #8ec9fb on #02223a |
9.21 | 4.5 | passed | State text on its own tinted background |
color.attention.on-bg |
color.attention.bg |
text | #291f02 on #d9c42b |
9.20 | 4.5 | passed | Strong badges and buttons |
color.success.on-bg |
color.success.bg |
text | #03280f on #89d89a |
9.40 | 4.5 | passed | Strong badges and buttons |
color.warning.on-bg |
color.warning.bg |
text | #331902 on #fcaf6f |
8.98 | 4.5 | passed | Strong badges and buttons |
color.danger.on-bg |
color.danger.bg |
text | #430307 on #fb827a |
6.83 | 4.5 | passed | Strong badges and buttons |
color.info.on-bg |
color.info.bg |
text | #02223a on #58b3fa |
7.15 | 4.5 | passed | Strong badges and buttons |
color.badge.personal-fg |
color.badge.personal-bg |
text | #fdc8df on #5d073c |
9.29 | 4.5 | passed | Backend policy badge |
color.badge.organization-fg |
color.badge.organization-bg |
text | #bbdefd on #053656 |
8.98 | 4.5 | passed | Backend policy badge |
color.code.fg |
color.code.bg |
text | #e5eef0 on #0c1e21 |
14.57 | 4.5 | passed | Code |
color.category.spruce.chip-fg |
color.category.spruce.chip-bg |
text | #a8e8e1 on #063b38 |
9.05 | 4.5 | passed | Tag chip |
color.category.loch.chip-fg |
color.category.loch.chip-bg |
text | #bbdefd on #053656 |
8.98 | 4.5 | passed | Tag chip |
color.category.heather.chip-fg |
color.category.heather.chip-bg |
text | #fdc8df on #5d073c |
9.29 | 4.5 | passed | Tag chip |
color.category.rowan.chip-fg |
color.category.rowan.chip-bg |
text | #fdcbc6 on #63080e |
9.25 | 4.5 | passed | Tag chip |
color.category.amber.chip-fg |
color.category.amber.chip-bg |
text | #fdcfaa on #4c2905 |
9.03 | 4.5 | passed | Tag chip |
color.category.gorse.chip-fg |
color.category.gorse.chip-bg |
text | #eddc59 on #3f3105 |
9.06 | 4.5 | passed | Tag chip |
color.category.moss.chip-fg |
color.category.moss.chip-bg |
text | #afeaba on #063e1a |
8.94 | 4.5 | passed | Tag chip |
color.category.granite.chip-fg |
color.category.granite.chip-bg |
text | #ccd9db on #102326 |
11.25 | 4.5 | passed | Tag chip |
color.border.control |
color.surface.canvas |
ui | #748486 on #15282b |
3.93 | 3 | passed | Border of input fields and secondary buttons |
color.border.control |
color.surface.list |
ui | #748486 on #102326 |
4.17 | 3 | passed | Border of input fields and secondary buttons |
color.border.control |
color.surface.raised |
ui | #748486 on #1b2e31 |
3.64 | 3 | passed | Border of input fields and secondary buttons |
color.border.control |
color.surface.overlay |
ui | #748486 on #24363a |
3.24 | 3 | passed | Border of input fields and secondary buttons |
color.focus.ring |
color.surface.canvas |
ui | #d9c42b on #15282b |
8.67 | 3 | passed | Focus ring |
color.focus.ring |
color.surface.list |
ui | #d9c42b on #102326 |
9.21 | 3 | passed | Focus ring |
color.focus.ring |
color.surface.raised |
ui | #d9c42b on #1b2e31 |
8.02 | 3 | passed | Focus ring |
color.focus.ring |
color.surface.overlay |
ui | #d9c42b on #24363a |
7.14 | 3 | passed | Focus ring |
color.focus.ring |
color.surface.input |
ui | #d9c42b on #1b2e31 |
8.02 | 3 | passed | Focus ring |
color.focus.ring |
color.surface.selected |
ui | #d9c42b on #08312e |
7.98 | 3 | passed | Focus ring |
color.focus.ring-on-sidebar |
color.surface.sidebar |
ui | #d9c42b on #032624 |
9.09 | 3 | passed | Focus ring in the sidebar |
color.focus.ring-on-sidebar |
color.surface.sidebar-hover |
ui | #d9c42b on #08312e |
7.98 | 3 | passed | Focus ring in the sidebar |
color.focus.ring-on-sidebar |
color.surface.sidebar-selected |
ui | #d9c42b on #063b38 |
7.03 | 3 | passed | Focus ring in the sidebar |
color.accent.bg |
color.surface.canvas |
ui | #49c0b7 on #15282b |
6.94 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg |
color.surface.raised |
ui | #49c0b7 on #1b2e31 |
6.42 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg |
color.surface.overlay |
ui | #49c0b7 on #24363a |
5.71 | 3 | passed | Primary button and approval buttons against the surface |
color.success.bg |
color.surface.canvas |
ui | #89d89a on #15282b |
9.01 | 3 | passed | Primary button and approval buttons against the surface |
color.success.bg |
color.surface.raised |
ui | #89d89a on #1b2e31 |
8.34 | 3 | passed | Primary button and approval buttons against the surface |
color.success.bg |
color.surface.overlay |
ui | #89d89a on #24363a |
7.42 | 3 | passed | Primary button and approval buttons against the surface |
color.danger.bg |
color.surface.canvas |
ui | #fb827a on #15282b |
6.26 | 3 | passed | Primary button and approval buttons against the surface |
color.danger.bg |
color.surface.raised |
ui | #fb827a on #1b2e31 |
5.79 | 3 | passed | Primary button and approval buttons against the surface |
color.danger.bg |
color.surface.overlay |
ui | #fb827a on #24363a |
5.15 | 3 | passed | Primary button and approval buttons against the surface |
color.run.queued |
color.surface.raised |
ui | #8f9fa1 on #1b2e31 |
5.16 | 3 | passed | Live box spine and run icons |
color.run.queued |
color.surface.canvas |
ui | #8f9fa1 on #15282b |
5.58 | 3 | passed | Live box spine and run icons |
color.run.queued |
color.surface.sunken |
ui | #8f9fa1 on #0c1e21 |
6.25 | 3 | passed | Live box spine and run icons |
color.run.queued |
color.surface.list |
ui | #8f9fa1 on #102326 |
5.92 | 3 | passed | Live box spine and run icons |
color.run.running |
color.surface.raised |
ui | #49c0b7 on #1b2e31 |
6.42 | 3 | passed | Live box spine and run icons |
color.run.running |
color.surface.canvas |
ui | #49c0b7 on #15282b |
6.94 | 3 | passed | Live box spine and run icons |
color.run.running |
color.surface.sunken |
ui | #49c0b7 on #0c1e21 |
7.77 | 3 | passed | Live box spine and run icons |
color.run.running |
color.surface.list |
ui | #49c0b7 on #102326 |
7.37 | 3 | passed | Live box spine and run icons |
color.run.waiting |
color.surface.raised |
ui | #d9c42b on #1b2e31 |
8.02 | 3 | passed | Live box spine and run icons |
color.run.waiting |
color.surface.canvas |
ui | #d9c42b on #15282b |
8.67 | 3 | passed | Live box spine and run icons |
color.run.waiting |
color.surface.sunken |
ui | #d9c42b on #0c1e21 |
9.71 | 3 | passed | Live box spine and run icons |
color.run.waiting |
color.surface.list |
ui | #d9c42b on #102326 |
9.21 | 3 | passed | Live box spine and run icons |
color.run.completed |
color.surface.raised |
ui | #62c37a on #1b2e31 |
6.48 | 3 | passed | Live box spine and run icons |
color.run.completed |
color.surface.canvas |
ui | #62c37a on #15282b |
7.01 | 3 | passed | Live box spine and run icons |
color.run.completed |
color.surface.sunken |
ui | #62c37a on #0c1e21 |
7.85 | 3 | passed | Live box spine and run icons |
color.run.completed |
color.surface.list |
ui | #62c37a on #102326 |
7.44 | 3 | passed | Live box spine and run icons |
color.run.failed |
color.surface.raised |
ui | #fb827a on #1b2e31 |
5.79 | 3 | passed | Live box spine and run icons |
color.run.failed |
color.surface.canvas |
ui | #fb827a on #15282b |
6.26 | 3 | passed | Live box spine and run icons |
color.run.failed |
color.surface.sunken |
ui | #fb827a on #0c1e21 |
7.01 | 3 | passed | Live box spine and run icons |
color.run.failed |
color.surface.list |
ui | #fb827a on #102326 |
6.65 | 3 | passed | Live box spine and run icons |
color.run.cancelled |
color.surface.raised |
ui | #8f9fa1 on #1b2e31 |
5.16 | 3 | passed | Live box spine and run icons |
color.run.cancelled |
color.surface.canvas |
ui | #8f9fa1 on #15282b |
5.58 | 3 | passed | Live box spine and run icons |
color.run.cancelled |
color.surface.sunken |
ui | #8f9fa1 on #0c1e21 |
6.25 | 3 | passed | Live box spine and run icons |
color.run.cancelled |
color.surface.list |
ui | #8f9fa1 on #102326 |
5.92 | 3 | passed | Live box spine and run icons |
color.trigger.received |
color.surface.canvas |
ui | #8f9fa1 on #15282b |
5.58 | 3 | passed | Trigger state icons on messages |
color.trigger.received |
color.surface.hover |
ui | #8f9fa1 on #1b2e31 |
5.16 | 3 | passed | Trigger state icons on messages |
color.trigger.received |
color.attention.subtle |
ui | #8f9fa1 on #291f02 |
5.92 | 3 | passed | Trigger state icons on messages |
color.trigger.received |
color.surface.list |
ui | #8f9fa1 on #102326 |
5.92 | 3 | passed | Trigger state icons on messages |
color.trigger.queued |
color.surface.canvas |
ui | #afbec0 on #15282b |
7.99 | 3 | passed | Trigger state icons on messages |
color.trigger.queued |
color.surface.hover |
ui | #afbec0 on #1b2e31 |
7.39 | 3 | passed | Trigger state icons on messages |
color.trigger.queued |
color.attention.subtle |
ui | #afbec0 on #291f02 |
8.48 | 3 | passed | Trigger state icons on messages |
color.trigger.queued |
color.surface.list |
ui | #afbec0 on #102326 |
8.49 | 3 | passed | Trigger state icons on messages |
color.trigger.working |
color.surface.canvas |
ui | #49c0b7 on #15282b |
6.94 | 3 | passed | Trigger state icons on messages |
color.trigger.working |
color.surface.hover |
ui | #49c0b7 on #1b2e31 |
6.42 | 3 | passed | Trigger state icons on messages |
color.trigger.working |
color.attention.subtle |
ui | #49c0b7 on #291f02 |
7.36 | 3 | passed | Trigger state icons on messages |
color.trigger.working |
color.surface.list |
ui | #49c0b7 on #102326 |
7.37 | 3 | passed | Trigger state icons on messages |
color.trigger.done |
color.surface.canvas |
ui | #62c37a on #15282b |
7.01 | 3 | passed | Trigger state icons on messages |
color.trigger.done |
color.surface.hover |
ui | #62c37a on #1b2e31 |
6.48 | 3 | passed | Trigger state icons on messages |
color.trigger.done |
color.attention.subtle |
ui | #62c37a on #291f02 |
7.44 | 3 | passed | Trigger state icons on messages |
color.trigger.done |
color.surface.list |
ui | #62c37a on #102326 |
7.44 | 3 | passed | Trigger state icons on messages |
color.trigger.failed |
color.surface.canvas |
ui | #fb827a on #15282b |
6.26 | 3 | passed | Trigger state icons on messages |
color.trigger.failed |
color.surface.hover |
ui | #fb827a on #1b2e31 |
5.79 | 3 | passed | Trigger state icons on messages |
color.trigger.failed |
color.attention.subtle |
ui | #fb827a on #291f02 |
6.64 | 3 | passed | Trigger state icons on messages |
color.trigger.failed |
color.surface.list |
ui | #fb827a on #102326 |
6.65 | 3 | passed | Trigger state icons on messages |
color.trigger.followup |
color.surface.canvas |
ui | #58b3fa on #15282b |
6.75 | 3 | passed | Trigger state icons on messages |
color.trigger.followup |
color.surface.hover |
ui | #58b3fa on #1b2e31 |
6.24 | 3 | passed | Trigger state icons on messages |
color.trigger.followup |
color.attention.subtle |
ui | #58b3fa on #291f02 |
7.16 | 3 | passed | Trigger state icons on messages |
color.trigger.followup |
color.surface.list |
ui | #58b3fa on #102326 |
7.16 | 3 | passed | Trigger state icons on messages |
color.attention.border |
color.surface.canvas |
ui | #c2ab24 on #15282b |
6.67 | 3 | passed | Mention bar |
color.attention.border |
color.attention.subtle |
ui | #c2ab24 on #291f02 |
7.08 | 3 | passed | Mention bar |
color.category.spruce.on-sidebar |
color.surface.sidebar |
ui | #7cd5cd on #032624 |
9.38 | 3 | passed | Space icon in the sidebar |
color.category.spruce.on-sidebar |
color.surface.sidebar-hover |
ui | #7cd5cd on #08312e |
8.23 | 3 | passed | Space icon in the sidebar |
color.category.spruce.on-sidebar |
color.surface.sidebar-selected |
ui | #7cd5cd on #063b38 |
7.25 | 3 | passed | Space icon in the sidebar |
color.category.loch.on-sidebar |
color.surface.sidebar |
ui | #8ec9fb on #032624 |
9.11 | 3 | passed | Space icon in the sidebar |
color.category.loch.on-sidebar |
color.surface.sidebar-hover |
ui | #8ec9fb on #08312e |
7.99 | 3 | passed | Space icon in the sidebar |
color.category.loch.on-sidebar |
color.surface.sidebar-selected |
ui | #8ec9fb on #063b38 |
7.04 | 3 | passed | Space icon in the sidebar |
color.category.heather.on-sidebar |
color.surface.sidebar |
ui | #fca3cd on #032624 |
8.62 | 3 | passed | Space icon in the sidebar |
color.category.heather.on-sidebar |
color.surface.sidebar-hover |
ui | #fca3cd on #08312e |
7.56 | 3 | passed | Space icon in the sidebar |
color.category.heather.on-sidebar |
color.surface.sidebar-selected |
ui | #fca3cd on #063b38 |
6.66 | 3 | passed | Space icon in the sidebar |
color.category.rowan.on-sidebar |
color.surface.sidebar |
ui | #fcaaa3 on #032624 |
8.74 | 3 | passed | Space icon in the sidebar |
color.category.rowan.on-sidebar |
color.surface.sidebar-hover |
ui | #fcaaa3 on #08312e |
7.67 | 3 | passed | Space icon in the sidebar |
color.category.rowan.on-sidebar |
color.surface.sidebar-selected |
ui | #fcaaa3 on #063b38 |
6.75 | 3 | passed | Space icon in the sidebar |
color.category.amber.on-sidebar |
color.surface.sidebar |
ui | #fcaf6f on #032624 |
8.80 | 3 | passed | Space icon in the sidebar |
color.category.amber.on-sidebar |
color.surface.sidebar-hover |
ui | #fcaf6f on #08312e |
7.72 | 3 | passed | Space icon in the sidebar |
color.category.amber.on-sidebar |
color.surface.sidebar-selected |
ui | #fcaf6f on #063b38 |
6.80 | 3 | passed | Space icon in the sidebar |
color.category.gorse.on-sidebar |
color.surface.sidebar |
ui | #d9c42b on #032624 |
9.09 | 3 | passed | Space icon in the sidebar |
color.category.gorse.on-sidebar |
color.surface.sidebar-hover |
ui | #d9c42b on #08312e |
7.98 | 3 | passed | Space icon in the sidebar |
color.category.gorse.on-sidebar |
color.surface.sidebar-selected |
ui | #d9c42b on #063b38 |
7.03 | 3 | passed | Space icon in the sidebar |
color.category.moss.on-sidebar |
color.surface.sidebar |
ui | #89d89a on #032624 |
9.45 | 3 | passed | Space icon in the sidebar |
color.category.moss.on-sidebar |
color.surface.sidebar-hover |
ui | #89d89a on #08312e |
8.30 | 3 | passed | Space icon in the sidebar |
color.category.moss.on-sidebar |
color.surface.sidebar-selected |
ui | #89d89a on #063b38 |
7.31 | 3 | passed | Space icon in the sidebar |
color.category.granite.on-sidebar |
color.surface.sidebar |
ui | #ccd9db on #032624 |
11.11 | 3 | passed | Space icon in the sidebar |
color.category.granite.on-sidebar |
color.surface.sidebar-hover |
ui | #ccd9db on #08312e |
9.75 | 3 | passed | Space icon in the sidebar |
color.category.granite.on-sidebar |
color.surface.sidebar-selected |
ui | #ccd9db on #063b38 |
8.59 | 3 | passed | Space icon in the sidebar |
color.category.spruce.fg |
color.surface.canvas |
ui | #7cd5cd on #15282b |
8.94 | 3 | passed | Category dot and icon on content surfaces |
color.category.spruce.fg |
color.surface.list |
ui | #7cd5cd on #102326 |
9.50 | 3 | passed | Category dot and icon on content surfaces |
color.category.spruce.fg |
color.surface.overlay |
ui | #7cd5cd on #24363a |
7.37 | 3 | passed | Category dot and icon on content surfaces |
color.category.loch.fg |
color.surface.canvas |
ui | #8ec9fb on #15282b |
8.68 | 3 | passed | Category dot and icon on content surfaces |
color.category.loch.fg |
color.surface.list |
ui | #8ec9fb on #102326 |
9.22 | 3 | passed | Category dot and icon on content surfaces |
color.category.loch.fg |
color.surface.overlay |
ui | #8ec9fb on #24363a |
7.15 | 3 | passed | Category dot and icon on content surfaces |
color.category.heather.fg |
color.surface.canvas |
ui | #fca3cd on #15282b |
8.22 | 3 | passed | Category dot and icon on content surfaces |
color.category.heather.fg |
color.surface.list |
ui | #fca3cd on #102326 |
8.73 | 3 | passed | Category dot and icon on content surfaces |
color.category.heather.fg |
color.surface.overlay |
ui | #fca3cd on #24363a |
6.77 | 3 | passed | Category dot and icon on content surfaces |
color.category.rowan.fg |
color.surface.canvas |
ui | #fcaaa3 on #15282b |
8.33 | 3 | passed | Category dot and icon on content surfaces |
color.category.rowan.fg |
color.surface.list |
ui | #fcaaa3 on #102326 |
8.85 | 3 | passed | Category dot and icon on content surfaces |
color.category.rowan.fg |
color.surface.overlay |
ui | #fcaaa3 on #24363a |
6.86 | 3 | passed | Category dot and icon on content surfaces |
color.category.amber.fg |
color.surface.canvas |
ui | #fcaf6f on #15282b |
8.39 | 3 | passed | Category dot and icon on content surfaces |
color.category.amber.fg |
color.surface.list |
ui | #fcaf6f on #102326 |
8.91 | 3 | passed | Category dot and icon on content surfaces |
color.category.amber.fg |
color.surface.overlay |
ui | #fcaf6f on #24363a |
6.91 | 3 | passed | Category dot and icon on content surfaces |
color.category.gorse.fg |
color.surface.canvas |
ui | #d9c42b on #15282b |
8.67 | 3 | passed | Category dot and icon on content surfaces |
color.category.gorse.fg |
color.surface.list |
ui | #d9c42b on #102326 |
9.21 | 3 | passed | Category dot and icon on content surfaces |
color.category.gorse.fg |
color.surface.overlay |
ui | #d9c42b on #24363a |
7.14 | 3 | passed | Category dot and icon on content surfaces |
color.category.moss.fg |
color.surface.canvas |
ui | #89d89a on #15282b |
9.01 | 3 | passed | Category dot and icon on content surfaces |
color.category.moss.fg |
color.surface.list |
ui | #89d89a on #102326 |
9.57 | 3 | passed | Category dot and icon on content surfaces |
color.category.moss.fg |
color.surface.overlay |
ui | #89d89a on #24363a |
7.42 | 3 | passed | Category dot and icon on content surfaces |
color.category.granite.fg |
color.surface.canvas |
ui | #afbec0 on #15282b |
7.99 | 3 | passed | Category dot and icon on content surfaces |
color.category.granite.fg |
color.surface.list |
ui | #afbec0 on #102326 |
8.49 | 3 | passed | Category dot and icon on content surfaces |
color.category.granite.fg |
color.surface.overlay |
ui | #afbec0 on #24363a |
6.58 | 3 | passed | Category dot and icon on content surfaces |
color.terminal.fg |
color.terminal.bg |
text | #e5eef0 on #08191c |
15.28 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.red |
color.terminal.bg |
text | #fb827a on #08191c |
7.35 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.green |
color.terminal.bg |
text | #62c37a on #08191c |
8.24 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.yellow |
color.terminal.bg |
text | #d9c42b on #08191c |
10.19 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.blue |
color.terminal.bg |
text | #58b3fa on #08191c |
7.93 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.magenta |
color.terminal.bg |
text | #f878ba on #08191c |
7.19 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.cyan |
color.terminal.bg |
text | #49c0b7 on #08191c |
8.15 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.bright-black |
color.terminal.bg |
text | #748486 on #08191c |
4.62 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.bright-red |
color.terminal.bg |
text | #fcaaa3 on #08191c |
9.79 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.bright-green |
color.terminal.bg |
text | #89d89a on #08191c |
10.59 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.bright-yellow |
color.terminal.bg |
text | #eddc59 on #08191c |
12.85 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.bright-blue |
color.terminal.bg |
text | #8ec9fb on #08191c |
10.20 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.bright-magenta |
color.terminal.bg |
text | #fca3cd on #08191c |
9.66 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.bright-cyan |
color.terminal.bg |
text | #7cd5cd on #08191c |
10.51 | 4.5 | passed | Terminal: default text and text colors |
color.terminal.ansi.black |
color.terminal.bg |
ui | #59696c on #08191c |
3.14 | 3 | passed | Terminal: gray tones at the ends (ANSI 0, 7, 15) and cursor |
color.terminal.ansi.white |
color.terminal.bg |
ui | #afbec0 on #08191c |
9.39 | 3 | passed | Terminal: gray tones at the ends (ANSI 0, 7, 15) and cursor |
color.terminal.ansi.bright-white |
color.terminal.bg |
ui | #eff6f7 on #08191c |
16.46 | 3 | passed | Terminal: gray tones at the ends (ANSI 0, 7, 15) and cursor |
color.terminal.cursor |
color.terminal.bg |
ui | #d9c42b on #08191c |
10.19 | 3 | passed | Terminal: gray tones at the ends (ANSI 0, 7, 15) and cursor |
color.terminal.cursor-text |
color.terminal.cursor |
text | #08191c on #d9c42b |
10.19 | 4.5 | passed | Terminal: character under the block cursor |
color.terminal.fg |
color.terminal.selection-bg |
text | #e5eef0 on #0f4643 |
9.01 | 4.5 | passed | Terminal: selected text |
color.viz.series.1 |
color.surface.canvas |
ui | #58b3fa on #15282b |
6.75 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.1 |
color.surface.list |
ui | #58b3fa on #102326 |
7.16 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.1 |
color.surface.raised |
ui | #58b3fa on #1b2e31 |
6.24 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.2 |
color.surface.canvas |
ui | #ec9340 on #15282b |
6.43 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.2 |
color.surface.list |
ui | #ec9340 on #102326 |
6.83 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.2 |
color.surface.raised |
ui | #ec9340 on #1b2e31 |
5.95 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.3 |
color.surface.canvas |
ui | #7cd5cd on #15282b |
8.94 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.3 |
color.surface.list |
ui | #7cd5cd on #102326 |
9.50 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.3 |
color.surface.raised |
ui | #7cd5cd on #1b2e31 |
8.27 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.4 |
color.surface.canvas |
ui | #f878ba on #15282b |
6.12 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.4 |
color.surface.list |
ui | #f878ba on #102326 |
6.50 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.4 |
color.surface.raised |
ui | #f878ba on #1b2e31 |
5.66 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.5 |
color.surface.canvas |
ui | #d9c42b on #15282b |
8.67 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.5 |
color.surface.list |
ui | #d9c42b on #102326 |
9.21 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.5 |
color.surface.raised |
ui | #d9c42b on #1b2e31 |
8.02 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.6 |
color.surface.canvas |
ui | #62c37a on #15282b |
7.01 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.6 |
color.surface.list |
ui | #62c37a on #102326 |
7.44 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.6 |
color.surface.raised |
ui | #62c37a on #1b2e31 |
6.48 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.7 |
color.surface.canvas |
ui | #f15653 on #15282b |
4.52 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.7 |
color.surface.list |
ui | #f15653 on #102326 |
4.80 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.7 |
color.surface.raised |
ui | #f15653 on #1b2e31 |
4.18 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.8 |
color.surface.canvas |
ui | #8f9fa1 on #15282b |
5.58 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.8 |
color.surface.list |
ui | #8f9fa1 on #102326 |
5.92 | 3 | passed | Charts: series and axes against the surface |
color.viz.series.8 |
color.surface.raised |
ui | #8f9fa1 on #1b2e31 |
5.16 | 3 | passed | Charts: series and axes against the surface |
color.viz.axis |
color.surface.canvas |
ui | #8f9fa1 on #15282b |
5.58 | 3 | passed | Charts: series and axes against the surface |
color.viz.axis |
color.surface.list |
ui | #8f9fa1 on #102326 |
5.92 | 3 | passed | Charts: series and axes against the surface |
color.viz.axis |
color.surface.raised |
ui | #8f9fa1 on #1b2e31 |
5.16 | 3 | passed | Charts: series and axes against the surface |
Accent variants¶
An instance chooses its accent (branding.accent_color, list in accent_variants of
design/design-rules.json). Roles that alias the default scale take the same step of the
chosen scale; a step that fails a pairing moves along the scale until every pairing passes
("moved from"). Roles that alias another scale keep their value ("not swapped"). Per accent
and theme only the pairings that contain a swapped role are listed; all other pairings are
those of the theme sections above.
Accent spruce is the default: its variants are the base roles of the theme sections above.
Accent loch, theme light¶
| Role | Step | Value |
|---|---|---|
color.accent.bg |
loch.700 | #12659d |
color.accent.bg-hover |
loch.800 | #0b4d79 |
color.accent.bg-pressed |
loch.900 | #053656 |
color.accent.fg |
loch.700 | #12659d |
color.accent.subtle |
loch.50 | #eef6fe |
color.text.link |
loch.700 | #12659d |
color.focus.ring |
loch.600 | #197fc3 |
color.run.running |
loch.600 | #197fc3 |
| Foreground | Background | Kind | Values | Ratio | Threshold | Result | Usage |
|---|---|---|---|---|---|---|---|
color.text.primary |
color.accent.subtle (loch.50) |
text | #08191c on #eef6fe |
16.51 | 4.5 | passed | Body text and titles |
color.text.link (loch.700) |
color.surface.canvas |
text | #12659d on #fbfeff |
6.14 | 4.5 | passed | Links, mention pills |
color.text.link (loch.700) |
color.surface.list |
text | #12659d on #eff6f7 |
5.69 | 4.5 | passed | Links, mention pills |
color.text.link (loch.700) |
color.surface.raised |
text | #12659d on #f5fbfc |
5.95 | 4.5 | passed | Links, mention pills |
color.text.link (loch.700) |
color.surface.overlay |
text | #12659d on #fbfeff |
6.14 | 4.5 | passed | Links, mention pills |
color.text.link (loch.700) |
color.surface.sunken |
text | #12659d on #e5eef0 |
5.28 | 4.5 | passed | Links, mention pills |
color.text.link (loch.700) |
color.attention.subtle |
text | #12659d on #fef5aa |
5.59 | 4.5 | passed | Links, mention pills |
color.text.on-accent |
color.accent.bg (loch.700) |
text | #fbfeff on #12659d |
6.14 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-hover (loch.800) |
text | #fbfeff on #0b4d79 |
8.81 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-pressed (loch.900) |
text | #fbfeff on #053656 |
12.42 | 4.5 | passed | Text on the primary button |
color.accent.fg (loch.700) |
color.surface.canvas |
text | #12659d on #fbfeff |
6.14 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (loch.700) |
color.surface.list |
text | #12659d on #eff6f7 |
5.69 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (loch.700) |
color.surface.raised |
text | #12659d on #f5fbfc |
5.95 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (loch.700) |
color.surface.overlay |
text | #12659d on #fbfeff |
6.14 | 4.5 | passed | Accent as text (text buttons) |
color.focus.ring (loch.600) |
color.surface.canvas |
ui | #197fc3 on #fbfeff |
4.26 | 3 | passed | Focus ring |
color.focus.ring (loch.600) |
color.surface.list |
ui | #197fc3 on #eff6f7 |
3.95 | 3 | passed | Focus ring |
color.focus.ring (loch.600) |
color.surface.raised |
ui | #197fc3 on #f5fbfc |
4.13 | 3 | passed | Focus ring |
color.focus.ring (loch.600) |
color.surface.overlay |
ui | #197fc3 on #fbfeff |
4.26 | 3 | passed | Focus ring |
color.focus.ring (loch.600) |
color.surface.input |
ui | #197fc3 on #f5fbfc |
4.13 | 3 | passed | Focus ring |
color.focus.ring (loch.600) |
color.surface.selected |
ui | #197fc3 on #ccf5f0 |
3.68 | 3 | passed | Focus ring |
color.accent.bg (loch.700) |
color.surface.canvas |
ui | #12659d on #fbfeff |
6.14 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (loch.700) |
color.surface.raised |
ui | #12659d on #f5fbfc |
5.95 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (loch.700) |
color.surface.overlay |
ui | #12659d on #fbfeff |
6.14 | 3 | passed | Primary button and approval buttons against the surface |
color.run.running (loch.600) |
color.surface.raised |
ui | #197fc3 on #f5fbfc |
4.13 | 3 | passed | Live box spine and run icons |
color.run.running (loch.600) |
color.surface.canvas |
ui | #197fc3 on #fbfeff |
4.26 | 3 | passed | Live box spine and run icons |
color.run.running (loch.600) |
color.surface.sunken |
ui | #197fc3 on #e5eef0 |
3.66 | 3 | passed | Live box spine and run icons |
color.run.running (loch.600) |
color.surface.list |
ui | #197fc3 on #eff6f7 |
3.95 | 3 | passed | Live box spine and run icons |
Accent loch, theme dark¶
| Role | Step | Value |
|---|---|---|
color.accent.bg |
loch.400 | #58b3fa |
color.accent.bg-hover |
loch.300 | #8ec9fb |
color.accent.bg-pressed |
loch.200 | #bbdefd |
color.accent.fg |
loch.300 | #8ec9fb |
color.accent.subtle |
loch.950 | #02223a |
color.text.link |
loch.300 | #8ec9fb |
color.focus.ring |
gorse.300, not swapped | #d9c42b |
color.run.running |
loch.400 | #58b3fa |
| Foreground | Background | Kind | Values | Ratio | Threshold | Result | Usage |
|---|---|---|---|---|---|---|---|
color.text.primary |
color.accent.subtle (loch.950) |
text | #f5fbfc on #02223a |
15.54 | 4.5 | passed | Body text and titles |
color.text.link (loch.300) |
color.surface.canvas |
text | #8ec9fb on #15282b |
8.68 | 4.5 | passed | Links, mention pills |
color.text.link (loch.300) |
color.surface.list |
text | #8ec9fb on #102326 |
9.22 | 4.5 | passed | Links, mention pills |
color.text.link (loch.300) |
color.surface.raised |
text | #8ec9fb on #1b2e31 |
8.03 | 4.5 | passed | Links, mention pills |
color.text.link (loch.300) |
color.surface.overlay |
text | #8ec9fb on #24363a |
7.15 | 4.5 | passed | Links, mention pills |
color.text.link (loch.300) |
color.surface.sunken |
text | #8ec9fb on #0c1e21 |
9.73 | 4.5 | passed | Links, mention pills |
color.text.link (loch.300) |
color.attention.subtle |
text | #8ec9fb on #291f02 |
9.21 | 4.5 | passed | Links, mention pills |
color.text.on-accent |
color.accent.bg (loch.400) |
text | #041c1a on #58b3fa |
7.79 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-hover (loch.300) |
text | #041c1a on #8ec9fb |
10.03 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-pressed (loch.200) |
text | #041c1a on #bbdefd |
12.63 | 4.5 | passed | Text on the primary button |
color.accent.fg (loch.300) |
color.surface.canvas |
text | #8ec9fb on #15282b |
8.68 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (loch.300) |
color.surface.list |
text | #8ec9fb on #102326 |
9.22 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (loch.300) |
color.surface.raised |
text | #8ec9fb on #1b2e31 |
8.03 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (loch.300) |
color.surface.overlay |
text | #8ec9fb on #24363a |
7.15 | 4.5 | passed | Accent as text (text buttons) |
color.accent.bg (loch.400) |
color.surface.canvas |
ui | #58b3fa on #15282b |
6.75 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (loch.400) |
color.surface.raised |
ui | #58b3fa on #1b2e31 |
6.24 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (loch.400) |
color.surface.overlay |
ui | #58b3fa on #24363a |
5.56 | 3 | passed | Primary button and approval buttons against the surface |
color.run.running (loch.400) |
color.surface.raised |
ui | #58b3fa on #1b2e31 |
6.24 | 3 | passed | Live box spine and run icons |
color.run.running (loch.400) |
color.surface.canvas |
ui | #58b3fa on #15282b |
6.75 | 3 | passed | Live box spine and run icons |
color.run.running (loch.400) |
color.surface.sunken |
ui | #58b3fa on #0c1e21 |
7.56 | 3 | passed | Live box spine and run icons |
color.run.running (loch.400) |
color.surface.list |
ui | #58b3fa on #102326 |
7.16 | 3 | passed | Live box spine and run icons |
Accent heather, theme light¶
| Role | Step | Value |
|---|---|---|
color.accent.bg |
heather.700 | #a51f6f |
color.accent.bg-hover |
heather.800 | #810e55 |
color.accent.bg-pressed |
heather.900 | #5d073c |
color.accent.fg |
heather.700 | #a51f6f |
color.accent.subtle |
heather.50 | #fef1f7 |
color.text.link |
heather.700 | #a51f6f |
color.focus.ring |
heather.600 | #c53a88 |
color.run.running |
heather.600 | #c53a88 |
| Foreground | Background | Kind | Values | Ratio | Threshold | Result | Usage |
|---|---|---|---|---|---|---|---|
color.text.primary |
color.accent.subtle (heather.50) |
text | #08191c on #fef1f7 |
16.41 | 4.5 | passed | Body text and titles |
color.text.link (heather.700) |
color.surface.canvas |
text | #a51f6f on #fbfeff |
6.85 | 4.5 | passed | Links, mention pills |
color.text.link (heather.700) |
color.surface.list |
text | #a51f6f on #eff6f7 |
6.34 | 4.5 | passed | Links, mention pills |
color.text.link (heather.700) |
color.surface.raised |
text | #a51f6f on #f5fbfc |
6.64 | 4.5 | passed | Links, mention pills |
color.text.link (heather.700) |
color.surface.overlay |
text | #a51f6f on #fbfeff |
6.85 | 4.5 | passed | Links, mention pills |
color.text.link (heather.700) |
color.surface.sunken |
text | #a51f6f on #e5eef0 |
5.89 | 4.5 | passed | Links, mention pills |
color.text.link (heather.700) |
color.attention.subtle |
text | #a51f6f on #fef5aa |
6.23 | 4.5 | passed | Links, mention pills |
color.text.on-accent |
color.accent.bg (heather.700) |
text | #fbfeff on #a51f6f |
6.85 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-hover (heather.800) |
text | #fbfeff on #810e55 |
9.74 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-pressed (heather.900) |
text | #fbfeff on #5d073c |
13.27 | 4.5 | passed | Text on the primary button |
color.accent.fg (heather.700) |
color.surface.canvas |
text | #a51f6f on #fbfeff |
6.85 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (heather.700) |
color.surface.list |
text | #a51f6f on #eff6f7 |
6.34 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (heather.700) |
color.surface.raised |
text | #a51f6f on #f5fbfc |
6.64 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (heather.700) |
color.surface.overlay |
text | #a51f6f on #fbfeff |
6.85 | 4.5 | passed | Accent as text (text buttons) |
color.focus.ring (heather.600) |
color.surface.canvas |
ui | #c53a88 on #fbfeff |
4.78 | 3 | passed | Focus ring |
color.focus.ring (heather.600) |
color.surface.list |
ui | #c53a88 on #eff6f7 |
4.43 | 3 | passed | Focus ring |
color.focus.ring (heather.600) |
color.surface.raised |
ui | #c53a88 on #f5fbfc |
4.63 | 3 | passed | Focus ring |
color.focus.ring (heather.600) |
color.surface.overlay |
ui | #c53a88 on #fbfeff |
4.78 | 3 | passed | Focus ring |
color.focus.ring (heather.600) |
color.surface.input |
ui | #c53a88 on #f5fbfc |
4.63 | 3 | passed | Focus ring |
color.focus.ring (heather.600) |
color.surface.selected |
ui | #c53a88 on #ccf5f0 |
4.13 | 3 | passed | Focus ring |
color.accent.bg (heather.700) |
color.surface.canvas |
ui | #a51f6f on #fbfeff |
6.85 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (heather.700) |
color.surface.raised |
ui | #a51f6f on #f5fbfc |
6.64 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (heather.700) |
color.surface.overlay |
ui | #a51f6f on #fbfeff |
6.85 | 3 | passed | Primary button and approval buttons against the surface |
color.run.running (heather.600) |
color.surface.raised |
ui | #c53a88 on #f5fbfc |
4.63 | 3 | passed | Live box spine and run icons |
color.run.running (heather.600) |
color.surface.canvas |
ui | #c53a88 on #fbfeff |
4.78 | 3 | passed | Live box spine and run icons |
color.run.running (heather.600) |
color.surface.sunken |
ui | #c53a88 on #e5eef0 |
4.11 | 3 | passed | Live box spine and run icons |
color.run.running (heather.600) |
color.surface.list |
ui | #c53a88 on #eff6f7 |
4.43 | 3 | passed | Live box spine and run icons |
Accent heather, theme dark¶
| Role | Step | Value |
|---|---|---|
color.accent.bg |
heather.400 | #f878ba |
color.accent.bg-hover |
heather.300 | #fca3cd |
color.accent.bg-pressed |
heather.200 | #fdc8df |
color.accent.fg |
heather.300 | #fca3cd |
color.accent.subtle |
heather.950 | #3e0327 |
color.text.link |
heather.300 | #fca3cd |
color.focus.ring |
gorse.300, not swapped | #d9c42b |
color.run.running |
heather.400 | #f878ba |
| Foreground | Background | Kind | Values | Ratio | Threshold | Result | Usage |
|---|---|---|---|---|---|---|---|
color.text.primary |
color.accent.subtle (heather.950) |
text | #f5fbfc on #3e0327 |
16.11 | 4.5 | passed | Body text and titles |
color.text.link (heather.300) |
color.surface.canvas |
text | #fca3cd on #15282b |
8.22 | 4.5 | passed | Links, mention pills |
color.text.link (heather.300) |
color.surface.list |
text | #fca3cd on #102326 |
8.73 | 4.5 | passed | Links, mention pills |
color.text.link (heather.300) |
color.surface.raised |
text | #fca3cd on #1b2e31 |
7.60 | 4.5 | passed | Links, mention pills |
color.text.link (heather.300) |
color.surface.overlay |
text | #fca3cd on #24363a |
6.77 | 4.5 | passed | Links, mention pills |
color.text.link (heather.300) |
color.surface.sunken |
text | #fca3cd on #0c1e21 |
9.20 | 4.5 | passed | Links, mention pills |
color.text.link (heather.300) |
color.attention.subtle |
text | #fca3cd on #291f02 |
8.72 | 4.5 | passed | Links, mention pills |
color.text.on-accent |
color.accent.bg (heather.400) |
text | #041c1a on #f878ba |
7.07 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-hover (heather.300) |
text | #041c1a on #fca3cd |
9.49 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-pressed (heather.200) |
text | #041c1a on #fdc8df |
12.23 | 4.5 | passed | Text on the primary button |
color.accent.fg (heather.300) |
color.surface.canvas |
text | #fca3cd on #15282b |
8.22 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (heather.300) |
color.surface.list |
text | #fca3cd on #102326 |
8.73 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (heather.300) |
color.surface.raised |
text | #fca3cd on #1b2e31 |
7.60 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (heather.300) |
color.surface.overlay |
text | #fca3cd on #24363a |
6.77 | 4.5 | passed | Accent as text (text buttons) |
color.accent.bg (heather.400) |
color.surface.canvas |
ui | #f878ba on #15282b |
6.12 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (heather.400) |
color.surface.raised |
ui | #f878ba on #1b2e31 |
5.66 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (heather.400) |
color.surface.overlay |
ui | #f878ba on #24363a |
5.04 | 3 | passed | Primary button and approval buttons against the surface |
color.run.running (heather.400) |
color.surface.raised |
ui | #f878ba on #1b2e31 |
5.66 | 3 | passed | Live box spine and run icons |
color.run.running (heather.400) |
color.surface.canvas |
ui | #f878ba on #15282b |
6.12 | 3 | passed | Live box spine and run icons |
color.run.running (heather.400) |
color.surface.sunken |
ui | #f878ba on #0c1e21 |
6.86 | 3 | passed | Live box spine and run icons |
color.run.running (heather.400) |
color.surface.list |
ui | #f878ba on #102326 |
6.50 | 3 | passed | Live box spine and run icons |
Accent rowan, theme light¶
| Role | Step | Value |
|---|---|---|
color.accent.bg |
rowan.700 | #b21622 |
color.accent.bg-hover |
rowan.800 | #890f18 |
color.accent.bg-pressed |
rowan.900 | #63080e |
color.accent.fg |
rowan.700 | #b21622 |
color.accent.subtle |
rowan.50 | #fef2f0 |
color.text.link |
rowan.700 | #b21622 |
color.focus.ring |
rowan.600 | #d43538 |
color.run.running |
rowan.600 | #d43538 |
| Foreground | Background | Kind | Values | Ratio | Threshold | Result | Usage |
|---|---|---|---|---|---|---|---|
color.text.primary |
color.accent.subtle (rowan.50) |
text | #08191c on #fef2f0 |
16.44 | 4.5 | passed | Body text and titles |
color.text.link (rowan.700) |
color.surface.canvas |
text | #b21622 on #fbfeff |
6.84 | 4.5 | passed | Links, mention pills |
color.text.link (rowan.700) |
color.surface.list |
text | #b21622 on #eff6f7 |
6.33 | 4.5 | passed | Links, mention pills |
color.text.link (rowan.700) |
color.surface.raised |
text | #b21622 on #f5fbfc |
6.63 | 4.5 | passed | Links, mention pills |
color.text.link (rowan.700) |
color.surface.overlay |
text | #b21622 on #fbfeff |
6.84 | 4.5 | passed | Links, mention pills |
color.text.link (rowan.700) |
color.surface.sunken |
text | #b21622 on #e5eef0 |
5.88 | 4.5 | passed | Links, mention pills |
color.text.link (rowan.700) |
color.attention.subtle |
text | #b21622 on #fef5aa |
6.22 | 4.5 | passed | Links, mention pills |
color.text.on-accent |
color.accent.bg (rowan.700) |
text | #fbfeff on #b21622 |
6.84 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-hover (rowan.800) |
text | #fbfeff on #890f18 |
9.66 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-pressed (rowan.900) |
text | #fbfeff on #63080e |
13.19 | 4.5 | passed | Text on the primary button |
color.accent.fg (rowan.700) |
color.surface.canvas |
text | #b21622 on #fbfeff |
6.84 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (rowan.700) |
color.surface.list |
text | #b21622 on #eff6f7 |
6.33 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (rowan.700) |
color.surface.raised |
text | #b21622 on #f5fbfc |
6.63 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (rowan.700) |
color.surface.overlay |
text | #b21622 on #fbfeff |
6.84 | 4.5 | passed | Accent as text (text buttons) |
color.focus.ring (rowan.600) |
color.surface.canvas |
ui | #d43538 on #fbfeff |
4.75 | 3 | passed | Focus ring |
color.focus.ring (rowan.600) |
color.surface.list |
ui | #d43538 on #eff6f7 |
4.40 | 3 | passed | Focus ring |
color.focus.ring (rowan.600) |
color.surface.raised |
ui | #d43538 on #f5fbfc |
4.60 | 3 | passed | Focus ring |
color.focus.ring (rowan.600) |
color.surface.overlay |
ui | #d43538 on #fbfeff |
4.75 | 3 | passed | Focus ring |
color.focus.ring (rowan.600) |
color.surface.input |
ui | #d43538 on #f5fbfc |
4.60 | 3 | passed | Focus ring |
color.focus.ring (rowan.600) |
color.surface.selected |
ui | #d43538 on #ccf5f0 |
4.10 | 3 | passed | Focus ring |
color.accent.bg (rowan.700) |
color.surface.canvas |
ui | #b21622 on #fbfeff |
6.84 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (rowan.700) |
color.surface.raised |
ui | #b21622 on #f5fbfc |
6.63 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (rowan.700) |
color.surface.overlay |
ui | #b21622 on #fbfeff |
6.84 | 3 | passed | Primary button and approval buttons against the surface |
color.run.running (rowan.600) |
color.surface.raised |
ui | #d43538 on #f5fbfc |
4.60 | 3 | passed | Live box spine and run icons |
color.run.running (rowan.600) |
color.surface.canvas |
ui | #d43538 on #fbfeff |
4.75 | 3 | passed | Live box spine and run icons |
color.run.running (rowan.600) |
color.surface.sunken |
ui | #d43538 on #e5eef0 |
4.08 | 3 | passed | Live box spine and run icons |
color.run.running (rowan.600) |
color.surface.list |
ui | #d43538 on #eff6f7 |
4.40 | 3 | passed | Live box spine and run icons |
Accent rowan, theme dark¶
| Role | Step | Value |
|---|---|---|
color.accent.bg |
rowan.400 | #fb827a |
color.accent.bg-hover |
rowan.300 | #fcaaa3 |
color.accent.bg-pressed |
rowan.200 | #fdcbc6 |
color.accent.fg |
rowan.300 | #fcaaa3 |
color.accent.subtle |
rowan.950 | #430307 |
color.text.link |
rowan.300 | #fcaaa3 |
color.focus.ring |
gorse.300, not swapped | #d9c42b |
color.run.running |
rowan.400 | #fb827a |
| Foreground | Background | Kind | Values | Ratio | Threshold | Result | Usage |
|---|---|---|---|---|---|---|---|
color.text.primary |
color.accent.subtle (rowan.950) |
text | #f5fbfc on #430307 |
16.01 | 4.5 | passed | Body text and titles |
color.text.link (rowan.300) |
color.surface.canvas |
text | #fcaaa3 on #15282b |
8.33 | 4.5 | passed | Links, mention pills |
color.text.link (rowan.300) |
color.surface.list |
text | #fcaaa3 on #102326 |
8.85 | 4.5 | passed | Links, mention pills |
color.text.link (rowan.300) |
color.surface.raised |
text | #fcaaa3 on #1b2e31 |
7.71 | 4.5 | passed | Links, mention pills |
color.text.link (rowan.300) |
color.surface.overlay |
text | #fcaaa3 on #24363a |
6.86 | 4.5 | passed | Links, mention pills |
color.text.link (rowan.300) |
color.surface.sunken |
text | #fcaaa3 on #0c1e21 |
9.33 | 4.5 | passed | Links, mention pills |
color.text.link (rowan.300) |
color.attention.subtle |
text | #fcaaa3 on #291f02 |
8.84 | 4.5 | passed | Links, mention pills |
color.text.on-accent |
color.accent.bg (rowan.400) |
text | #041c1a on #fb827a |
7.23 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-hover (rowan.300) |
text | #041c1a on #fcaaa3 |
9.63 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-pressed (rowan.200) |
text | #041c1a on #fdcbc6 |
12.25 | 4.5 | passed | Text on the primary button |
color.accent.fg (rowan.300) |
color.surface.canvas |
text | #fcaaa3 on #15282b |
8.33 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (rowan.300) |
color.surface.list |
text | #fcaaa3 on #102326 |
8.85 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (rowan.300) |
color.surface.raised |
text | #fcaaa3 on #1b2e31 |
7.71 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (rowan.300) |
color.surface.overlay |
text | #fcaaa3 on #24363a |
6.86 | 4.5 | passed | Accent as text (text buttons) |
color.accent.bg (rowan.400) |
color.surface.canvas |
ui | #fb827a on #15282b |
6.26 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (rowan.400) |
color.surface.raised |
ui | #fb827a on #1b2e31 |
5.79 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (rowan.400) |
color.surface.overlay |
ui | #fb827a on #24363a |
5.15 | 3 | passed | Primary button and approval buttons against the surface |
color.run.running (rowan.400) |
color.surface.raised |
ui | #fb827a on #1b2e31 |
5.79 | 3 | passed | Live box spine and run icons |
color.run.running (rowan.400) |
color.surface.canvas |
ui | #fb827a on #15282b |
6.26 | 3 | passed | Live box spine and run icons |
color.run.running (rowan.400) |
color.surface.sunken |
ui | #fb827a on #0c1e21 |
7.01 | 3 | passed | Live box spine and run icons |
color.run.running (rowan.400) |
color.surface.list |
ui | #fb827a on #102326 |
6.65 | 3 | passed | Live box spine and run icons |
Accent amber, theme light¶
| Role | Step | Value |
|---|---|---|
color.accent.bg |
amber.700 | #8c4f10 |
color.accent.bg-hover |
amber.800 | #6b3b09 |
color.accent.bg-pressed |
amber.900 | #4c2905 |
color.accent.fg |
amber.700 | #8c4f10 |
color.accent.subtle |
amber.50 | #fef3ea |
color.text.link |
amber.700 | #8c4f10 |
color.focus.ring |
amber.600 | #ae6416 |
color.run.running |
amber.600 | #ae6416 |
| Foreground | Background | Kind | Values | Ratio | Threshold | Result | Usage |
|---|---|---|---|---|---|---|---|
color.text.primary |
color.accent.subtle (amber.50) |
text | #08191c on #fef3ea |
16.48 | 4.5 | passed | Body text and titles |
color.text.link (amber.700) |
color.surface.canvas |
text | #8c4f10 on #fbfeff |
6.39 | 4.5 | passed | Links, mention pills |
color.text.link (amber.700) |
color.surface.list |
text | #8c4f10 on #eff6f7 |
5.92 | 4.5 | passed | Links, mention pills |
color.text.link (amber.700) |
color.surface.raised |
text | #8c4f10 on #f5fbfc |
6.20 | 4.5 | passed | Links, mention pills |
color.text.link (amber.700) |
color.surface.overlay |
text | #8c4f10 on #fbfeff |
6.39 | 4.5 | passed | Links, mention pills |
color.text.link (amber.700) |
color.surface.sunken |
text | #8c4f10 on #e5eef0 |
5.50 | 4.5 | passed | Links, mention pills |
color.text.link (amber.700) |
color.attention.subtle |
text | #8c4f10 on #fef5aa |
5.82 | 4.5 | passed | Links, mention pills |
color.text.on-accent |
color.accent.bg (amber.700) |
text | #fbfeff on #8c4f10 |
6.39 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-hover (amber.800) |
text | #fbfeff on #6b3b09 |
9.19 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-pressed (amber.900) |
text | #fbfeff on #4c2905 |
12.74 | 4.5 | passed | Text on the primary button |
color.accent.fg (amber.700) |
color.surface.canvas |
text | #8c4f10 on #fbfeff |
6.39 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (amber.700) |
color.surface.list |
text | #8c4f10 on #eff6f7 |
5.92 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (amber.700) |
color.surface.raised |
text | #8c4f10 on #f5fbfc |
6.20 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (amber.700) |
color.surface.overlay |
text | #8c4f10 on #fbfeff |
6.39 | 4.5 | passed | Accent as text (text buttons) |
color.focus.ring (amber.600) |
color.surface.canvas |
ui | #ae6416 on #fbfeff |
4.47 | 3 | passed | Focus ring |
color.focus.ring (amber.600) |
color.surface.list |
ui | #ae6416 on #eff6f7 |
4.14 | 3 | passed | Focus ring |
color.focus.ring (amber.600) |
color.surface.raised |
ui | #ae6416 on #f5fbfc |
4.33 | 3 | passed | Focus ring |
color.focus.ring (amber.600) |
color.surface.overlay |
ui | #ae6416 on #fbfeff |
4.47 | 3 | passed | Focus ring |
color.focus.ring (amber.600) |
color.surface.input |
ui | #ae6416 on #f5fbfc |
4.33 | 3 | passed | Focus ring |
color.focus.ring (amber.600) |
color.surface.selected |
ui | #ae6416 on #ccf5f0 |
3.86 | 3 | passed | Focus ring |
color.accent.bg (amber.700) |
color.surface.canvas |
ui | #8c4f10 on #fbfeff |
6.39 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (amber.700) |
color.surface.raised |
ui | #8c4f10 on #f5fbfc |
6.20 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (amber.700) |
color.surface.overlay |
ui | #8c4f10 on #fbfeff |
6.39 | 3 | passed | Primary button and approval buttons against the surface |
color.run.running (amber.600) |
color.surface.raised |
ui | #ae6416 on #f5fbfc |
4.33 | 3 | passed | Live box spine and run icons |
color.run.running (amber.600) |
color.surface.canvas |
ui | #ae6416 on #fbfeff |
4.47 | 3 | passed | Live box spine and run icons |
color.run.running (amber.600) |
color.surface.sunken |
ui | #ae6416 on #e5eef0 |
3.85 | 3 | passed | Live box spine and run icons |
color.run.running (amber.600) |
color.surface.list |
ui | #ae6416 on #eff6f7 |
4.14 | 3 | passed | Live box spine and run icons |
Accent amber, theme dark¶
| Role | Step | Value |
|---|---|---|
color.accent.bg |
amber.400 | #ec9340 |
color.accent.bg-hover |
amber.300 | #fcaf6f |
color.accent.bg-pressed |
amber.200 | #fdcfaa |
color.accent.fg |
amber.300 | #fcaf6f |
color.accent.subtle |
amber.950 | #331902 |
color.text.link |
amber.300 | #fcaf6f |
color.focus.ring |
gorse.300, not swapped | #d9c42b |
color.run.running |
amber.400 | #ec9340 |
| Foreground | Background | Kind | Values | Ratio | Threshold | Result | Usage |
|---|---|---|---|---|---|---|---|
color.text.primary |
color.accent.subtle (amber.950) |
text | #f5fbfc on #331902 |
15.68 | 4.5 | passed | Body text and titles |
color.text.link (amber.300) |
color.surface.canvas |
text | #fcaf6f on #15282b |
8.39 | 4.5 | passed | Links, mention pills |
color.text.link (amber.300) |
color.surface.list |
text | #fcaf6f on #102326 |
8.91 | 4.5 | passed | Links, mention pills |
color.text.link (amber.300) |
color.surface.raised |
text | #fcaf6f on #1b2e31 |
7.76 | 4.5 | passed | Links, mention pills |
color.text.link (amber.300) |
color.surface.overlay |
text | #fcaf6f on #24363a |
6.91 | 4.5 | passed | Links, mention pills |
color.text.link (amber.300) |
color.surface.sunken |
text | #fcaf6f on #0c1e21 |
9.40 | 4.5 | passed | Links, mention pills |
color.text.link (amber.300) |
color.attention.subtle |
text | #fcaf6f on #291f02 |
8.91 | 4.5 | passed | Links, mention pills |
color.text.on-accent |
color.accent.bg (amber.400) |
text | #041c1a on #ec9340 |
7.43 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-hover (amber.300) |
text | #041c1a on #fcaf6f |
9.70 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-pressed (amber.200) |
text | #041c1a on #fdcfaa |
12.38 | 4.5 | passed | Text on the primary button |
color.accent.fg (amber.300) |
color.surface.canvas |
text | #fcaf6f on #15282b |
8.39 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (amber.300) |
color.surface.list |
text | #fcaf6f on #102326 |
8.91 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (amber.300) |
color.surface.raised |
text | #fcaf6f on #1b2e31 |
7.76 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (amber.300) |
color.surface.overlay |
text | #fcaf6f on #24363a |
6.91 | 4.5 | passed | Accent as text (text buttons) |
color.accent.bg (amber.400) |
color.surface.canvas |
ui | #ec9340 on #15282b |
6.43 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (amber.400) |
color.surface.raised |
ui | #ec9340 on #1b2e31 |
5.95 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (amber.400) |
color.surface.overlay |
ui | #ec9340 on #24363a |
5.30 | 3 | passed | Primary button and approval buttons against the surface |
color.run.running (amber.400) |
color.surface.raised |
ui | #ec9340 on #1b2e31 |
5.95 | 3 | passed | Live box spine and run icons |
color.run.running (amber.400) |
color.surface.canvas |
ui | #ec9340 on #15282b |
6.43 | 3 | passed | Live box spine and run icons |
color.run.running (amber.400) |
color.surface.sunken |
ui | #ec9340 on #0c1e21 |
7.21 | 3 | passed | Live box spine and run icons |
color.run.running (amber.400) |
color.surface.list |
ui | #ec9340 on #102326 |
6.83 | 3 | passed | Live box spine and run icons |
Accent gorse, theme light¶
| Role | Step | Value |
|---|---|---|
color.accent.bg |
gorse.700 | #735e10 |
color.accent.bg-hover |
gorse.800 | #59470a |
color.accent.bg-pressed |
gorse.900 | #3f3105 |
color.accent.fg |
gorse.700 | #735e10 |
color.accent.subtle |
gorse.50 | #fef5aa |
color.text.link |
gorse.700 | #735e10 |
color.focus.ring |
gorse.600 | #8d7716 |
color.run.running |
gorse.600 | #8d7716 |
| Foreground | Background | Kind | Values | Ratio | Threshold | Result | Usage |
|---|---|---|---|---|---|---|---|
color.text.primary |
color.accent.subtle (gorse.50) |
text | #08191c on #fef5aa |
16.17 | 4.5 | passed | Body text and titles |
color.text.link (gorse.700) |
color.surface.canvas |
text | #735e10 on #fbfeff |
6.21 | 4.5 | passed | Links, mention pills |
color.text.link (gorse.700) |
color.surface.list |
text | #735e10 on #eff6f7 |
5.75 | 4.5 | passed | Links, mention pills |
color.text.link (gorse.700) |
color.surface.raised |
text | #735e10 on #f5fbfc |
6.02 | 4.5 | passed | Links, mention pills |
color.text.link (gorse.700) |
color.surface.overlay |
text | #735e10 on #fbfeff |
6.21 | 4.5 | passed | Links, mention pills |
color.text.link (gorse.700) |
color.surface.sunken |
text | #735e10 on #e5eef0 |
5.34 | 4.5 | passed | Links, mention pills |
color.text.link (gorse.700) |
color.attention.subtle |
text | #735e10 on #fef5aa |
5.65 | 4.5 | passed | Links, mention pills |
color.text.on-accent |
color.accent.bg (gorse.700) |
text | #fbfeff on #735e10 |
6.21 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-hover (gorse.800) |
text | #fbfeff on #59470a |
8.89 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-pressed (gorse.900) |
text | #fbfeff on #3f3105 |
12.54 | 4.5 | passed | Text on the primary button |
color.accent.fg (gorse.700) |
color.surface.canvas |
text | #735e10 on #fbfeff |
6.21 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (gorse.700) |
color.surface.list |
text | #735e10 on #eff6f7 |
5.75 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (gorse.700) |
color.surface.raised |
text | #735e10 on #f5fbfc |
6.02 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (gorse.700) |
color.surface.overlay |
text | #735e10 on #fbfeff |
6.21 | 4.5 | passed | Accent as text (text buttons) |
color.focus.ring (gorse.600) |
color.surface.canvas |
ui | #8d7716 on #fbfeff |
4.33 | 3 | passed | Focus ring |
color.focus.ring (gorse.600) |
color.surface.list |
ui | #8d7716 on #eff6f7 |
4.01 | 3 | passed | Focus ring |
color.focus.ring (gorse.600) |
color.surface.raised |
ui | #8d7716 on #f5fbfc |
4.20 | 3 | passed | Focus ring |
color.focus.ring (gorse.600) |
color.surface.overlay |
ui | #8d7716 on #fbfeff |
4.33 | 3 | passed | Focus ring |
color.focus.ring (gorse.600) |
color.surface.input |
ui | #8d7716 on #f5fbfc |
4.20 | 3 | passed | Focus ring |
color.focus.ring (gorse.600) |
color.surface.selected |
ui | #8d7716 on #ccf5f0 |
3.74 | 3 | passed | Focus ring |
color.accent.bg (gorse.700) |
color.surface.canvas |
ui | #735e10 on #fbfeff |
6.21 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (gorse.700) |
color.surface.raised |
ui | #735e10 on #f5fbfc |
6.02 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (gorse.700) |
color.surface.overlay |
ui | #735e10 on #fbfeff |
6.21 | 3 | passed | Primary button and approval buttons against the surface |
color.run.running (gorse.600) |
color.surface.raised |
ui | #8d7716 on #f5fbfc |
4.20 | 3 | passed | Live box spine and run icons |
color.run.running (gorse.600) |
color.surface.canvas |
ui | #8d7716 on #fbfeff |
4.33 | 3 | passed | Live box spine and run icons |
color.run.running (gorse.600) |
color.surface.sunken |
ui | #8d7716 on #e5eef0 |
3.73 | 3 | passed | Live box spine and run icons |
color.run.running (gorse.600) |
color.surface.list |
ui | #8d7716 on #eff6f7 |
4.01 | 3 | passed | Live box spine and run icons |
Accent gorse, theme dark¶
| Role | Step | Value |
|---|---|---|
color.accent.bg |
gorse.400 | #c2ab24 |
color.accent.bg-hover |
gorse.300 | #d9c42b |
color.accent.bg-pressed |
gorse.200 | #eddc59 |
color.accent.fg |
gorse.300 | #d9c42b |
color.accent.subtle |
gorse.950 | #291f02 |
color.text.link |
gorse.300 | #d9c42b |
color.focus.ring |
gorse.300, not swapped | #d9c42b |
color.run.running |
gorse.400 | #c2ab24 |
| Foreground | Background | Kind | Values | Ratio | Threshold | Result | Usage |
|---|---|---|---|---|---|---|---|
color.text.primary |
color.accent.subtle (gorse.950) |
text | #f5fbfc on #291f02 |
15.56 | 4.5 | passed | Body text and titles |
color.text.link (gorse.300) |
color.surface.canvas |
text | #d9c42b on #15282b |
8.67 | 4.5 | passed | Links, mention pills |
color.text.link (gorse.300) |
color.surface.list |
text | #d9c42b on #102326 |
9.21 | 4.5 | passed | Links, mention pills |
color.text.link (gorse.300) |
color.surface.raised |
text | #d9c42b on #1b2e31 |
8.02 | 4.5 | passed | Links, mention pills |
color.text.link (gorse.300) |
color.surface.overlay |
text | #d9c42b on #24363a |
7.14 | 4.5 | passed | Links, mention pills |
color.text.link (gorse.300) |
color.surface.sunken |
text | #d9c42b on #0c1e21 |
9.71 | 4.5 | passed | Links, mention pills |
color.text.link (gorse.300) |
color.attention.subtle |
text | #d9c42b on #291f02 |
9.20 | 4.5 | passed | Links, mention pills |
color.text.on-accent |
color.accent.bg (gorse.400) |
text | #041c1a on #c2ab24 |
7.71 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-hover (gorse.300) |
text | #041c1a on #d9c42b |
10.02 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-pressed (gorse.200) |
text | #041c1a on #eddc59 |
12.63 | 4.5 | passed | Text on the primary button |
color.accent.fg (gorse.300) |
color.surface.canvas |
text | #d9c42b on #15282b |
8.67 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (gorse.300) |
color.surface.list |
text | #d9c42b on #102326 |
9.21 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (gorse.300) |
color.surface.raised |
text | #d9c42b on #1b2e31 |
8.02 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (gorse.300) |
color.surface.overlay |
text | #d9c42b on #24363a |
7.14 | 4.5 | passed | Accent as text (text buttons) |
color.accent.bg (gorse.400) |
color.surface.canvas |
ui | #c2ab24 on #15282b |
6.67 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (gorse.400) |
color.surface.raised |
ui | #c2ab24 on #1b2e31 |
6.17 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (gorse.400) |
color.surface.overlay |
ui | #c2ab24 on #24363a |
5.50 | 3 | passed | Primary button and approval buttons against the surface |
color.run.running (gorse.400) |
color.surface.raised |
ui | #c2ab24 on #1b2e31 |
6.17 | 3 | passed | Live box spine and run icons |
color.run.running (gorse.400) |
color.surface.canvas |
ui | #c2ab24 on #15282b |
6.67 | 3 | passed | Live box spine and run icons |
color.run.running (gorse.400) |
color.surface.sunken |
ui | #c2ab24 on #0c1e21 |
7.48 | 3 | passed | Live box spine and run icons |
color.run.running (gorse.400) |
color.surface.list |
ui | #c2ab24 on #102326 |
7.09 | 3 | passed | Live box spine and run icons |
Accent moss, theme light¶
| Role | Step | Value |
|---|---|---|
color.accent.bg |
moss.700 | #137337 |
color.accent.bg-hover |
moss.800 | #0c5828 |
color.accent.bg-pressed |
moss.900 | #063e1a |
color.accent.fg |
moss.700 | #137337 |
color.accent.subtle |
moss.50 | #e4fde8 |
color.text.link |
moss.700 | #137337 |
color.focus.ring |
moss.600 | #1b9046 |
color.run.running |
moss.600 | #1b9046 |
| Foreground | Background | Kind | Values | Ratio | Threshold | Result | Usage |
|---|---|---|---|---|---|---|---|
color.text.primary |
color.accent.subtle (moss.50) |
text | #08191c on #e4fde8 |
16.73 | 4.5 | passed | Body text and titles |
color.text.link (moss.700) |
color.surface.canvas |
text | #137337 on #fbfeff |
5.86 | 4.5 | passed | Links, mention pills |
color.text.link (moss.700) |
color.surface.list |
text | #137337 on #eff6f7 |
5.43 | 4.5 | passed | Links, mention pills |
color.text.link (moss.700) |
color.surface.raised |
text | #137337 on #f5fbfc |
5.68 | 4.5 | passed | Links, mention pills |
color.text.link (moss.700) |
color.surface.overlay |
text | #137337 on #fbfeff |
5.86 | 4.5 | passed | Links, mention pills |
color.text.link (moss.700) |
color.surface.sunken |
text | #137337 on #e5eef0 |
5.04 | 4.5 | passed | Links, mention pills |
color.text.link (moss.700) |
color.attention.subtle |
text | #137337 on #fef5aa |
5.33 | 4.5 | passed | Links, mention pills |
color.text.on-accent |
color.accent.bg (moss.700) |
text | #fbfeff on #137337 |
5.86 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-hover (moss.800) |
text | #fbfeff on #0c5828 |
8.49 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-pressed (moss.900) |
text | #fbfeff on #063e1a |
12.11 | 4.5 | passed | Text on the primary button |
color.accent.fg (moss.700) |
color.surface.canvas |
text | #137337 on #fbfeff |
5.86 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (moss.700) |
color.surface.list |
text | #137337 on #eff6f7 |
5.43 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (moss.700) |
color.surface.raised |
text | #137337 on #f5fbfc |
5.68 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (moss.700) |
color.surface.overlay |
text | #137337 on #fbfeff |
5.86 | 4.5 | passed | Accent as text (text buttons) |
color.focus.ring (moss.600) |
color.surface.canvas |
ui | #1b9046 on #fbfeff |
4.04 | 3 | passed | Focus ring |
color.focus.ring (moss.600) |
color.surface.list |
ui | #1b9046 on #eff6f7 |
3.75 | 3 | passed | Focus ring |
color.focus.ring (moss.600) |
color.surface.raised |
ui | #1b9046 on #f5fbfc |
3.92 | 3 | passed | Focus ring |
color.focus.ring (moss.600) |
color.surface.overlay |
ui | #1b9046 on #fbfeff |
4.04 | 3 | passed | Focus ring |
color.focus.ring (moss.600) |
color.surface.input |
ui | #1b9046 on #f5fbfc |
3.92 | 3 | passed | Focus ring |
color.focus.ring (moss.600) |
color.surface.selected |
ui | #1b9046 on #ccf5f0 |
3.49 | 3 | passed | Focus ring |
color.accent.bg (moss.700) |
color.surface.canvas |
ui | #137337 on #fbfeff |
5.86 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (moss.700) |
color.surface.raised |
ui | #137337 on #f5fbfc |
5.68 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (moss.700) |
color.surface.overlay |
ui | #137337 on #fbfeff |
5.86 | 3 | passed | Primary button and approval buttons against the surface |
color.run.running (moss.600) |
color.surface.raised |
ui | #1b9046 on #f5fbfc |
3.92 | 3 | passed | Live box spine and run icons |
color.run.running (moss.600) |
color.surface.canvas |
ui | #1b9046 on #fbfeff |
4.04 | 3 | passed | Live box spine and run icons |
color.run.running (moss.600) |
color.surface.sunken |
ui | #1b9046 on #e5eef0 |
3.48 | 3 | passed | Live box spine and run icons |
color.run.running (moss.600) |
color.surface.list |
ui | #1b9046 on #eff6f7 |
3.75 | 3 | passed | Live box spine and run icons |
Accent moss, theme dark¶
| Role | Step | Value |
|---|---|---|
color.accent.bg |
moss.400 | #62c37a |
color.accent.bg-hover |
moss.300 | #89d89a |
color.accent.bg-pressed |
moss.200 | #afeaba |
color.accent.fg |
moss.300 | #89d89a |
color.accent.subtle |
moss.950 | #03280f |
color.text.link |
moss.300 | #89d89a |
color.focus.ring |
gorse.300, not swapped | #d9c42b |
color.run.running |
moss.400 | #62c37a |
| Foreground | Background | Kind | Values | Ratio | Threshold | Result | Usage |
|---|---|---|---|---|---|---|---|
color.text.primary |
color.accent.subtle (moss.950) |
text | #f5fbfc on #03280f |
15.28 | 4.5 | passed | Body text and titles |
color.text.link (moss.300) |
color.surface.canvas |
text | #89d89a on #15282b |
9.01 | 4.5 | passed | Links, mention pills |
color.text.link (moss.300) |
color.surface.list |
text | #89d89a on #102326 |
9.57 | 4.5 | passed | Links, mention pills |
color.text.link (moss.300) |
color.surface.raised |
text | #89d89a on #1b2e31 |
8.34 | 4.5 | passed | Links, mention pills |
color.text.link (moss.300) |
color.surface.overlay |
text | #89d89a on #24363a |
7.42 | 4.5 | passed | Links, mention pills |
color.text.link (moss.300) |
color.surface.sunken |
text | #89d89a on #0c1e21 |
10.10 | 4.5 | passed | Links, mention pills |
color.text.link (moss.300) |
color.attention.subtle |
text | #89d89a on #291f02 |
9.57 | 4.5 | passed | Links, mention pills |
color.text.on-accent |
color.accent.bg (moss.400) |
text | #041c1a on #62c37a |
8.10 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-hover (moss.300) |
text | #041c1a on #89d89a |
10.41 | 4.5 | passed | Text on the primary button |
color.text.on-accent |
color.accent.bg-pressed (moss.200) |
text | #041c1a on #afeaba |
12.90 | 4.5 | passed | Text on the primary button |
color.accent.fg (moss.300) |
color.surface.canvas |
text | #89d89a on #15282b |
9.01 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (moss.300) |
color.surface.list |
text | #89d89a on #102326 |
9.57 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (moss.300) |
color.surface.raised |
text | #89d89a on #1b2e31 |
8.34 | 4.5 | passed | Accent as text (text buttons) |
color.accent.fg (moss.300) |
color.surface.overlay |
text | #89d89a on #24363a |
7.42 | 4.5 | passed | Accent as text (text buttons) |
color.accent.bg (moss.400) |
color.surface.canvas |
ui | #62c37a on #15282b |
7.01 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (moss.400) |
color.surface.raised |
ui | #62c37a on #1b2e31 |
6.48 | 3 | passed | Primary button and approval buttons against the surface |
color.accent.bg (moss.400) |
color.surface.overlay |
ui | #62c37a on #24363a |
5.77 | 3 | passed | Primary button and approval buttons against the surface |
color.run.running (moss.400) |
color.surface.raised |
ui | #62c37a on #1b2e31 |
6.48 | 3 | passed | Live box spine and run icons |
color.run.running (moss.400) |
color.surface.canvas |
ui | #62c37a on #15282b |
7.01 | 3 | passed | Live box spine and run icons |
color.run.running (moss.400) |
color.surface.sunken |
ui | #62c37a on #0c1e21 |
7.85 | 3 | passed | Live box spine and run icons |
color.run.running (moss.400) |
color.surface.list |
ui | #62c37a on #102326 |
7.44 | 3 | passed | Live box spine and run icons |
Color vision deficiency¶
Model: Machado, Oliveira and Fernandes 2009, severity 1.0, applied in linear sRGB (IEEE TVCG 15(6), 2009, doi:10.1109/TVCG.2009.113). Each colour is decoded to linear sRGB, multiplied with
the matrix of the deficiency, clipped to [0, 1] and encoded again. Measure: OKLab distance
(delta_e_ok) of the two simulated colours. Minimum cvd_min_delta_e_ok of
design/design-rules.json: 0.05. Source: Just noticeable difference 0.02 of deltaE OK in CSS Color Module Level 4 (https://www.w3.org/TR/css-color-4/#binsearch), the value tokenkit/color.py names; Szafir, Modeling Color Difference for Visualization Design, IEEE TVCG 24(1), 2018, doi:10.1109/TVCG.2017.2744359. Reason: 2.5 times the just noticeable difference: chart marks are small (bars, 10 px legend squares, 2 px lines; components.md section 11), and Szafir 2018 measured that the noticeable difference grows as marks get smaller. The factor is a stated design choice, not a measured value.
The pairs (cvd_pairs): adjacent chart series in their fixed order, series 8 with series 1
because the order wraps, and the three traffic light pairs. A simulation is a model, not a
test with people; series and states always carry a label or an icon with text as well.
Result: 66 rows checked, 0 below the minimum.
| Theme | Deficiency | Role A | Role B | Values | Simulated | delta_e_ok | Minimum | Result | Usage |
|---|---|---|---|---|---|---|---|---|---|
| light | protanopia | color.viz.series.1 |
color.viz.series.2 |
#197fc3 and #ae6416 |
#5e82c6 and #7b6c02 |
0.233 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | protanopia | color.viz.series.2 |
color.viz.series.3 |
#ae6416 and #136f69 |
#7b6c02 and #686869 |
0.110 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | protanopia | color.viz.series.3 |
color.viz.series.4 |
#136f69 and #c53a88 |
#686869 and #4f628a |
0.071 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | protanopia | color.viz.series.4 |
color.viz.series.5 |
#c53a88 and #8d7716 |
#4f628a and #857500 |
0.193 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | protanopia | color.viz.series.5 |
color.viz.series.6 |
#8d7716 and #063e1a |
#857500 and #3e3817 |
0.230 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | protanopia | color.viz.series.6 |
color.viz.series.7 |
#063e1a and #d43538 |
#3e3817 and #655c36 |
0.136 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | protanopia | color.viz.series.7 |
color.viz.series.8 |
#d43538 and #748486 |
#655c36 and #818286 |
0.148 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | protanopia | color.viz.series.8 |
color.viz.series.1 |
#748486 and #197fc3 |
#818286 and #5e82c6 |
0.106 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | deuteranopia | color.viz.series.1 |
color.viz.series.2 |
#197fc3 and #ae6416 |
#4673c2 and #8c7d16 |
0.245 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | deuteranopia | color.viz.series.2 |
color.viz.series.3 |
#ae6416 and #136f69 |
#8c7d16 and #5c5f6a |
0.165 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | deuteranopia | color.viz.series.3 |
color.viz.series.4 |
#136f69 and #c53a88 |
#5c5f6a and #777b85 |
0.094 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | deuteranopia | color.viz.series.4 |
color.viz.series.5 |
#c53a88 and #8d7716 |
#777b85 and #8a7b1d |
0.126 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | deuteranopia | color.viz.series.5 |
color.viz.series.6 |
#8d7716 and #063e1a |
#8a7b1d and #38331d |
0.270 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | deuteranopia | color.viz.series.6 |
color.viz.series.7 |
#063e1a and #d43538 |
#38331d and #8c7e32 |
0.278 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | deuteranopia | color.viz.series.7 |
color.viz.series.8 |
#d43538 and #748486 |
#8c7e32 and #7e8086 |
0.108 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | deuteranopia | color.viz.series.8 |
color.viz.series.1 |
#748486 and #197fc3 |
#7e8086 and #4673c2 |
0.128 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | tritanopia | color.viz.series.1 |
color.viz.series.2 |
#197fc3 and #ae6416 |
#009098 and #bf5356 |
0.240 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | tritanopia | color.viz.series.2 |
color.viz.series.3 |
#ae6416 and #136f69 |
#bf5356 and #00726d |
0.239 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | tritanopia | color.viz.series.3 |
color.viz.series.4 |
#136f69 and #c53a88 |
#00726d and #d3325c |
0.294 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | tritanopia | color.viz.series.4 |
color.viz.series.5 |
#c53a88 and #8d7716 |
#d3325c and #996d65 |
0.143 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | tritanopia | color.viz.series.5 |
color.viz.series.6 |
#8d7716 and #063e1a |
#996d65 and #003d36 |
0.279 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | tritanopia | color.viz.series.6 |
color.viz.series.7 |
#063e1a and #d43538 |
#003d36 and #e90038 |
0.397 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | tritanopia | color.viz.series.7 |
color.viz.series.8 |
#d43538 and #748486 |
#e90038 and #6f8585 |
0.264 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | tritanopia | color.viz.series.8 |
color.viz.series.1 |
#748486 and #197fc3 |
#6f8585 and #009098 |
0.076 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| light | protanopia | color.success.fg |
color.warning.fg |
#137337 and #6b3b09 |
#746832 and #4a4001 |
0.146 | 0.05 | passed | SLO traffic light on the state roles |
| light | protanopia | color.warning.fg |
color.danger.fg |
#6b3b09 and #63080e |
#4a4001 and #27230d |
0.123 | 0.05 | passed | SLO traffic light on the state roles |
| light | protanopia | color.success.fg |
color.danger.fg |
#137337 and #63080e |
#746832 and #27230d |
0.265 | 0.05 | passed | SLO traffic light on the state roles |
| light | deuteranopia | color.success.fg |
color.warning.fg |
#137337 and #6b3b09 |
#69613b and #554b09 |
0.083 | 0.05 | passed | SLO traffic light on the state roles |
| light | deuteranopia | color.warning.fg |
color.danger.fg |
#6b3b09 and #63080e |
#554b09 and #3d360a |
0.083 | 0.05 | passed | SLO traffic light on the state roles |
| light | deuteranopia | color.success.fg |
color.danger.fg |
#137337 and #63080e |
#69613b and #3d360a |
0.159 | 0.05 | passed | SLO traffic light on the state roles |
| light | tritanopia | color.success.fg |
color.warning.fg |
#137337 and #6b3b09 |
#007165 and #763032 |
0.202 | 0.05 | passed | SLO traffic light on the state roles |
| light | tritanopia | color.warning.fg |
color.danger.fg |
#6b3b09 and #63080e |
#763032 and #6e000c |
0.079 | 0.05 | passed | SLO traffic light on the state roles |
| light | tritanopia | color.success.fg |
color.danger.fg |
#137337 and #63080e |
#007165 and #6e000c |
0.269 | 0.05 | passed | SLO traffic light on the state roles |
| dark | protanopia | color.viz.series.1 |
color.viz.series.2 |
#58b3fa and #ec9340 |
#93b5fd and #ae9c36 |
0.246 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | protanopia | color.viz.series.2 |
color.viz.series.3 |
#ec9340 and #7cd5cd |
#ae9c36 and #cccccd |
0.199 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | protanopia | color.viz.series.3 |
color.viz.series.4 |
#7cd5cd and #f878ba |
#cccccd and #8696bc |
0.182 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | protanopia | color.viz.series.4 |
color.viz.series.5 |
#f878ba and #d9c42b |
#8696bc and #d7be00 |
0.257 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | protanopia | color.viz.series.5 |
color.viz.series.6 |
#d9c42b and #62c37a |
#d7be00 and #c4b575 |
0.086 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | protanopia | color.viz.series.6 |
color.viz.series.7 |
#62c37a and #f15653 |
#c4b575 and #807651 |
0.208 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | protanopia | color.viz.series.7 |
color.viz.series.8 |
#f15653 and #8f9fa1 |
#807651 and #9c9da1 |
0.145 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | protanopia | color.viz.series.8 |
color.viz.series.1 |
#8f9fa1 and #58b3fa |
#9c9da1 and #93b5fd |
0.131 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | deuteranopia | color.viz.series.1 |
color.viz.series.2 |
#58b3fa and #ec9340 |
#7da5f9 and #c3b041 |
0.260 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | deuteranopia | color.viz.series.2 |
color.viz.series.3 |
#ec9340 and #7cd5cd |
#c3b041 and #bdc1ce |
0.161 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | deuteranopia | color.viz.series.3 |
color.viz.series.4 |
#7cd5cd and #f878ba |
#bdc1ce and #a9acb7 |
0.067 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | deuteranopia | color.viz.series.4 |
color.viz.series.5 |
#f878ba and #d9c42b |
#a9acb7 and #ddc638 |
0.188 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | deuteranopia | color.viz.series.5 |
color.viz.series.6 |
#d9c42b and #62c37a |
#ddc638 and #b6ac7f |
0.124 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | deuteranopia | color.viz.series.6 |
color.viz.series.7 |
#62c37a and #f15653 |
#b6ac7f and #a6984f |
0.073 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | deuteranopia | color.viz.series.7 |
color.viz.series.8 |
#f15653 and #8f9fa1 |
#a6984f and #999ba1 |
0.106 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | deuteranopia | color.viz.series.8 |
color.viz.series.1 |
#8f9fa1 and #58b3fa |
#999ba1 and #7da5f9 |
0.127 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | tritanopia | color.viz.series.1 |
color.viz.series.2 |
#58b3fa and #ec9340 |
#00c4cc and #ff7f81 |
0.283 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | tritanopia | color.viz.series.2 |
color.viz.series.3 |
#ec9340 and #7cd5cd |
#ff7f81 and #56d9d2 |
0.277 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | tritanopia | color.viz.series.3 |
color.viz.series.4 |
#7cd5cd and #f878ba |
#56d9d2 and #ff7491 |
0.296 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | tritanopia | color.viz.series.4 |
color.viz.series.5 |
#f878ba and #d9c42b |
#ff7491 and #eab5a8 |
0.145 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | tritanopia | color.viz.series.5 |
color.viz.series.6 |
#d9c42b and #62c37a |
#eab5a8 and #4ec0b1 |
0.182 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | tritanopia | color.viz.series.6 |
color.viz.series.7 |
#62c37a and #f15653 |
#4ec0b1 and #ff3157 |
0.350 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | tritanopia | color.viz.series.7 |
color.viz.series.8 |
#f15653 and #8f9fa1 |
#ff3157 and #8aa0a0 |
0.264 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | tritanopia | color.viz.series.8 |
color.viz.series.1 |
#8f9fa1 and #58b3fa |
#8aa0a0 and #00c4cc |
0.116 | 0.05 | passed | Chart series, adjacent in the fixed order; series 8 with series 1 because the order wraps |
| dark | protanopia | color.success.fg |
color.warning.fg |
#89d89a and #fcaf6f |
#d9cc96 and #c6b56a |
0.075 | 0.05 | passed | SLO traffic light on the state roles |
| dark | protanopia | color.warning.fg |
color.danger.fg |
#fcaf6f and #fb827a |
#c6b56a and #9e9679 |
0.115 | 0.05 | passed | SLO traffic light on the state roles |
| dark | protanopia | color.success.fg |
color.danger.fg |
#89d89a and #fb827a |
#d9cc96 and #9e9679 |
0.172 | 0.05 | passed | SLO traffic light on the state roles |
| dark | deuteranopia | color.success.fg |
color.warning.fg |
#89d89a and #fcaf6f |
#cdc39e and #d9c770 |
0.059 | 0.05 | passed | SLO traffic light on the state roles |
| dark | deuteranopia | color.warning.fg |
color.danger.fg |
#fcaf6f and #fb827a |
#d9c770 and #bcaf78 |
0.081 | 0.05 | passed | SLO traffic light on the state roles |
| dark | deuteranopia | color.success.fg |
color.danger.fg |
#89d89a and #fb827a |
#cdc39e and #bcaf78 |
0.068 | 0.05 | passed | SLO traffic light on the state roles |
| dark | tritanopia | color.success.fg |
color.warning.fg |
#89d89a and #fcaf6f |
#7dd5c7 and #ff9fa0 |
0.202 | 0.05 | passed | SLO traffic light on the state roles |
| dark | tritanopia | color.warning.fg |
color.danger.fg |
#fcaf6f and #fb827a |
#ff9fa0 and #ff7081 |
0.099 | 0.05 | passed | SLO traffic light on the state roles |
| dark | tritanopia | color.success.fg |
color.danger.fg |
#89d89a and #fb827a |
#7dd5c7 and #ff7081 |
0.278 | 0.05 | passed | SLO traffic light on the state roles |