You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
Whereas in the FlatLaf Dark theme, those backgrounds are... also lightened, leading to decreased contrast compared to the default background:
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.
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.
The text was updated successfully, but these errors were encountered:
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:
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
:Whereas in the FlatLaf Dark theme, those backgrounds are... also lightened, leading to decreased contrast compared to the default background:
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.
What we see there, palette-wise, are:
#ffffff
body textSuggestions/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.
The text was updated successfully, but these errors were encountered: