Hello!
Just downloaded Nota, and noticed the UI is reeeeally hard to read. As in, I almost reported this as a bug for the colors being incorrect 馃槄
I ran the top toolbar fg/bg colors聽(where it says "Nota") through a standard contrast checker and it's sitting at around a 2.59:1 contrast ratio, vs. the minimum 4:1 per WCAG AA. (Given this is very small text too, that would factor in to the math, not just hitting a raw % contrast, so, a 7:1 may be better here).
One simple a11y test is to turn the monitor brightness to 50%, and see if that is readable. Lots of people leave their laptops at not-full-brightness, sometimes are outside, but most importantly, not everyone has the same level of eyesight -- myself included.
For reference, the UI is dimmer than the the Firefox tab text when the window is not focused.
| Current Dark Mode |
Suggestion |
 |
 |
As a suggestion, bumping up the contrast for the entire UI would benefit a lot of people, without sacrificing on the design. A high-contrast mode is doable, but it can still look good! GitHub has a good demonstration of "dimmed" vs. "dark" vs. "high contrast", as does Linear.
Hello!
Just downloaded Nota, and noticed the UI is reeeeally hard to read. As in, I almost reported this as a bug for the colors being incorrect 馃槄
I ran the top toolbar fg/bg colors聽(where it says "Nota") through a standard contrast checker and it's sitting at around a 2.59:1 contrast ratio, vs. the minimum 4:1 per WCAG AA. (Given this is very small text too, that would factor in to the math, not just hitting a raw % contrast, so, a 7:1 may be better here).
One simple a11y test is to turn the monitor brightness to 50%, and see if that is readable. Lots of people leave their laptops at not-full-brightness, sometimes are outside, but most importantly, not everyone has the same level of eyesight -- myself included.
For reference, the UI is dimmer than the the Firefox tab text when the window is not focused.
As a suggestion, bumping up the contrast for the entire UI would benefit a lot of people, without sacrificing on the design. A high-contrast mode is doable, but it can still look good! GitHub has a good demonstration of "dimmed" vs. "dark" vs. "high contrast", as does Linear.