Foundation home
Quick reference
Typography
Color palettes
Color surfaces
Color pairing
Iconography
Spacing and scale
Button - Filled
Accessible color pairing
Accessible color pairing is a key component of our design system, ensuring that all users, including those with visual impairments, can easily read and interact with our digital products. By adhering to contrast ratio standards and thoughtfully selecting color combinations, we create interfaces that are inclusive and user-friendly. Compliance with Accessibility Standards:
Implementing accessible color pairings helps ensure compliance with accessibility guidelines, reducing legal risks and making the product usable by a broader audience.

(WCAG Contrast (Minimum): Understanding SC 1.4.3)
Color pairing secondary success
Lorem ipsum dolor sit amet. Aut excepturi inventore qui voluptatum magnam non blanditiis dolores. Et sequi reprehenderit At quibusdam impedit eos illum voluptatem rem praesentium illum
Background
secondary/secondary

Heading
success/success

Text
success/success
Lorem ipsum dolor sit amet. Aut excepturi inventore qui voluptatum magnam non blanditiis dolores. Et sequi reprehenderit At quibusdam impedit eos illum voluptatem rem praesentium illum
Background
secondary/secondary

Heading
success/success

Text
on-secondary
Color pairing success secondary
Lorem ipsum dolor sit amet. Aut excepturi inventore qui voluptatum magnam non blanditiis dolores. Et sequi reprehenderit At quibusdam impedit eos illum voluptatem rem praesentium illum
Background
success

Heading
secondary

Text
secondary
Color pairing tertiary-fixed-dim on-secondary-container
Lorem ipsum dolor sit amet. Aut excepturi inventore qui voluptatum magnam non blanditiis dolores. Et sequi reprehenderit At quibusdam impedit eos illum voluptatem rem praesentium illum
Background
tertiary-fixed-dim

Heading
on-secondary-container

Text
on-secondary-container
This is .surface-container
These color references are accessible when used on this surface/background
on-surface text: neutral-variant.10
AAA
on-surface-variant text: neutral-variant.30
AAA
primary text: primary.40
AA
secondary text: secondary.40
AAA
tertiary text: tertiary.40
AA
error text: error.40
AA
info text: info.40
AA
neutral-variant text: neutral-variant.40
AA
This is .surface-container-lowest
These color references are accessible when used on this surface/background
on-surface text: neutral-variant.10
AAA
on-surface-variant text: neutral-variant.30
AAA
primary text: primary.40
AA
secondary text: secondary.40
AAA
on-error text: error.40
AA
on-info text: info.40
AA
on-neutral-variant text: neutral-variant.40
AA
This is .surface-container-low
These color references are accessible when used on this surface/background
on-surface text: neutral-variant.10
AAA
on-surface-variant text: neutral-variant.30
AAA
primary text: primary.40
AA
secondary text: secondary.40
AAA
error text: error.40
AA
neutral-variant text: neutral-variant.40
AA
This .surface
These color references are accessible when used on this surface/background
on-surface text: neutral-variant.10
AAA
on-surface-variant text: neutral-variant.30
AAA
primary text: primary.40
AA
secondary text: secondary.40
AAA
on-error text: error.40
AA
on-neutral-variant text: neutral-variant.40
AA
This .surface-container-high
These color references are accessible when used on this surface/background
on-surface text: neutral-variant.10
AAA
on-surface-variant text: neutral-variant.30
AAA
secondary text: secondary.40
AAA
on-neutral-variant text: neutral-variant.40
AA
This is .surface-container-highest
These color references are accessible when used on this surface/background
on-surface text: neutral-variant.10
AAA
on-surface-variant text: neutral-variant.30
AAA
secondary text: secondary.40
AAA
Contact us. If you have any questions or feedback relating to the Core Design System or have suggestions to help our commitment to continuous improvement, please contact:
simon.andrews@joinedup.com
aysha.miskin@beeline.com
CORE DESIGN SYSTEM
Foundations
Made
with