## Summary This is the follow-up of #3586639. MR !358 puts each status badge on an opaque base, so a hovered or striped row can no longer change its contrast. That fixes **Unavailable** on hover. It does not fix the badges that use the danger color pair. Their text color is too light for their fill, also when nothing is behind them. The danger pair is `#cc3d3d` text on `rgba(222, 117, 96, 0.15)`. On the white base from !358 the fill becomes `#faeae7`, and the ratio is **4.19:1**. The badge text is 12px (weight 575 on the listings, 525 on the item page). That is not large text, so WCAG 2.2 SC 1.4.3 Contrast (Minimum), Level AA, requires 4.5:1. The badges fail at rest. No hover is necessary. | Page | Path | Badge | Light mode | |---|---|---|---| | Scope settings | `/admin/config/ai/context/settings/scope` | Disabled | 4.19:1 fail | | Consumer types | `/admin/config/ai/context/settings/consumer-types` | Disabled | 4.19:1 fail | | Consumers | `/admin/config/ai/context/settings/consumers` | Automatic push "Off" | 4.19:1 fail | | Context item listing | `/admin/config/ai/context/items` | Unpublished (items that are not moderated) | 4.19:1 fail | | Context item page | `/admin/config/ai/context/items/{id}` | Unpublished, Archived, custom moderation states | 4.19:1 fail | Dark mode passes. Gin's dark danger text, `#e69e9e`, is 5.37:1 on the same fill over `#2a2a2d`. Archived does not look the same on the two item screens. The listing shows it with the neutral pair (`#626262` on `#eee`, 5.26:1). The item page shows it with the danger pair (4.19:1). ### Who owns the color - **Gin:** Gin sets `--gin-status-danger-text: #cc3d3d` and `--gin-status-danger-bg: rgba(222, 117, 96, .15)` in `styles/theme/variables.scss`, and uses them for its own `.gin-status--danger` and `.toolbar-badge--danger`. The values are the same in Gin 5.0.12, 5.0.16 and the 5.0.x branch. The Gin "Increase contrast" setting does not change them. On a Gin site, the CCC fallback is not used. - **Gin issues:** I found no Gin issue for this pair. The nearest are gin#3506318 (chip contrast, grey and green chips only) and the accessibility meta gin#3506302. - **Claro, and other themes without Gin variables:** `#cc3d3d` is the CCC fallback literal in `css/ai_context.css` and `css/ai_context_item.css`. CCC can change it directly. All ratios are calculated from the CSS, with !358 applied. They are not measured in a browser. The automated scans on #3586639 did not report the badges, so a manual measurement is necessary. ## Proposed resolution The three options can be used together: | Option | Fixes under Gin | Fixes under Claro | Ratio (light) | |---|---|---|---| | A. Neutral pair for Disabled and item-page Archived | Disabled, Archived | Disabled, Archived | 5.26:1 (dark 5.91:1) | | B. Darker CCC fallback, `#bd3636` | Nothing | All danger badges | 4.81:1 | | C. Gin issue for its light-mode danger text | All danger badges, after a Gin release | Nothing | 4.81:1 with `#bd3636` | `#bd3636` is the same red hue as `#cc3d3d`, only darker. The lightest value of that hue that passes is about `#c83434` (4.51:1), which leaves almost no margin. 1. [ ] Show **Disabled** with the neutral pair (`--gin-status-text` on `--gin-status-bg`) on the scope settings and consumer types pages. For example, let `AiContextStatusTagTrait::pluginStatusTag()` return a new `disabled` modifier. Update the tests that expect `ai-context-status--unpublished` for Disabled: `AiContextScopeSettingsTest`, `AiContextConsumerSettingsTest`, `AiContextScopeOverviewFormTest` and `AiContextConsumerTypeOverviewFormTest`. 2. [ ] On the item page, move `.ai-context-item-entity__status--archived` out of the danger rule in `css/ai_context_item.css` and use the neutral pair, the same as on the listing. 3. [ ] Change the CCC fallback for `--gin-status-danger-text` from `#cc3d3d` to `#bd3636` in `css/ai_context.css` and `css/ai_context_item.css`. This fixes Unpublished, push "Off" and the custom states under Claro. 4. [ ] Open a Gin issue to make the light-mode `--gin-status-danger-text` darker, for example `#bd3636`. Gin calculates the dark value from the same base color. With `#bd3636` the dark value is `#de9a9a`, 5.07:1, so dark mode still passes. Relate the Gin issue to gin#3506302 and link it here. 5. [ ] Decide what to do under Gin for Unpublished and push "Off" until a Gin release has the fix: wait for Gin, or also show push "Off" with the neutral pair. 6. [ ] Ask @kati.vera to measure again in a browser after the change: Gin light and dark mode, Claro, a hovered row, and the other Gin accent colors. 7. [ ] Link this issue from area 16 (Shared visual components) in #3586433, and tell the item page audit in #3586651, so that the finding is not reported two times. Target: 1.0.0 if this is RTBC by the code freeze on 2026-11-09, otherwise 1.0.1. ## Stakeholders * **Owner:** @kepol * @kati.vera: accessibility audit and browser measurement * @Pravesh_Poonia: #3586639 and !358 <details><summary>opus notes</summary> ### What I checked - #3586639: the description and all notes. !358: the description, the notes and the diff (2 CSS files). !358 merged on 2026-10-24. - !344 (Twig pin) does not change the badges. !348 adds a status tag, but it uses `draft` (warning, 4.53:1), not the danger pair. ### Ratios (WCAG formula, sRGB alpha compositing over #fff) | Pair | Ratio | |---|---| | Danger, `#cc3d3d` on `#faeae7` | 4.19 (4.18 if the composite is rounded to 8 bits; #3586639 uses both numbers) | | `#bd3636` on the same fill | 4.81 (matches note 3632784) | | `#c83434` on the same fill | 4.50 to 4.51 | | Neutral, `#626262` on `#eee` | 5.26 | | Dark neutral, `#c3cbd0` on rgba(255,255,255,.12) over `#2a2a2d` | 5.91 | | Dark danger, `#e69e9e` on the fill over `#2a2a2d` | 5.37 | | Dark danger from a darker base, `mix(white, #bd3636, 50%)` = `#de9a9a` | 5.07 | | Warning | 4.53 | | Success | 5.52 | ### Where each fact comes from - **Badge text size:** `css/ai_context.css` has `.ai-context-status` at 12px, weight 575. `css/ai_context_item.css` has the item page badge at 12px, weight `var(--gin-font-weight-semibold, 525)`. - **Danger rules on the item page:** Archived and Unpublished share the danger rule in `ai_context_item.css`. `AiContextItemViewBuilder::buildStatus()` sends all custom states to `unpublished`. - **Listing:** Archived uses the grey `--archived` rule. A custom state gets `ai-context-status--{state_id}`, which has no color rule at all. This is a second, smaller mismatch, and I left it out of the issue. - **Disabled:** `AiContextStatusTagTrait::pluginStatusTag()` returns Disabled as `unpublished`. - **Push "Off":** `AiContextConsumersForm::effectivePushLabel()` returns `unpublished` when push is off. - **Default workflow:** the CCC workflow has only draft, published and archived. - **Gin:** the local copy is 5.0.12. #3586639 says 5.0.15. I read the tokens through the API in 5.0.16 and on the 5.0.x branch, and they are the same. Gin's own users of the danger pair are in `styles/components/status.scss`. High contrast mode (`accent.scss`) does not override the status tokens. - **Claro:** Claro defines no `--gin-*` variables, so the CCC fallbacks apply there. - **Gin issue search:** I searched for contrast, danger, status badge, cc3d3d, gin-status, WCAG, color contrast, badge, chip, unpublished, toolbar-badge and more. No issue covers the danger pair. gin#3506318 covers only the grey and green chips, and it says their label contrast is enough. ### Open questions 1. [ ] The modifier for Disabled: a new `disabled` modifier (suggested), or reuse `archived`? 2. [ ] Also show push "Off" with the neutral pair? This is item 5 in the proposed resolution. 3. [ ] The audit child issues (#3586651 and #3586653) ask for follow-up titles with the `[Accessibility]` prefix, related to #3586433. ### Not confirmed - The scans by @davidbp found nothing. A possible reason, from my knowledge of axe-core and not tested in this session: axe reports text on a background image as "needs review", and since !358 the badge color is a gradient image. Also, Disabled badges were possibly not on the page during the scan. I did not put this in the issue. </details> > [!note] > Check the one that best describes your usage, or leave all unchecked if AI was not significantly used. > > * [ ] AI **Assisted Issue** \ > _Mainly written by a human; AI used for partial generation under full human supervision._ > > * [x] AI **Generated Issue** \ > _Mainly generated by AI, reviewed and approved by a human before this issue was created._