redimp / otterwiki

A minimalistic wiki powered by python, markdown and git.
https://otterwiki.com
MIT License
252 stars 23 forks source link

Very low contrast when editing a code block on dark mode #103

Closed draganczukp closed 6 months ago

draganczukp commented 6 months ago

The default font color has a really bad contrast of just 2:1 - https://webaim.org/resources/contrastchecker/?fcolor=4C566A&bcolor=25282C

image

The recommendation for small text (which I'd argue this falls under) is 7:1. Changing the code text color to #B5BCC9, done by changing the L component of the HSV color to 75% boosts the contrast to 7.75:1, and makes the text a lot easier to read

redimp commented 6 months ago

Hey @draganczukp,

Thank you for bringing this to my attention. Part of the problem here is that the fenced code block with a language is rendered as comment:

image

With #B5BCC9 as .dark-mode .cm-s-otterwiki span.cm-comment is the comment barely distinguishable:

image

I don't see a harm in colorizing the comments, what do you think about #6BBAFF? e.g.

image

This has a contrast ratio of 7.11:1.