High-contrast themes don't have high contrast

[dorsiflexion]

Versions

Core version is v6.0.5 (Latest: v6.0.5)
Web version is v6.0.2 (Latest: v6.0.2)
FTL version is v6.0.4 (Latest: v6.0.4)

Platform

• OS and version: Debian 12.9
• Platform: Raspberry Pi

Problem

The high-contrast themes should have really high contrast so noone, even visually impaired people, has a unnecessarily hard time reading it. This means to meet the AAA WCAG rating, but the higher the contrast the better and the easier to read. It really helps if the theme is not just like "this must still be super colorful, so we'll compromise on contrast", but to rather use the colors black and white or ones that are close to that. But in contrast (pun intended), as of now, the high-contrast themes seem to be more like icy or anemic themes and should not actually be used to achieve high contrast.

Measurements

Designation text & Small text & Sidebar headlines = Text, according to WCAG. Required contrast for AAA: 7:1.
Large text = Large Text, according to WCAG. Required contrast for AAA: 4.5:1.
UI elements are ok, except that some buttons don't look like buttons.

Contrasts (x : 1)	Large text	Designation text	Explanatory text	Sidebar headlines
Pi-hole deep-midnight	9.03 ✔	9.96 ✔	6.04 ⭘	7.21 ✔
High-contrast dark	6.92 ✔	10.77 ✔	5.23 ⭘	5.07 ⭘
High-contrast light	11.03 ✔	12.63 ✔	4.74 ⭘	4.92 ⭘

✔ = Passes AA & passes AAA
⭘ = Passes AA & fails AAA

I'm mostly complaining about explanatory text and the sidebar headlines here, as this is the kind of text that has low contrast. Most of them barely pass the 4.5:1 contrast requirement for AA. For these texts, Pi-hole deep-midnight has the highest contrast. All three themes pass the other contrast criteria. So as of now, there's not really a point in the "High-contrast" themes, as Pi-hole deep-midnight is the best in this regard.

Suggestions

Of course, the current "high-contrast" themes might be kept, but in that case I suggest renaming them to icy, or whatever. The high-contrast themes should really be close to 000000 on FFFFFF or vice-versa.

• High-contrast light
  • Highlight text: 000000 (equals contrast of 21:1)
  • Explanatory text: 404040 – or somewhere in that ballpark (equals contrast of 10.36:1)
  • Sidebar headlines: 000000 on FFFFFF or so
• High-contrast dark
  • Keep the background
  • Box and sidebar main background color: 000000
  • Highlight text: 000000 (equals contrast of 21:1)
  • Explanatory text: 404040 – or somewhere in that ballpark (equals contrast of 10.36:1)
  • Sidebar headline text: FFFFFF

That blue-ish tone might be kept with a skew of these color values to blue. But I think a theme with lots of real 000000 background has a charm on its own. Also, I most likely did not cover all elements. I just want to point out the general direction.

Screenshots

Additional

Thanks to the WebAIM Contrast Checker.

[rdwebdesign]

Maybe the issue is the theme names.

The themes were initially intended to be high contrast themes, but during the development and tests the focus change a little towards improving the theme colors for color-blind users. At that time, we made sure the themes had at least "AA" rating (as you confirmed).

As the PR text explains:

The new themes are an attempt to improve the visualization of some important items (allow/blocked queries, network table items, etc) even without colors.

Also, we had some users asking for color-blind oriented themes (and apparently no users asking for increased contrast).

[dorsiflexion]

Thanks, that seems to make sense. In that case, the themes should be renamed to something like "color-blind-friendly {dark,light}".

Anyway, I'd really appreciate to have a really dark theme in the likes of "OLED dark" for smartphones. Such a theme might simultaneously be really high contrast. I might even have a go at it, if such theme is wanted and if I get some hints where to start.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Please comment or update this issue or it will be closed in 5 days.

[dorsiflexion]

Not resolved.