Skip to content

enhance: improve diff contrast in light and dark themes - #37477

Merged
silverwind merged 9 commits into
go-gitea:mainfrom
cyphercodes:issue-37448-accessible-diff-colors
Jul 22, 2026
Merged

silverwind merged 9 commits into
go-gitea:mainfrom
cyphercodes:issue-37448-accessible-diff-colors

Conversation

@cyphercodes

@cyphercodes cyphercodes commented Apr 29, 2026

Copy link
Copy Markdown
Contributor

Fixes #37448

Adjust the diff stat counter and syntax colors in both light and dark themes to github-like colors that meet a >= 5:1 contrast floor (>= 7:1 for syntax names on diff rows), and make the counters semibold.

Co-authored-by: Hermes Agent (GPT-5.5) <hermes-agent@nousresearch.com>
Signed-off-by: cyphercodes <cyphercodes@users.noreply.github.com>
@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Apr 29, 2026
@wxiaoguang

Copy link
Copy Markdown
Contributor

Screenshots?

@bircni
bircni requested a review from silverwind May 1, 2026 10:02
@wxiaoguang

Copy link
Copy Markdown
Contributor

The new color seems too pink (compared to the "deletion" text). Not enough saturation?

image

Comment thread web_src/css/themes/theme-gitea-dark.css Outdated
@wxiaoguang
wxiaoguang marked this pull request as draft May 1, 2026 18:45
@silverwind

Copy link
Copy Markdown
Member
image

I don't see pink on my screen, but this definitely overshoots in brightness imho.

More screenshots appreciated.

Comment thread web_src/js/utils/theme-contrast.test.ts Outdated
Comment thread web_src/js/utils/theme-contrast.test.ts Outdated
@silverwind

Copy link
Copy Markdown
Member

👍 on the test approach. Formal color validation is great.

Co-Authored-By: Hermes Agent <hermes@noreply.local>
@cyphercodes

Copy link
Copy Markdown
Contributor Author

Pushed a small follow-up for the straightforward review nit:

  • Switched the theme contrast test to a named node:path import (import {join} from 'node:path').

Local verification:

  • git diff --check

I left the color/luminance feedback unchanged because the remaining comments look design/implementation-direction dependent (brightness/screenshots and whether to reuse the existing non-WCAG luminance helper vs. this test's WCAG contrast calculation).

@wxiaoguang

Copy link
Copy Markdown
Contributor

ping @silverwind

@silverwind

Copy link
Copy Markdown
Member

Did all fixes, removed the overly-bright AAA stuff, AA is enough.

Variable File Before (main) PR (original) After (final)
--color-diff-added-fg dark #87ab63 (6.31) #93b373 (7.02) #93b373 (7.02)
--color-diff-removed-fg dark #cc4848 (3.60 ✗) #ff8585 (7.03) #fb5f5b (5.41)
--color-syntax-name dark #c7a618 (5.76 / 6.68) #fabd2f (8.02 / 9.31) #fabd2f (8.02 / 9.31)
--color-syntax-type dark #eb8cb3 (5.78 / 6.71) #fabd2f (8.02 / 9.31) #eb8cb3 (5.78 / 6.71)
--color-diff-added-fg prot/deut #58a6ff (6.53) #65adff (7.05) #58a6ff (6.53)
--color-diff-removed-fg prot/deut #f0883e (6.52) #f2964f (7.27) #f0883e (6.52)
--color-diff-added-fg tritanopia #58a6ff (6.53) #65adff (7.05) #58a6ff (6.53)

- deletion counter: swap the pink #ff8585 for the saturated #fb5f5b,
  closer to GitHub and clearing the >=5 contrast the issue asks for
  without overshooting into brightness
- keep syntax name/type distinct: only name reverts to #fabd2f, type
  stays at #eb8cb3
- drop the colorblind AAA bumps; the originals already exceed the
  floor and match GitHub's colorblind palette
- test: use colord's WCAG contrast with github-parity thresholds

Assisted-by: Claude:Opus-4.8
Assisted-by: Claude:Opus-4.8
It only re-reads the theme's hex values and gates them on a contrast
formula, guarding a rare and deliberate change while baking in a
single assumed background that is not always the real render surface.
The color and semibold changes are the actual fix.

Assisted-by: Claude:Opus-4.8
@silverwind

Copy link
Copy Markdown
Member

Also I have removed this test, I think it does not bring much value and was inprecise (backgrounds can vary). A proper such test would need to be an e2e test and that is overkill for this imho.

The light diff stat counters had poor contrast on the file header,
worst of all the added green at 2.56:1. Darken the added/removed and
colorblind foregrounds to github-like hues that clear >= 5:1 on the
--color-box-header background.

Assisted-by: Claude:Opus-4.8
@silverwind

Copy link
Copy Markdown
Member

Did some light mode changes as well:

Var File Before After header CR
--color-diff-added-fg light #21ba45 (2.56 ✗✗) #177231 5.41
--color-diff-removed-fg light #db2828 (4.83) #c61f2b 5.19
--color-diff-added-fg light prot/deut #2185d0 (3.93 ✗) #0860cc 5.30
--color-diff-removed-fg light prot/deut #fc6500 (2.99 ✗✗) #a84400 5.40
--color-diff-added-fg light tritanopia #2185d0 (3.93 ✗) #0860cc 5.30

@silverwind silverwind changed the title Improve dark diff contrast Improve diff contrast in light and dark themes Jul 22, 2026
@silverwind
silverwind marked this pull request as ready for review July 22, 2026 11:04
Copilot AI review requested due to automatic review settings July 22, 2026 11:04
@GiteaBot GiteaBot removed the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Jul 22, 2026
@GiteaBot GiteaBot added the lgtm/need 1 This PR needs approval from one additional maintainer to be merged. label Jul 22, 2026
@silverwind silverwind changed the title Improve diff contrast in light and dark themes enhance: improve diff contrast in light and dark themes Jul 22, 2026
@github-actions github-actions Bot added the type/enhancement An improvement of existing functionality label Jul 22, 2026

This comment was marked as low quality.

@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Jul 22, 2026
@wxiaoguang wxiaoguang added the backport/v1.27 This PR should be backported to Gitea 1.27 label Jul 22, 2026
@silverwind
silverwind merged commit ae7bafe into go-gitea:main Jul 22, 2026
33 of 34 checks passed
@GiteaBot GiteaBot added this to the 28.0.0 milestone Jul 22, 2026
@GiteaBot GiteaBot added the backport/done All backports for this PR have been created label Jul 22, 2026
silverwind added a commit that referenced this pull request Jul 22, 2026
)

Backport #37477 by @cyphercodes

Fixes #37448

Adjust the diff stat counter and syntax colors in both light and dark
themes to github-like colors that meet a >= 5:1 contrast floor (>= 7:1
for syntax names on diff rows), and make the counters semibold.

Signed-off-by: cyphercodes <cyphercodes@users.noreply.github.com>
Co-authored-by: Rayan Salhab <r.salhab@aiyexpertsolutions.com>
Co-authored-by: cyphercodes <cyphercodes@users.noreply.github.com>
Co-authored-by: Hermes Agent (GPT-5.5) <hermes-agent@nousresearch.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Hermes Agent <hermes@noreply.local>
Co-authored-by: silverwind <me@silverwind.io>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport/done All backports for this PR have been created backport/v1.27 This PR should be backported to Gitea 1.27 lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. type/enhancement An improvement of existing functionality

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Accessibility issues after upgrading to 1.26

6 participants