These are the docs for the latest stable release of the Bolt Design System. Looking for the previous release, v2.23.0?

Accessibility

As the creator of products that sell into diverse industries, including government, the need for inclusive and accessible experiences is paramount. Paying attention to universal design principles in our design process sends an important message to our potential customers and partners that we comply with regulations.

To put this issue in perspective, statistics show:

Built-in Inclusivity

Using Bolt's re-usable components to improve accessibility and consistency when building Pega Digital Experiences.

  • Accessible markup is already included in the code.
  • Since the code exists in a single component that gets reused, it’s easier to update and fix bugs

Color contrast | WCAG AA standards

All type/color combinations in Bolt must pass WCAG AA standards of 4.5:1 for normal text and 3:1 for large text. For larger text, if the font weight is light (300) or normal (400) the text should be no smaller than 24px. If the font weight is Semi-Bold (600) then the large text should be no smaller than 19px.

Do

Minimal contrast ratio: 4.5

1.0 White on Indigo 1.1 Indigo on Yellow
1.0 White on Indigo 1.1 Indigo on Yellow
1.2 Indigo on Gray 1.3 Dark on White
1.2 Indigo on Gray 1.3 Dark on White

Don’t

WCAG Fail

2.0 White on Teal 2.1 White on Yellow
2.0 White on Teal 2.1 White on Yellow
2.2 Dark on Gray 2.3 White on Dark
2.2 Dark on Gray 2.3 White on Dark
Debug Panel