Issue Summary

As described on Text Formatting Notation Help - Advanced Formatting, users can specify titleBGColor and bgColor values for panels in Jira's Wiki Style Renderer (descriptions/comments/custom fields). Before the introduction of dark theme, users would need to choose colors that sufficiently contrasted the single text color. However, most background colors provide insufficient contrast with the text color in dark theme.

This violates WGAC Level AA contrast guidelines. This is a product bug, as there's no way to avoid this without an administrative workaround.

Steps to Reproduce

1. Use the "light" or "original" theme.
2. Add a panel in a Wiki Style Renderer text area that specifies titleBGColor and bgColor values with a sufficient contrast ratio.
3. Switch to the "dark" theme.

Expected Results

The text color automatically adjusts to maintain contrast with the specified background color.

Actual Results

The text color fails to provide sufficient contrast, impacting readability.

Workaround

Workaround 1

Force Jira to use the "inverse" text color token in panels specifying background colors when in dark mode. Add the following to your announcement banner (Configuring an announcement banner):

<style>
    html[data-color-mode=dark] .panelHeader[style*="background-color"] *, html[data-color-mode=dark] .panelContent[style*="background-color"] * {
        color: var(--ds-text-inverse, #1d2125);
    }
</style>

Workaround 2

Same as Workaround 1, but automatically calculates a contrasting text color using the "difference" blend mode. Applies antialiasing to improve optical clarity.

<style>
    html[data-color-mode=dark] .panelHeader[style*="background-color"] *, html[data-color-mode=dark] .panelContent[style*="background-color"] * {
        mix-blend-mode: difference;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
</style>