Layout / Theme Debug
47 layouts parsed from global.css
default
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 20.12:1
AAA normal AAA large
Aa
Body text on background 20.12:1
AAA normal AAA large
Aa
Link on background 20.12:1
AAA normal AAA large
Aa
Button text on primary 14.74:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | #fafafa | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MTTAubergine) | set |
| --color-primary-hover | var(--color-MTTAubergine50) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | var(--color-MTTAubergine) | set |
| --color-primary-outline-hover | var(--color-MTTAubergine50) | set |
| --color-outline | var(--color-MTTAubergine50) | set |
| --color-link-decoration | var(--color-TTMMint) | set |
| --color-link-decoration-hover | var(--color-TTMMintHover) | set |
| --color-secondary | var(--color-TTMMint) | set |
| --color-secondary-hover | var(--color-TTMMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-TTMMint) | custom |
MLTGraublau
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 7.28:1
AAA normal AAA large
Aa
Body text on background 7.28:1
AAA normal AAA large
Aa
Link on background 7.28:1
AAA normal AAA large
Aa
Button text on primary 14.08:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (16)
| Variable | Value | Status |
| --color-background | var(--color-MLTGraublau) | set |
| --color-text | var(--color-white) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MLTGoldgelb) | set |
| --color-primary-hover | var(--color-MLTGoldgelbHover) | set |
| --color-text-on-primary | var(--color-MLTSchwarz) | set |
| --color-primary-outline | rgb(255 255 255 / 20%) | set |
| --color-primary-outline-hover | rgb(255 255 255 / 50%) | set |
| --color-outline | var(--color-MLTGoldgelb) | set |
| --color-link-decoration | var(--color-MLTGoldgelb) | set |
| --color-link-decoration-hover | var(--color-MLTGoldgelbHover) | set |
| --color-secondary | var(--color-MLTMint) | set |
| --color-secondary-hover | var(--color-MLTMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
MLTGold
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 5.63:1
AA normal AAA large
Aa
Body text on background 5.63:1
AA normal AAA large
Aa
Link on background 5.63:1
AA normal AAA large
Aa
Button text on primary 14.08:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MLTGold) | set |
| --color-text | var(--color-white) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MLTGoldgelb) | set |
| --color-primary-hover | var(--color-MLTGoldgelbHover) | set |
| --color-text-on-primary | var(--color-MLTSchwarz) | set |
| --color-primary-outline | rgb(255 255 255 / 20%) | set |
| --color-primary-outline-hover | rgb(255 255 255 / 50%) | set |
| --color-outline | var(--color-MLTGoldgelb) | set |
| --color-link-decoration | var(--color-MLTGoldgelb) | set |
| --color-link-decoration-hover | var(--color-MLTGoldgelbHover) | set |
| --color-secondary | var(--color-MLTMint) | set |
| --color-secondary-hover | var(--color-MLTMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-MLTGoldLight) | custom |
MLTSchwarz
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 21:1
AAA normal AAA large
Aa
Body text on background 21:1
AAA normal AAA large
Aa
Link on background 21:1
AAA normal AAA large
Aa
Button text on primary 14.08:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (16)
| Variable | Value | Status |
| --color-background | var(--color-MLTSchwarz) | set |
| --color-text | var(--color-white) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MLTGoldgelb) | set |
| --color-primary-hover | var(--color-MLTGoldgelbHover) | set |
| --color-text-on-primary | var(--color-MLTSchwarz) | set |
| --color-primary-outline | rgb(255 255 255 / 20%) | set |
| --color-primary-outline-hover | rgb(255 255 255 / 50%) | set |
| --color-outline | var(--color-MLTGoldgelb) | set |
| --color-link-decoration | var(--color-MLTGoldgelb) | set |
| --color-link-decoration-hover | var(--color-MLTGoldgelbHover) | set |
| --color-secondary | var(--color-MLTMint) | set |
| --color-secondary-hover | var(--color-MLTMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
MLTZartgrau
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 18.5:1
AAA normal AAA large
Aa
Body text on background 18.5:1
AAA normal AAA large
Aa
Link on background 18.5:1
AAA normal AAA large
Aa
Button text on primary 14.08:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MLTZartgrau) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MLTGoldgelb) | set |
| --color-primary-hover | var(--color-MLTGoldgelbHover) | set |
| --color-text-on-primary | var(--color-MLTSchwarz) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MLTGoldgelb) | set |
| --color-link-decoration | var(--color-MLTGoldgelb) | set |
| --color-link-decoration-hover | var(--color-MLTGoldgelbHover) | set |
| --color-secondary | var(--color-MLTMint) | set |
| --color-secondary-hover | var(--color-MLTMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-MLTBrombeer) | custom |
MLTGoldgelb
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 14.08:1
AAA normal AAA large
Aa
Body text on background 14.08:1
AAA normal AAA large
Aa
Link on background 14.08:1
AAA normal AAA large
Aa
Button text on primary 8.56:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (16)
| Variable | Value | Status |
| --color-background | var(--color-MLTGoldgelb) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MLTBrombeer) | set |
| --color-primary-hover | var(--color-MLTBrombeerHover) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MLTBrombeer) | set |
| --color-link-decoration | var(--color-MLTBrombeer) | set |
| --color-link-decoration-hover | var(--color-MLTBrombeerHover) | set |
| --color-secondary | var(--color-MLTMint) | set |
| --color-secondary-hover | var(--color-MLTMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
MLTBrombeer
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 8.56:1
AAA normal AAA large
Aa
Body text on background 8.56:1
AAA normal AAA large
Aa
Link on background 8.56:1
AAA normal AAA large
Aa
Button text on primary 14.08:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MLTBrombeer) | set |
| --color-text | var(--color-white) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MLTGoldgelb) | set |
| --color-primary-hover | var(--color-MLTGoldgelbHover) | set |
| --color-text-on-primary | var(--color-MLTSchwarz) | set |
| --color-primary-outline | rgb(255 255 255 / 20%) | set |
| --color-primary-outline-hover | rgb(255 255 255 / 50%) | set |
| --color-outline | var(--color-MLTGoldgelb) | set |
| --color-link-decoration | var(--color-MLTGoldgelb) | set |
| --color-link-decoration-hover | var(--color-MLTGoldgelbHover) | set |
| --color-secondary | var(--color-MLTMint) | set |
| --color-secondary-hover | var(--color-MLTMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-MLTMint) | custom |
MLTMint
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 4.67:1
AA normal AAA large
Aa
Body text on background 4.67:1
AA normal AAA large
Aa
Link on background 4.67:1
AA normal AAA large
Aa
Button text on primary 8.56:1
AAA normal AAA large
Aa
Secondary text on secondary 14.08:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MLTMint) | set |
| --color-text | #424a57 | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MLTBrombeer) | set |
| --color-primary-hover | var(--color-MLTBrombeerHover) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MLTBrombeer) | set |
| --color-link-decoration | var(--color-MLTBrombeer) | set |
| --color-link-decoration-hover | var(--color-MLTBrombeerHover) | set |
| --color-secondary | var(--color-MLTGoldgelb) | set |
| --color-secondary-hover | var(--color-MLTGoldgelbHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-MLTMint) | custom |
MLTHintergrundgold
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 18.5:1
AAA normal AAA large
Aa
Body text on background 18.5:1
AAA normal AAA large
Aa
Link on background 18.5:1
AAA normal AAA large
Aa
Button text on primary 8.56:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (16)
| Variable | Value | Status |
| --color-background | var(--color-MLTHintergrundgold) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MLTBrombeer) | set |
| --color-primary-hover | var(--color-MLTBrombeerHover) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MLTBrombeer) | set |
| --color-link-decoration | var(--color-MLTBrombeer) | set |
| --color-link-decoration-hover | var(--color-MLTBrombeerHover) | set |
| --color-secondary | var(--color-MLTMint) | set |
| --color-secondary-hover | var(--color-MLTMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
MLTHintergrundgrau
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 16.11:1
AAA normal AAA large
Aa
Body text on background 16.11:1
AAA normal AAA large
Aa
Link on background 16.11:1
AAA normal AAA large
Aa
Button text on primary 14.08:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (16)
| Variable | Value | Status |
| --color-background | var(--color-MLTHintergrundgrau) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MLTGoldgelb) | set |
| --color-primary-hover | var(--color-MLTGoldgelbHover) | set |
| --color-text-on-primary | var(--color-MLTSchwarz) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MLTBrombeer) | set |
| --color-link-decoration | var(--color-MLTGoldgelb) | set |
| --color-link-decoration-hover | var(--color-MLTGoldgelbHover) | set |
| --color-secondary | var(--color-MLTMint) | set |
| --color-secondary-hover | var(--color-MLTMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
MLTtoBGoldOcker
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
FAIL
Aa
Heading on background 3.22:1
FAIL normal AA large
Aa
Body text on background 3.22:1
FAIL normal AA large
Aa
Link on background 3.22:1
FAIL normal AA large
Aa
Button text on primary 10.11:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (16)
| Variable | Value | Status |
| --color-background | var(--color-MLTtoBGoldOcker) | set |
| --color-text | var(--color-white) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MLTtoBGoldgelb) | set |
| --color-primary-hover | var(--color-MLTGoldgelb) | set |
| --color-text-on-primary | var(--color-MLTSchwarz) | set |
| --color-primary-outline | rgb(255 255 255 / 20%) | set |
| --color-primary-outline-hover | rgb(255 255 255 / 50%) | set |
| --color-outline | var(--color-MLTtoBGoldgelb) | set |
| --color-link-decoration | var(--color-MLTtoBGoldgelb) | set |
| --color-link-decoration-hover | var(--color-MLTGoldgelb) | set |
| --color-secondary | var(--color-MLTMint) | set |
| --color-secondary-hover | var(--color-MLTMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
MLTtoBGraublau
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 7.28:1
AAA normal AAA large
Aa
Body text on background 7.28:1
AAA normal AAA large
Aa
Link on background 7.28:1
AAA normal AAA large
Aa
Button text on primary 10.11:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (16)
| Variable | Value | Status |
| --color-background | var(--color-MLTtoBGraublau) | set |
| --color-text | var(--color-white) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MLTtoBGoldgelb) | set |
| --color-primary-hover | var(--color-MLTGoldgelb) | set |
| --color-text-on-primary | var(--color-MLTSchwarz) | set |
| --color-primary-outline | rgb(255 255 255 / 20%) | set |
| --color-primary-outline-hover | rgb(255 255 255 / 50%) | set |
| --color-outline | var(--color-MLTtoBGoldgelb) | set |
| --color-link-decoration | var(--color-MLTtoBGoldgelb) | set |
| --color-link-decoration-hover | var(--color-MLTGoldgelb) | set |
| --color-secondary | var(--color-MLTMint) | set |
| --color-secondary-hover | var(--color-MLTMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
MLTtoBZartgrau
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 16.22:1
AAA normal AAA large
Aa
Body text on background 16.22:1
AAA normal AAA large
Aa
Link on background 16.22:1
AAA normal AAA large
Aa
Button text on primary 5.67:1
AA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (16)
| Variable | Value | Status |
| --color-background | var(--color-MLTtoBZartgrau) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MLTtoBBrombeer) | set |
| --color-primary-hover | var(--color-MLTBrombeer) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MLTtoBBrombeer) | set |
| --color-link-decoration | var(--color-MLTtoBBrombeer) | set |
| --color-link-decoration-hover | var(--color-MLTBrombeer) | set |
| --color-secondary | var(--color-MLTMint) | set |
| --color-secondary-hover | var(--color-MLTMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
MLTtoBGoldgelb
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 10.11:1
AAA normal AAA large
Aa
Body text on background 10.11:1
AAA normal AAA large
Aa
Link on background 10.11:1
AAA normal AAA large
Aa
Button text on primary 5.67:1
AA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (16)
| Variable | Value | Status |
| --color-background | var(--color-MLTtoBGoldgelb) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MLTtoBBrombeer) | set |
| --color-primary-hover | var(--color-MLTBrombeer) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MLTtoBBrombeer) | set |
| --color-link-decoration | var(--color-MLTtoBBrombeer) | set |
| --color-link-decoration-hover | var(--color-MLTBrombeer) | set |
| --color-secondary | var(--color-MLTMint) | set |
| --color-secondary-hover | var(--color-MLTMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
MLTtoBBrombeer
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 5.67:1
AA normal AAA large
Aa
Body text on background 5.67:1
AA normal AAA large
Aa
Link on background 5.67:1
AA normal AAA large
Aa
Button text on primary 10.11:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (16)
| Variable | Value | Status |
| --color-background | var(--color-MLTtoBBrombeer) | set |
| --color-text | var(--color-white) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MLTtoBGoldgelb) | set |
| --color-primary-hover | var(--color-MLTGoldgelb) | set |
| --color-text-on-primary | var(--color-MLTSchwarz) | set |
| --color-primary-outline | rgb(255 255 255 / 20%) | set |
| --color-primary-outline-hover | rgb(255 255 255 / 50%) | set |
| --color-outline | var(--color-MLTtoBGoldgelb) | set |
| --color-link-decoration | var(--color-MLTtoBGoldgelb) | set |
| --color-link-decoration-hover | var(--color-MLTGoldgelb) | set |
| --color-secondary | var(--color-MLTMint) | set |
| --color-secondary-hover | var(--color-MLTMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
MLTtoBMint
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 8.88:1
AAA normal AAA large
Aa
Body text on background 8.88:1
AAA normal AAA large
Aa
Link on background 8.88:1
AAA normal AAA large
Aa
Button text on primary 5.67:1
AA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (16)
| Variable | Value | Status |
| --color-background | var(--color-MLTtoBMint) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MLTtoBBrombeer) | set |
| --color-primary-hover | var(--color-MLTBrombeer) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MLTtoBBrombeer) | set |
| --color-link-decoration | var(--color-MLTtoBBrombeer) | set |
| --color-link-decoration-hover | var(--color-MLTBrombeer) | set |
| --color-secondary | var(--color-MLTMint) | set |
| --color-secondary-hover | var(--color-MLTMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
MLTtoBHintergrund
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 15.81:1
AAA normal AAA large
Aa
Body text on background 15.81:1
AAA normal AAA large
Aa
Link on background 15.81:1
AAA normal AAA large
Aa
Button text on primary 5.67:1
AA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (16)
| Variable | Value | Status |
| --color-background | var(--color-MLTtoBHintergrund) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MLTtoBBrombeer) | set |
| --color-primary-hover | var(--color-MLTBrombeer) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MLTtoBBrombeer) | set |
| --color-link-decoration | var(--color-MLTtoBBrombeer) | set |
| --color-link-decoration-hover | var(--color-MLTBrombeer) | set |
| --color-secondary | var(--color-MLTMint) | set |
| --color-secondary-hover | var(--color-MLTMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
STTGruen
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 8.03:1
AAA normal AAA large
Aa
Body text on background 8.03:1
AAA normal AAA large
Aa
Link on background 8.03:1
AAA normal AAA large
Aa
Button text on primary 6.15:1
AA normal AAA large
Aa
Secondary text on secondary 14.08:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-STTGruen) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-STTBlau) | set |
| --color-primary-hover | var(--color-STTBlauHover) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-white) | set |
| --color-link-decoration | var(--color-STTSenfgelb) | set |
| --color-link-decoration-hover | var(--color-STTSenfgelbHover) | set |
| --color-secondary | var(--color-STTSenfgelb) | set |
| --color-secondary-hover | var(--color-STTSenfgelbHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-STTSenfgelb) | custom |
STTBlau
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 6.15:1
AA normal AAA large
Aa
Body text on background 6.15:1
AA normal AAA large
Aa
Link on background 6.15:1
AA normal AAA large
Aa
Button text on primary 8.03:1
AAA normal AAA large
Aa
Secondary text on secondary 14.08:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-STTBlau) | set |
| --color-text | var(--color-white) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-STTGruen) | set |
| --color-primary-hover | var(--color-STTGruenHover) | set |
| --color-text-on-primary | var(--color-MLTSchwarz) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-white) | set |
| --color-link-decoration | var(--color-STTSenfgelb) | set |
| --color-link-decoration-hover | var(--color-STTSenfgelbHover) | set |
| --color-secondary | var(--color-STTSenfgelb) | set |
| --color-secondary-hover | var(--color-STTSenfgelbHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-STTSenfgelb) | custom |
STTSenfgelb
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 14.08:1
AAA normal AAA large
Aa
Body text on background 14.08:1
AAA normal AAA large
Aa
Link on background 14.08:1
AAA normal AAA large
Aa
Button text on primary 6.15:1
AA normal AAA large
Aa
Secondary text on secondary 8.03:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-STTSenfgelb) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-STTBlau) | set |
| --color-primary-hover | var(--color-STTBlauHover) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-STTBlau) | set |
| --color-link-decoration | var(--color-STTBlau) | set |
| --color-link-decoration-hover | var(--color-STTBlauHover) | set |
| --color-secondary | var(--color-STTGruen) | set |
| --color-secondary-hover | var(--color-STTGruenHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-STTBlau) | custom |
MWNMGelb
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 15.02:1
AAA normal AAA large
Aa
Body text on background 15.02:1
AAA normal AAA large
Aa
Link on background 15.02:1
AAA normal AAA large
Aa
Button text on primary 8.43:1
AAA normal AAA large
Aa
Secondary text on secondary 4.83:1
AA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MWNMGelb) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MWNMGrau) | set |
| --color-primary-hover | var(--color-MWNMSchwarz) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MWNMGrau) | set |
| --color-link-decoration | var(--color-MWNMSchwarz) | set |
| --color-link-decoration-hover | var(--color-MWNMGrau) | set |
| --color-secondary | var(--color-MWNMRot) | set |
| --color-secondary-hover | var(--color-MWNMWeiss) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-MWNMRot) | custom |
MWNMRot
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 4.83:1
AA normal AAA large
Aa
Body text on background 4.83:1
AA normal AAA large
Aa
Link on background 4.83:1
AA normal AAA large
Aa
Button text on primary 16.3:1
AAA normal AAA large
Aa
Secondary text on secondary 15.02:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MWNMRot) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MWNMSchwarz) | set |
| --color-primary-hover | var(--color-MWNMGrau) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MWNMSchwarz) | set |
| --color-link-decoration | var(--color-MWNMSchwarz) | set |
| --color-link-decoration-hover | var(--color-MWNMGrau) | set |
| --color-secondary | var(--color-MWNMGelb) | set |
| --color-secondary-hover | var(--color-MWNMWeiss) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-STTSenfgelb) | custom |
MWNMSchwarz
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 16.3:1
AAA normal AAA large
Aa
Body text on background 16.3:1
AAA normal AAA large
Aa
Link on background 16.3:1
AAA normal AAA large
Aa
Button text on primary 21:1
AAA normal AAA large
Aa
Secondary text on secondary 15.02:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MWNMSchwarz) | set |
| --color-text | var(--color-white) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MWNMWeiss) | set |
| --color-primary-hover | var(--color-MWNMGelb) | set |
| --color-text-on-primary | var(--color-MLTSchwarz) | set |
| --color-primary-outline | rgb(255 255 255 / 20%) | set |
| --color-primary-outline-hover | rgb(255 255 255 / 50%) | set |
| --color-outline | var(--color-MWNMRot) | set |
| --color-link-decoration | var(--color-MWNMGelb) | set |
| --color-link-decoration-hover | var(--color-MWNMWeiss) | set |
| --color-secondary | var(--color-MWNMGelb) | set |
| --color-secondary-hover | var(--color-MWNMWeiss) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-MWNMRot) | custom |
MWNMGrau
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 8.43:1
AAA normal AAA large
Aa
Body text on background 8.43:1
AAA normal AAA large
Aa
Link on background 8.43:1
AAA normal AAA large
Aa
Button text on primary 21:1
AAA normal AAA large
Aa
Secondary text on secondary 15.02:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MWNMGrau) | set |
| --color-text | var(--color-white) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MWNMWeiss) | set |
| --color-primary-hover | var(--color-MWNMGelb) | set |
| --color-text-on-primary | var(--color-black) | set |
| --color-primary-outline | rgb(255 255 255 / 20%) | set |
| --color-primary-outline-hover | rgb(255 255 255 / 50%) | set |
| --color-outline | var(--color-MWNMSchwarz) | set |
| --color-link-decoration | var(--color-MWNMGelb) | set |
| --color-link-decoration-hover | var(--color-MWNMWeiss) | set |
| --color-secondary | var(--color-MWNMGelb) | set |
| --color-secondary-hover | var(--color-MWNMWeiss) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-MWNMRot) | custom |
MWNMWeiss
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 21:1
AAA normal AAA large
Aa
Body text on background 21:1
AAA normal AAA large
Aa
Link on background 21:1
AAA normal AAA large
Aa
Button text on primary 8.43:1
AAA normal AAA large
Aa
Secondary text on secondary 15.02:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MWNMWeiss) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MWNMGrau) | set |
| --color-primary-hover | var(--color-MWNMSchwarz) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MWNMGrau) | set |
| --color-link-decoration | var(--color-MWNMSchwarz) | set |
| --color-link-decoration-hover | var(--color-MWNMGrau) | set |
| --color-secondary | var(--color-MWNMGelb) | set |
| --color-secondary-hover | var(--color-MWNMWeiss) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-MWNMRot) | custom |
MTTAubergine
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 14.74:1
AAA normal AAA large
Aa
Body text on background 14.74:1
AAA normal AAA large
Aa
Link on background 14.74:1
AAA normal AAA large
Aa
Button text on primary 21:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MTTAubergine) | set |
| --color-text | var(--color-white) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-white) | set |
| --color-primary-hover | var(--color-MTTAubergine20) | set |
| --color-text-on-primary | var(--color-MLTSchwarz) | set |
| --color-primary-outline | rgb(255 255 255 / 20%) | set |
| --color-primary-outline-hover | rgb(255 255 255 / 50%) | set |
| --color-outline | var(--color-white) | set |
| --color-link-decoration | var(--color-MTTAubergine20) | set |
| --color-link-decoration-hover | var(--color-MTTAubergine50) | set |
| --color-secondary | var(--color-TTMMint) | set |
| --color-secondary-hover | var(--color-TTMMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-TTMMint) | custom |
MTTGelbgruen
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 12.99:1
AAA normal AAA large
Aa
Body text on background 12.99:1
AAA normal AAA large
Aa
Link on background 12.99:1
AAA normal AAA large
Aa
Button text on primary 14.74:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MTTGelbgruen) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MTTAubergine) | set |
| --color-primary-hover | var(--color-MTTAubergine50) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MTTAubergine) | set |
| --color-link-decoration | var(--color-MTTAubergine) | set |
| --color-link-decoration-hover | var(--color-MTTAubergine50) | set |
| --color-secondary | var(--color-TTMMint) | set |
| --color-secondary-hover | var(--color-TTMMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-TTMMint) | custom |
MTTMint
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 10.98:1
AAA normal AAA large
Aa
Body text on background 10.98:1
AAA normal AAA large
Aa
Link on background 10.98:1
AAA normal AAA large
Aa
Button text on primary 14.74:1
AAA normal AAA large
Aa
Secondary text on secondary 12.99:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MTTMint) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MTTAubergine) | set |
| --color-primary-hover | var(--color-MTTAubergine50) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MTTAubergine) | set |
| --color-link-decoration | var(--color-MTTAubergine) | set |
| --color-link-decoration-hover | var(--color-MTTAubergine50) | set |
| --color-secondary | var(--color-MTTGelbgruen) | set |
| --color-secondary-hover | var(--color-MTTGelbgruen60) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-MTTAubergine) | custom |
MTTAubergine50
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
FAIL
Aa
Heading on background 4.45:1
FAIL normal AA large
Aa
Body text on background 4.45:1
FAIL normal AA large
Aa
Link on background 4.45:1
FAIL normal AA large
Aa
Button text on primary 14.74:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MTTAubergine50) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MTTAubergine) | set |
| --color-primary-hover | var(--color-MTTAubergine50) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MTTAubergine) | set |
| --color-link-decoration | var(--color-MTTAubergine) | set |
| --color-link-decoration-hover | var(--color-MTTAubergine50) | set |
| --color-secondary | var(--color-TTMMint) | set |
| --color-secondary-hover | var(--color-TTMMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-TTMMint) | custom |
MTTAubergine20
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 10.86:1
AAA normal AAA large
Aa
Body text on background 10.86:1
AAA normal AAA large
Aa
Link on background 10.86:1
AAA normal AAA large
Aa
Button text on primary 14.74:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MTTAubergine20) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MTTAubergine) | set |
| --color-primary-hover | var(--color-MTTAubergine50) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MTTAubergine) | set |
| --color-link-decoration | var(--color-MTTAubergine) | set |
| --color-link-decoration-hover | var(--color-MTTAubergine50) | set |
| --color-secondary | var(--color-TTMMint) | set |
| --color-secondary-hover | var(--color-TTMMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-TTMMint) | custom |
MTTGelbgruen60
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 15.37:1
AAA normal AAA large
Aa
Body text on background 15.37:1
AAA normal AAA large
Aa
Link on background 15.37:1
AAA normal AAA large
Aa
Button text on primary 14.74:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MTTGelbgruen60) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MTTAubergine) | set |
| --color-primary-hover | var(--color-MTTAubergine50) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MTTAubergine) | set |
| --color-link-decoration | var(--color-MTTAubergine) | set |
| --color-link-decoration-hover | var(--color-MTTAubergine50) | set |
| --color-secondary | var(--color-TTMMint) | set |
| --color-secondary-hover | var(--color-TTMMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-TTMMint) | custom |
MTTGelbgruen30
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AAA
Aa
Heading on background 17.72:1
AAA normal AAA large
Aa
Body text on background 17.72:1
AAA normal AAA large
Aa
Link on background 17.72:1
AAA normal AAA large
Aa
Button text on primary 14.74:1
AAA normal AAA large
Aa
Secondary text on secondary 10.98:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MTTGelbgruen30) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-MTTAubergine) | set |
| --color-primary-hover | var(--color-MTTAubergine50) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-MTTAubergine) | set |
| --color-link-decoration | var(--color-MTTAubergine) | set |
| --color-link-decoration-hover | var(--color-MTTAubergine50) | set |
| --color-secondary | var(--color-TTMMint) | set |
| --color-secondary-hover | var(--color-TTMMintHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-TTMMint) | custom |
ZLTGruen
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 9.93:1
AAA normal AAA large
Aa
Body text on background 9.93:1
AAA normal AAA large
Aa
Link on background 9.93:1
AAA normal AAA large
Aa
Button text on primary 4.68:1
AA normal AAA large
Aa
Secondary text on secondary 14.08:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-ZLTGruen) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-ZLTBlau) | set |
| --color-primary-hover | var(--color-ZLTBlauHover) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-white) | set |
| --color-link-decoration | var(--color-ZLTHintergrundBlau) | set |
| --color-link-decoration-hover | var(--color-ZLTBlau) | set |
| --color-secondary | var(--color-ZLTSenfgelb) | set |
| --color-secondary-hover | var(--color-ZLTSenfgelbHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-ZLTSenfgelb) | custom |
ZLTBlau
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 4.68:1
AA normal AAA large
Aa
Body text on background 4.68:1
AA normal AAA large
Aa
Link on background 4.68:1
AA normal AAA large
Aa
Button text on primary 9.93:1
AAA normal AAA large
Aa
Secondary text on secondary 14.08:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-ZLTBlau) | set |
| --color-text | var(--color-white) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-ZLTGruen) | set |
| --color-primary-hover | var(--color-ZLTGruenHover) | set |
| --color-text-on-primary | var(--color-MLTSchwarz) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-white) | set |
| --color-link-decoration | var(--color-ZLTHintergrundGruen) | set |
| --color-link-decoration-hover | var(--color-ZLTGruen) | set |
| --color-secondary | var(--color-ZLTSenfgelb) | set |
| --color-secondary-hover | var(--color-ZLTSenfgelbHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-ZLTSenfgelb) | custom |
ZLTHintergrundBlau
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 17.3:1
AAA normal AAA large
Aa
Body text on background 17.3:1
AAA normal AAA large
Aa
Link on background 17.3:1
AAA normal AAA large
Aa
Button text on primary 4.68:1
AA normal AAA large
Aa
Secondary text on secondary 14.08:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-ZLTHintergrundBlau) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-ZLTBlau) | set |
| --color-primary-hover | var(--color-ZLTBlauHover) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-ZLTBlau) | set |
| --color-link-decoration | var(--color-ZLTBlau) | set |
| --color-link-decoration-hover | var(--color-MTTAubergine50) | set |
| --color-secondary | var(--color-ZLTSenfgelb) | set |
| --color-secondary-hover | var(--color-ZLTSenfgelbHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-ZLTBlau) | custom |
ZLTHintergrundGruen
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 19.04:1
AAA normal AAA large
Aa
Body text on background 19.04:1
AAA normal AAA large
Aa
Link on background 19.04:1
AAA normal AAA large
Aa
Button text on primary 4.68:1
AA normal AAA large
Aa
Secondary text on secondary 14.08:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-ZLTHintergrundGruen) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-ZLTBlau) | set |
| --color-primary-hover | var(--color-ZLTBlauHover) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-ZLTGruen) | set |
| --color-link-decoration | var(--color-ZLTBlau) | set |
| --color-link-decoration-hover | var(--color-MTTAubergine50) | set |
| --color-secondary | var(--color-ZLTSenfgelb) | set |
| --color-secondary-hover | var(--color-ZLTSenfgelbHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-ZLTBlau) | custom |
ZLTHintergrundRot
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 15.96:1
AAA normal AAA large
Aa
Body text on background 15.96:1
AAA normal AAA large
Aa
Link on background 15.96:1
AAA normal AAA large
Aa
Button text on primary 4.68:1
AA normal AAA large
Aa
Secondary text on secondary 14.08:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-ZLTHintergrundRot) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-ZLTBlau) | set |
| --color-primary-hover | var(--color-ZLTBlauHover) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | rgb(0 0 0 / 20%) | set |
| --color-link-decoration | var(--color-ZLTBlau) | set |
| --color-link-decoration-hover | var(--color-MTTAubergine50) | set |
| --color-secondary | var(--color-ZLTSenfgelb) | set |
| --color-secondary-hover | var(--color-ZLTSenfgelbHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-ZLTBlau) | custom |
ZLTSenfgelb
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 14.08:1
AAA normal AAA large
Aa
Body text on background 14.08:1
AAA normal AAA large
Aa
Link on background 14.08:1
AAA normal AAA large
Aa
Button text on primary 4.68:1
AA normal AAA large
Aa
Secondary text on secondary 9.93:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-ZLTSenfgelb) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-ZLTBlau) | set |
| --color-primary-hover | var(--color-ZLTBlauHover) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | rgb(0 0 0 / 20%) | set |
| --color-link-decoration | var(--color-ZLTBlau) | set |
| --color-link-decoration-hover | var(--color-MTTAubergine50) | set |
| --color-secondary | var(--color-ZLTGruen) | set |
| --color-secondary-hover | var(--color-ZLTGruenHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-ZLTBlau) | custom |
TTMPurpurNigra
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 16.11:1
AAA normal AAA large
Aa
Body text on background 16.11:1
AAA normal AAA large
Aa
Link on background 16.11:1
AAA normal AAA large
Aa
Button text on primary 4.96:1
AA normal AAA large
Aa
Secondary text on secondary 15.05:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-TTMPurpurNigra) | set |
| --color-text | var(--color-white) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-TTMPetrusRot) | set |
| --color-primary-hover | var(--color-TTMPetrusRotHover) | set |
| --color-text-on-primary | var(--color-MLTSchwarz) | set |
| --color-primary-outline | rgb(255 255 255 / 20%) | set |
| --color-primary-outline-hover | rgb(255 255 255 / 50%) | set |
| --color-outline | var(--color-TTMPurpurNigraHover) | set |
| --color-link-decoration | var(--color-TTMSafranGelb) | set |
| --color-link-decoration-hover | var(--color-TTMSafranGelb) | set |
| --color-secondary | var(--color-TTMSafranGelb) | set |
| --color-secondary-hover | var(--color-TTMSafranGelbHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-TTMSafranGelb) | custom |
TTMPetrusRot
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 4.96:1
AA normal AAA large
Aa
Body text on background 4.96:1
AA normal AAA large
Aa
Link on background 4.96:1
AA normal AAA large
Aa
Button text on primary 16.11:1
AAA normal AAA large
Aa
Secondary text on secondary 15.05:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-TTMPetrusRot) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-TTMPurpurNigra) | set |
| --color-primary-hover | var(--color-TTMPurpurNigraHover) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-TTMPetrusRot) | set |
| --color-link-decoration | var(--color-TTMPetrusRot) | set |
| --color-link-decoration-hover | var(--color-TTMPetrusRotHover) | set |
| --color-secondary | var(--color-TTMSafranGelb) | set |
| --color-secondary-hover | var(--color-TTMSafranGelbHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-TTMSafranGelb) | custom |
TTMSafranGelb
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 15.05:1
AAA normal AAA large
Aa
Body text on background 15.05:1
AAA normal AAA large
Aa
Link on background 15.05:1
AAA normal AAA large
Aa
Button text on primary 16.11:1
AAA normal AAA large
Aa
Secondary text on secondary 4.96:1
AA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-TTMSafranGelb) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-TTMPurpurNigra) | set |
| --color-primary-hover | var(--color-TTMPurpurNigraHover) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-TTMSafranGelb) | set |
| --color-link-decoration | var(--color-TTMSafranGelb) | set |
| --color-link-decoration-hover | var(--color-TTMSafranGelbHover) | set |
| --color-secondary | var(--color-TTMPetrusRot) | set |
| --color-secondary-hover | var(--color-TTMPetrusRotHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-TTMSafranGelb) | custom |
TTMDunkeltuerkis
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 6.74:1
AA normal AAA large
Aa
Body text on background 6.74:1
AA normal AAA large
Aa
Link on background 6.74:1
AA normal AAA large
Aa
Button text on primary 4.96:1
AA normal AAA large
Aa
Secondary text on secondary 15.05:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-TTMDunkeltuerkis) | set |
| --color-text | var(--color-black) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-TTMPetrusRot) | set |
| --color-primary-hover | var(--color-TTMPetrusRotHover) | set |
| --color-text-on-primary | var(--color-MLTSchwarz) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-TTMPurpurNigraHover) | set |
| --color-link-decoration | var(--color-TTMSafranGelb) | set |
| --color-link-decoration-hover | var(--color-TTMSafranGelb) | set |
| --color-secondary | var(--color-TTMSafranGelb) | set |
| --color-secondary-hover | var(--color-TTMSafranGelbHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-TTMSafranGelb) | custom |
TTMGoldbraun
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 8.03:1
AAA normal AAA large
Aa
Body text on background 8.03:1
AAA normal AAA large
Aa
Link on background 8.03:1
AAA normal AAA large
Aa
Button text on primary 4.96:1
AA normal AAA large
Aa
Secondary text on secondary 15.05:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-TTMGoldbraun) | set |
| --color-text | var(--color-black) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-TTMPetrusRot) | set |
| --color-primary-hover | var(--color-TTMPetrusRotHover) | set |
| --color-text-on-primary | var(--color-MLTSchwarz) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-TTMPurpurNigraHover) | set |
| --color-link-decoration | var(--color-TTMSafranGelb) | set |
| --color-link-decoration-hover | var(--color-TTMSafranGelb) | set |
| --color-secondary | var(--color-TTMSafranGelb) | set |
| --color-secondary-hover | var(--color-TTMSafranGelbHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-TTMSafranGelb) | custom |
TTMDunkelblau
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 11.57:1
AAA normal AAA large
Aa
Body text on background 11.57:1
AAA normal AAA large
Aa
Link on background 11.57:1
AAA normal AAA large
Aa
Button text on primary 4.96:1
AA normal AAA large
Aa
Secondary text on secondary 15.05:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-TTMDunkelblau) | set |
| --color-text | var(--color-white) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-TTMPetrusRot) | set |
| --color-primary-hover | var(--color-TTMPetrusRotHover) | set |
| --color-text-on-primary | var(--color-MLTSchwarz) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-TTMPurpurNigraHover) | set |
| --color-link-decoration | var(--color-TTMSafranGelb) | set |
| --color-link-decoration-hover | var(--color-TTMSafranGelb) | set |
| --color-secondary | var(--color-TTMSafranGelb) | set |
| --color-secondary-hover | var(--color-TTMSafranGelbHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-TTMSafranGelb) | custom |
TTMGrau
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 13.08:1
AAA normal AAA large
Aa
Body text on background 13.08:1
AAA normal AAA large
Aa
Link on background 13.08:1
AAA normal AAA large
Aa
Button text on primary 16.11:1
AAA normal AAA large
Aa
Secondary text on secondary 4.96:1
AA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MLTRahmengrau) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-TTMPurpurNigra) | set |
| --color-primary-hover | var(--color-TTMPurpurNigraHover) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-TTMSafranGelb) | set |
| --color-link-decoration | var(--color-TTMSafranGelb) | set |
| --color-link-decoration-hover | var(--color-TTMSafranGelbHover) | set |
| --color-secondary | var(--color-TTMPetrusRot) | set |
| --color-secondary-hover | var(--color-TTMPetrusRotHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-TTMSafranGelb) | custom |
ZLTGrau
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 13.08:1
AAA normal AAA large
Aa
Body text on background 13.08:1
AAA normal AAA large
Aa
Link on background 13.08:1
AAA normal AAA large
Aa
Button text on primary 4.68:1
AA normal AAA large
Aa
Secondary text on secondary 14.08:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MLTRahmengrau) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-ZLTBlau) | set |
| --color-primary-hover | var(--color-ZLTBlauHover) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-ZLTBlau) | set |
| --color-link-decoration | var(--color-ZLTBlau) | set |
| --color-link-decoration-hover | var(--color-MTTAubergine50) | set |
| --color-secondary | var(--color-ZLTSenfgelb) | set |
| --color-secondary-hover | var(--color-ZLTSenfgelbHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-ZLTBlau) | custom |
STTGrau
Heading
Body text Link text Button Outlined Secondary
Contrast Ratios (WCAG 2.2)
AA
Aa
Heading on background 13.08:1
AAA normal AAA large
Aa
Body text on background 13.08:1
AAA normal AAA large
Aa
Link on background 13.08:1
AAA normal AAA large
Aa
Button text on primary 6.15:1
AA normal AAA large
Aa
Secondary text on secondary 8.03:1
AAA normal AAA large
Show tokens (17)
| Variable | Value | Status |
| --color-background | var(--color-MLTRahmengrau) | set |
| --color-text | var(--color-MLTSchwarz) | set |
| --color-heading | inherit (-> --color-text) | default |
| --color-link | inherit (-> --color-text) | default |
| --color-link-hover | inherit (-> --color-text) | default |
| --color-primary | var(--color-STTBlau) | set |
| --color-primary-hover | var(--color-STTBlauHover) | set |
| --color-text-on-primary | var(--color-white) | set |
| --color-primary-outline | rgb(0 0 0 / 20%) | set |
| --color-primary-outline-hover | rgb(0 0 0 / 50%) | set |
| --color-outline | var(--color-STTBlau) | set |
| --color-link-decoration | var(--color-STTBlau) | set |
| --color-link-decoration-hover | var(--color-STTBlauHover) | set |
| --color-secondary | var(--color-STTGruen) | set |
| --color-secondary-hover | var(--color-STTGruenHover) | set |
| --color-text-on-secondary | var(--color-MLTSchwarz) | set |
| --color-layout-icon-accent | var(--color-STTBlau) | custom |