Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Contrast is at certain parts too low #1441

Open
watchingJu opened this issue Mar 4, 2020 · 4 comments · Fixed by #1449 · May be fixed by #1899
Open

Contrast is at certain parts too low #1441

watchingJu opened this issue Mar 4, 2020 · 4 comments · Fixed by #1449 · May be fixed by #1899
Labels
enhancement Wants to improvide an existing feature UI/UX

Comments

@watchingJu
Copy link

watchingJu commented Mar 4, 2020 •
edited
Loading

belongs to UI/UX.

some people (eg with bad sight) might have serious problems with reading, or finding certain text and options:

  • The toggle for the editor theme "Toggle editor theme" is dark grey on black
    image

  • The "Toggle spellcheck" is even harder to see, if the theme is white (the eyes are focused on bright stuff, grey on black is nearly invisible)
    image

  • The "Table of content" button is light grey on white; a bit more visible in the dark mode
    image

  • Line numbers are hardly visible too
    image
@watchingJu watchingJu changed the title Contrast is at certain parts too low UI/UX Contrast is at certain parts too low Mar 4, 2020
@a60814billy a60814billy added the enhancement Wants to improvide an existing feature label Mar 6, 2020
pkrasicki pushed a commit to pkrasicki/codimd that referenced this issue Mar 9, 2020
Improve visibility of some UI elements
2108975 
Partially fixes hackmdio#1441
@pkrasicki pkrasicki mentioned this issue Mar 9, 2020
Merged
@Yukaii Yukaii added the UI/UX label Mar 9, 2020
pkrasicki pushed a commit to pkrasicki/codimd that referenced this issue Mar 9, 2020
Improve visibility of some UI elements
a3844a4 
Partially fixes hackmdio#1441

Signed-off-by: pkrasicki <[omitted]>
pkrasicki pushed a commit to pkrasicki/codimd that referenced this issue Mar 10, 2020
@pkrasicki
Improve visibility of some UI elements
ba4ddca 
Partially fixes hackmdio#1441

Signed-off-by: pkrasicki <[email protected]>
@jackycute
Copy link
Member

Hi @watchingJu,
Feel free to re-open if you find anything UI contrast that need to be improved.

@Yukaii
Copy link
Member

Yukaii commented Apr 7, 2020

PR #1449 fixes the visibility of the status bar & TOC button. Reopen for tracking line number.

  • Line numbers are hardly visible too
    image

Feel free to raise more visibility/contrast ratio issues in this thread.

@Yukaii Yukaii reopened this Apr 7, 2020
@unode
Copy link

unode commented Sep 10, 2020

I'd like to suggest a change to increase the contrast of line numbers:

.CodeMirror-linenumber {
  color: #393e46;
}

to

.CodeMirror-linenumber {
  color: #666;
}

which seems to provide a reasonable contrast on my display(s).

However, looking at the code, I understand the default theme (one-dark) is imported from hackmd's codebase:

codimd/webpack.common.js

Line 251 in 3e75445

path.join(__dirname, 'node_modules/@hackmd/codemirror/theme/one-dark.css'),

What would be the recommended way to suggest a change there?
Technically this contrast issue also affects hackmd.io.

@micw
Copy link

micw commented Dec 5, 2024

Same for in-text representations:
grafik

@stanley2058 stanley2058 linked a pull request Mar 21, 2025 that will close this issue
feature/dev 1879 improve contrast on certain elements #1899
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement Wants to improvide an existing feature UI/UX
Projects
None yet
Milestone
No milestone
6 participants
@unode @micw @a60814billy @jackycute @Yukaii @watchingJu