Theme color picker contrast validation missing WCAG AA enforcement

Direct answer

Start with a dismissible, non-blocking WCAG AA warning when a theme color save would fall below 4.5:1 for normal text or 3:1 for large text and UI components. Offer hard-blocking only as an opt-in guardrail, not as default behavior, because a hard block can stop publishable brand palettes and legitimate accessible exceptions. Control bypass and configuration with a dedicated Administration ACL permission, assigned to administrator roles and scoped per sales channel, rather than reusing the general theme-edit permission.

Confirmed facts versus likely explanation

Confirmed facts

• WCAG AA requires at least 4.5:1 contrast for normal text and 3:1 for large text and UI components.
• Contrast is computed from relative luminance of foreground and background sRGB colors; a valid hex or RGB value is not automatically accessible.
• A client-side check can improve authoring feedback but cannot be a genuine gate; server-side validation of the saved theme payload is required for enforcement.
• One picker color cannot prove compliance without knowing the paired background and element context.

Likely explanation and assumptions

The Shopware 6 Administration theme save path likely accepts any valid color without contrast enforcement, but this is version- and plugin-dependent. I am assuming a standard Shopware 6.x Administration with default theme settings and no installed accessibility plugin. Custom theme plugins or newer minor versions may already alter this behavior.

Steps for this case

1. Verify current behavior on the target installation: save a known borderline pair, such as normal-text color #777777 on background #FFFFFF, and observe whether the save is accepted, warned, or blocked.
2. Add a client-side contrast calculator to the theme color picker that compares the selected foreground against its configured background and shows a dismissible warning below 4.5:1 or 3:1 as appropriate.
3. Implement server-side validation in the theme save handler so the same ratio check runs before the payload is persisted.
4. Create a dedicated Administration ACL permission for theme accessibility contrast validation, assign it to administrator roles, and scope bypass or configuration options per sales channel.
5. Expose an opt-in setting to convert the warning into a hard block, gated by that ACL permission.

function contrastRatio(hexA, hexB) {
  const luminance = (hex) => {
    const rgb = hex.slice(1).match(/.{2}/g).map((x) => parseInt(x, 16) / 255);
    const linear = rgb.map((c) => (c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)));
    return 0.2126 * linear[0] + 0.7152 * linear[1] + 0.0722 * linear[2];
  };
  const L1 = luminance(hexA);
  const L2 = luminance(hexB);
  const lighter = Math.max(L1, L2);
  const darker = Math.min(L1, L2);
  return (lighter + 0.05) / (darker + 0.05);
}
// Example: #777777 on #FFFFFF returns approximately 4.47:1, below WCAG AA normal-text threshold.

Missing diagnostic detail

Provide the installed Shopware 6 minor version and list any active theme or Administration plugins. This determines where the save handler lives and whether hard-block behavior is already overridden by custom code.