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.

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

Default dark theme(s): contrast issues #762

Open
ferdnyc opened this issue Nov 15, 2023 · 2 comments
Open

Default dark theme(s): contrast issues #762

ferdnyc opened this issue Nov 15, 2023 · 2 comments

Comments

@ferdnyc
Copy link

ferdnyc commented Nov 15, 2023

This was previously brought up long ago in #174, but withdrawn. However, I feel the issue is still present and has significant merit. The contrast of the FlatLaf Dark / FlatLaf Darcula default themes, as opposed to the two light variants, remains rather anemic.

The contrast conundrum

As stated in #174, the default background color is #3c3f41, with the default text color being #bbbbbb. That combination, under ideal conditions, rates only a 5.52:1 contrast ratio in the WebAIM contrast checker, passing the WCAG AA standard (though not by very much, as the minimum is 4.5:1), but falling well short of the WCAG AAA standard that requires a contrast ratio of 7:1.

And that's under ideal conditions. In reality, font antialiasing often leads to text characters being rendered with the majority of their glyph area being significantly darker than #bbbbbb.

Beyond the default background color

In addition, #3c3f41 is among the darkest background colors found in the theme(s) — many elements render with even lighter backgrounds. Buttons, for example, have a background color of #4e5052, which paired with the #bbbbbb foreground color fails to pass even WCAG AA. The contrast ratio of that combination is only 4.21:1.

Light vs. Dark theme contrast effects

Notice how, in the example images from the FlatLaf documentation, the FlatLaf Light theme increases contrast in text input fields and combo boxes by lightening the background color from the default to #ffffff:

image

Whereas in the FlatLaf Dark theme, those backgrounds are... also lightened, leading to decreased contrast compared to the default background:

image

In a sane and just world, the background color of those fields would be darkened in the dark theme(s), offering a contrast boost in line with the light theme palette. Instead, the combination as currently implemented is #bbbbbb against #45494a, barely squeaking by WCAG AA with a contrast ratio of only 4.74:1.

IntelliJ

The Dark and Darcula palettes are often touted as matching, or being inspired by, the IntelliJ IDEA interface theme. However, IntelliJ themselves recently released a "New UI" for the IDEA interface, and I think the differences in terms of theming are best summed up by this comparison image from https://www.jetbrains.com/idea/new-ui/, which places the main IDEA interface styled by the New UI in front of the default interface under the previous theme.

image

What we see there, palette-wise, are:

  • An increased emphasis on contrast, recognizing that the previous theme was crippled in that regard
  • Greatly increased use of fully #ffffff body text
  • Darkened background colors, to provide even better contrast with the fully-white foreground text

Suggestions/Proposals

If nothing else, the foreground text color for Dark/Darcula should be raised from #bbbbbb to #ffffff, to provide sufficient contrast against the theme background color(s). A foreground color of #ffffff meets the WCAG AAA contrast standard against #3c3f41, #45494a, and #4e5052.

If those background colors were also to be darkened, that would only improve the situation further.

@ferdnyc
Copy link
Author

ferdnyc commented Nov 22, 2023

This is expUI_dark.theme.json, the "New UI" color scheme extracted from the IntelliJ Platform repository: https://github.com/JetBrains/intellij-community/blob/master/platform/platform-resources/src/themes/expUI/expUI_dark.theme.json

It loads into FlatLaf Demo with only some minor complaints about the embedded icon paths. You can see the difference in contrast & legibility, vs. the default "old"-Dark themes:

Current FlatLaf Dark

image

expUI_dark

image

@notfirefox
Copy link

The expUI_dark looks pretty good imo

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants