Codeberg Dark link color is slightly too hard to read, accessibility problem? #751

ell1e commented 2022年10月09日 17:23:27 +02:00

The Codeberg Dark link color seems slightly too hard to read to me, I struggled a little in my normally lit room with the screen not in bright sun, which should be acomfortable reading setup.

I think brightening and desaturating it just a tiny bit would help, like the attached 20220910_17h18m01.png. Compare to the less readable original of 20220910_17h18m02.png.

The Codeberg Dark link color seems slightly too hard to read to me, I struggled a little in my normally lit room with the screen not in bright sun, which should be acomfortable reading setup. I think brightening and desaturating it just a tiny bit would help, like the attached `20220910_17h18m01.png`. Compare to the less readable original of `20220910_17h18m02.png`.

ell1e commented 2022年10月09日 20:11:37 +02:00

Ok after some more getting used to the theme, maybe it would be best to do this change but only for the folder names/filenames, so the left column of the file list?

Because the actual folders/files and maybe latest commit info at the top were what felt like a little getting drowned in the low contrast? And maybe the other stuff, like commit message per file, any links in the repo description at the top, etc. is actually best left a little lower contrast. Because I like how that guides the user focus a bit.

Just an idea, of course, maybe what others think would be interesting

Ok after some more getting used to the theme, maybe it would be best to do this change but **only for the folder names/filenames**, so the left column of the file list? Because the actual folders/files and maybe latest commit info at the top were what felt like a little getting drowned in the low contrast? And maybe the other stuff, like commit message per file, any links in the repo description at the top, etc. is actually best left a little lower contrast. Because I like how that guides the user focus a bit. Just an idea, of course, maybe what others think would be interesting

ell1e commented 2022年10月09日 20:20:33 +02:00

I did an edit/mockup now!

Changes:

• Everything above the file listing box with the latest overall commit at the top is unchanged

• The overall commit message above the file list (latest overall commit) as well as the file/folder names are brighter and slightly less saturated

• The committer name of the overall latest commit, as well as all per-file commit messages are darker

I did an edit/mockup now! Changes: - Everything above the file listing box with the latest overall commit at the top is **unchanged** - The **overall commit message** above the file list (latest overall commit) as well as the **file/folder names** are **brighter** and slightly less saturated - The **committer name** of the overall latest commit, as well as **all per-file commit messages** are **darker**

ell1e commented 2022年10月10日 15:26:53 +02:00

Maybe another change to Codeberg Dark worth considering would be: --color-secondary-light-3: #0c1a24;. See attached image, the all around dark on the outside (that doesn't really assist text readability in the inner content boxes anyway) would be easier on the eyes then. Just an idea.

Maybe another change to Codeberg Dark worth considering would be: `--color-secondary-light-3: #0c1a24;`. See attached image, the all around dark on the outside (that doesn't really assist text readability in the inner content boxes anyway) would be easier on the eyes then. Just an idea.

fnetX commented 2022年10月10日 18:34:34 +02:00

Hey, you'd really help us a lot if you could take some time and fiddle directly with the source files. I don't know how much experience you have with web development, but if you can affort having a knock at it, this would be great.

I think you mainly need to modify the values here: https://codeberg.org/Codeberg/gitea/src/branch/codeberg-1.17/web_src/less/themes/codeberg/dark-variables.less

In order to build Gitea and see the changes in effect, you need to install Go, make and nodeJS / npm. Does this work for you?

If the "challenge" was quite okay for you, you might consider solving Codeberg/Design#50, too. It's closed, but not done.

Please don't hesitate to contact us if you have any questions.

Hey, you'd really help us a lot if you could take some time and fiddle directly with the source files. I don't know how much experience you have with web development, but if you can affort having a knock at it, this would be great. I think you mainly need to modify the values here: https://codeberg.org/Codeberg/gitea/src/branch/codeberg-1.17/web_src/less/themes/codeberg/dark-variables.less In order to build Gitea and see the changes in effect, you need to install Go, make and nodeJS / npm. Does this work for you? If the "challenge" was quite okay for you, you might consider solving https://codeberg.org/Codeberg/Design/issues/50, too. It's closed, but not done. Please don't hesitate to contact us if you have any questions.

ell1e commented 2022年10月10日 18:51:56 +02:00

Got a gut feeling the varied link colors I proposed may not work without deviating from the centrally defined colors which is likely not worth it, better to just brighten them up as a whole.

Simplified then, it's likely two lines to change:

1. --color-secondary-light-3 set to #0c1a24;

2. whatever does all the repo page links (guessing it's likely a single CSS var too) to slightly less color, slightly more bright. I'll dig up the exact CSS var and suggested color later today.

But not sure if I'll get to test in a Gitea, I'm just poking the "Inspect" window for now. I'm swamped with projects.

Edit: I could make a merge request though, with the changed CSS values directly inserted. I just may not get around to actually test it in an instance.

Got a gut feeling the [varied link colors I proposed](https://codeberg.org/Codeberg/Community/issues/751#issuecomment-638862) may not work without deviating from the centrally defined colors which is likely not worth it, better to just brighten them up as a whole. Simplified then, it's likely two lines to change: 1. `--color-secondary-light-3` set to `#0c1a24;` 2. whatever does all the repo page links (guessing it's likely a single CSS var too) to slightly less color, slightly more bright. I'll dig up the exact CSS var and suggested color later today. But not sure if I'll get to test in a Gitea, I'm just poking the "Inspect" window for now. I'm swamped with projects. Edit: I could make a merge request though, with the changed CSS values directly inserted. I just may not get around to actually test it in an instance.

fnetX commented 2022年10月10日 18:54:42 +02:00

Okay. Having a pull request sounds much more manageable to me, this would be great. Thank you.

Okay. Having a pull request sounds much more manageable to me, this would be great. Thank you.

ell1e commented 2022年10月10日 20:59:17 +02:00

Okay, pull request is here: Codeberg/gitea#42 let's hope I did everything correctly!

Okay, pull request is here: https://codeberg.org/Codeberg/gitea/pulls/42 let's hope I did everything correctly!