Dark mode colors have low contrast #38525
Labels
Comments
Clashsoft
changed the title
|
FWIW, we've using the dark-mode (based on preference with JS) on docs.mesa3d.org, and we've gotten complaints from users about the lack of contrast in the dark-mode as well. |
|
The color contrast in dark mode ( |
|
I see that the contrast works in theory, but as mentioned by @kusma and in my opinion, in practice it is still not readable for everyday text. Compare the comments here on GitHub, with a contrast ratio of 12.26:1. |
10 tasks
kusma
added a commit
to kusma/bootstrap
that referenced
this issue
Jun 23, 2023
This increases the default brightness for the body text-color in dark mode, which inceases readability a bit. It was also suggested to darken the background a bit, but we unfortunately don't have a darker gray in our color palette. So for now, let's increase the text-color by two notches, and leave the background color as-is instead.
mdo
pushed a commit
that referenced
this issue
Jun 25, 2023
This increases the default brightness for the body text-color in dark mode, which inceases readability a bit. It was also suggested to darken the background a bit, but we unfortunately don't have a darker gray in our color palette. So for now, let's increase the text-color by two notches, and leave the background color as-is instead.
|
Fixed by #38815. |
romankupchak93
pushed a commit
to romankupchak93/bootstrap
that referenced
this issue
Jan 5, 2024
This increases the default brightness for the body text-color in dark mode, which inceases readability a bit. It was also suggested to darken the background a bit, but we unfortunately don't have a darker gray in our color palette. So for now, let's increase the text-color by two notches, and leave the background color as-is instead.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Prerequisites
Describe the issue
The new darkmode colors make text very hard to read due to bad contrast. Compare these screenshots:
Unmodified:
Text Color #eee:
Text Color #eee and Body Color #111 (bootstrap-darkmode):
I propose changing the
$body-color-darkto something brighter like #eee for improved readability.Reduced test cases
What operating system(s) are you seeing the problem on?
Windows, macOS, Android, iOS, Linux
What browser(s) are you seeing the problem on?
Chrome, Safari, Firefox, Microsoft Edge, Opera
What version of Bootstrap are you using?
v5.3.0-alpha3
The text was updated successfully, but these errors were encountered: