Accessibility and quick-start template

Custom CSS can significantly affect the portal's usability for people with visual impairments. Color choice is the most common point of failure. A color combination that looks fine to one person may be unreadable for another. Treat accessibility as a requirement, not an afterthought.

Contrast ratios

Web Content Accessibility Guidelines (WCAG) 2.1 Level AA, the minimum standard for most regulated and public-facing environments, requires:

Whenever you change foreground or background colors, on .sp-topbar, .sp-product-tile, .sp-sidenav-item-bg, or any other component, verify the foreground and background pair meets these ratios for both light and dark mode.

Useful tools:

Components to pay particular attention to

Do not rely on color alone

Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Do not use color as the only means of distinguishing active from inactive states, errors from success, or any other meaningful difference. Pair color changes with sufficient lightness contrast, not just hue changes, so distinctions remain visible to users with color vision deficiency. Browser extensions such as Colorblinding or Sim Daltonism let you preview the portal under different color vision deficiencies without leaving the browser.

Opacity and alpha values

Using rgba() with low alpha, for example, rgba(255, 255, 255, 0.6), reduces effective contrast. The quick-start template deliberately uses subdued variants like rgba(255, 255, 255, 0.8). Verify these against their actual rendered backgrounds and increase opacity if they fall below 4.5:1.

Preserve focus indicators

Do not set outline: none or outline: 0 on focusable elements. Focus indicators are required for keyboard-only and switch-access users. If the browser default ring clashes with your brand, replace it with a visible custom ring rather than hiding it:

/* Replace, do not remove */
.sp-sidenav-item-bg:focus-visible { outline: 2px solid #c4d700; outline-offset: 2px; }

outline is an allowed property. Use it to enhance focus styles, never to suppress them.

Dark mode contrast

A color pair that passes in light mode may fail in dark mode, because background lightness changes. Always check both modes. A quick workflow: open the Preview, toggle dark mode in the profile menu, and re-run the Lighthouse or axe accessibility audit.

/* Replace hex values with your brand colors */

/* PALETTE */
/* Define tokens on each section that needs them. */
/* Custom properties only cascade to descendants: a var() */
/* defined on .sp-topbar will not resolve inside .sp-sidenav. */
/* Redefine tokens on each root selector that references them. */
.sp-topbar {
  --brand-primary: #004831;
  --brand-accent: #c4d700;
  --brand-text: #ffffff;
}
.sp-hero {
  --brand-primary: #004831;
  --brand-accent: #c4d700;
  --brand-text: #ffffff;
}
.sp-sidenav {
  --brand-primary: #004831;
}

/* TOP BAR */
.sp-topbar { background-color: var(--brand-primary); color: var(--brand-text); }
.dark .sp-topbar { background-color: #YOUR_PRIMARY_DARK; }
.sp-topbar-logo { color: var(--brand-text); }
.sp-accent-divider { --sp-accent-divider-color: var(--brand-accent); }

/* HERO */
.sp-hero {
  background-color: #YOUR_PRIMARY;
  color: #ffffff;
  --tw-prose-body: rgba(255, 255, 255, 0.9);
  --tw-prose-headings: #ffffff;
  --tw-prose-links: rgba(255, 255, 255, 0.8);
}
.dark .sp-hero { background-color: #YOUR_PRIMARY_DARK; }

/* PRODUCT TILES */
.sp-product-tile { background-color: #YOUR_PRIMARY; color: #ffffff; border-radius: 0; }
.dark .sp-product-tile { background-color: #YOUR_PRIMARY_DARK; }
.sp-product-tile-accent { --sp-product-tile-accent-color: #YOUR_ACCENT; }
.sp-product-tile-title { color: #ffffff; }
.sp-product-tile-description { color: rgba(255, 255, 255, 0.8); }

/* SIDE NAV */
.sp-sidenav { background-color: #ffffff; }
.dark .sp-sidenav { background-color: #YOUR_DARK_BG; }
.sp-sidenav-item-bg div { color: #YOUR_NAV_TEXT; }
.sp-sidenav-item--active .sp-sidenav-item-bg div { color: #YOUR_PRIMARY; }
.dark .sp-sidenav-item-bg div { color: #YOUR_NAV_TEXT_DARK; }

/* FOOTER */
.sp-footer { background-color: #YOUR_FOOTER_BG; }
.dark .sp-footer { background-color: #YOUR_FOOTER_BG_DARK; }
.sp-footer-border { border-top-color: #YOUR_PRIMARY; }
.dark .sp-footer-border { border-top-color: #YOUR_PRIMARY_DARK; }
.sp-footer-text { color: #YOUR_FOOTER_TEXT; }
.dark .sp-footer-text { color: #YOUR_FOOTER_TEXT_DARK; }
.sp-footer-links a { color: #YOUR_LINK; }
.dark .sp-footer-links a { color: #YOUR_LINK_DARK; }