Skip to content

a11y: re-evaluate .from-value / .to-value contrast across skins #380

@JohnMcLear

Description

@JohnMcLear

Issue

`static/css/comment.css` styles the suggestion value spans with:

```css
.suggestion-display .from-value, .suggestion-display .to-value {
opacity: .8;
font-style: italic;
}
.suggestion-create .from-value {
display: block;
opacity: .8;
font-style: italic;
margin: 5px 0;
}
```

The `opacity: .8` reduces contrast against the underlying background. On the default `colibris` skin (white card / dark text) this still passes WCAG 2.1 AA (≥4.5:1), but on darker / branded skins or themed deployments it can drop below threshold.

What to do

  1. Audit current contrast ratio across the bundled skins and the most common community skins (e.g. dark mode addons).
  2. Replace `opacity: .8` with an explicit color token derived from the skin's text color, so each skin can override it without relying on alpha-blending against an unknown background.
  3. Add a Playwright + axe-core check (or a simple `getComputedStyle` assertion in a frontend spec) that verifies the value text contrast meets AA on the default skin so future regressions get caught.

Scope

  • `static/css/comment.css`
  • Possibly per-skin overrides
  • Frontend test under `static/tests/frontend-new/specs/`

Metadata

Metadata

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions