UI: Good contrast / WCAG compatibility

[6543]

" ... WCAG compatibility is pretty important, at least AA grade ..."

---

#468 (comment), #468 (comment)

[6543]

@tecosaur:

This seems like the place to plop UI feedback? I've just started using Woodpecker and I'm sorry to say that the dark mode contrast is atrocious.

Let alone WCAG AAA, this fails WCAG AA standards of accessibility.

I recommend https://accessible-colors.com/ for checking that there's sufficient contrast between foreground and background colours.

Here's what #CCCFD4 looks like:

Copying Gitea's default foreground #bbc0ca is probably another decent option (it's 2/3 of the way to AAA from AA).

On a more stylistic note, I don't think the dark borders do the design any favours either. Here's a lighter version:

There are other improvements that can be made, but this would be a good starting point I think 🙂.

---

#468 (comment)

[6543]

https://wave.webaim.org/

[qwerty287]

It looks like we're AA compatible, for AAA we would have to change text color (only in dark mode, light is AAA).

(checked from header on repos view)

[qwerty287]

I just checked again: It only complains about the following

• alternative text color (this one is more light and e.g. used in pipeline list for the pipeline PID)
• header in light mode

I can't really tell whether we need to improve accessibility here, but especially the first is that light on purpose, so I probably wouldn't change this and close this issue.