[Calendar Clock] Current time is hard to read

[TheLastProject]

Affected hardware version

Bangle 2

Your firmware version

2v15

The bug

The Calendar Clock app uses a cyan colour for the current time text. The cyan is sadly very hard to read on the white background, especially when the screen is dimmed. I absolutely love Calendar Clock, but this colour choice forces me to flick my wrist very often to be able to read the current time.

The future events, however, are quite easy to read.

The problem with design and colour is that it is quite personal, so I am not sure what to suggest for improving this. Naively I would say to "just use a darker colour".

Perhaps the most perfect solution would be to use a darker default colour and make it possible to choose the preferred colour in settings.

I am willing to take a look at this myself as this seems like a quite beginner-friendly issue to tackle if we can agree on the correct way forward :)

(P.S.: Are there any plans to make this repo join Hacktoberfest? It would just mean adding a "hacktoberfest" topic to the repo and merging or labelling "hacktoberfest-accepted" PRs that fit your desired standards. I'm still willing to help regardless, but during October I will prioritize repositories that join Hacktoberfest)

[gfwilliams]

So you think if you change the watch's color scheme to 'white on black' it'll work better?

Maybe the app just needs to detect if its using a dark color scheme and then use blue rather than cyan

Are there any plans to make this repo join Hacktoberfest? It would just mean adding a "hacktoberfest" topic to the repo and merging or labelling "hacktoberfest-accepted" PRs that fit your desired standards

I didn't have plans, but I've just added the label and topic. I'm a bit busy today, but if you see any issues you want me to tag 'hacktoberfest' just give me a quick mention on the issue

[TheLastProject]

So, I am not an accessibility expert, but looking at https://webaim.org/resources/contrastchecker/, the contrast of #00ffff on white is 1.25:1 (which fails all accessibility guidelines).

The same colour on a black background has a contrast of 16.74:1, passing all accessibility tests (and I can confirm it's a lot easier to read too).

I think this shows that contrast may be the crux ot the issue and following contrast guidelines may help solve it.

Looking at WebAIM guidelines: "WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text." Given the small screen, I feel we should aim for at least the 7. Messing around with the lightness of the original colour on https://www.hsluv.org/, one option would be #006060. This has a contrast of 7.38:1 (passing all WebAIM tests) and I think has a similar enough "feel" to the original cyan colour:

I'm going to try and see if it actually feels right on an actual Bangle.js 2 as well. You'll see a PR soon-ish for this :)

Side-note: Pure black on pure white (and vice-versa) however has a contrast of 21:1, which is even more. Thus, the watchface's design prioritizes the visibility of upcoming events meetings over the current time. While I don't understand the purpose of making the upcoming meetings more visible than the current time given they'll change less often than the current time, the watchface does generally "feel right" to use, so I am tempted to stick to the original design.