[Poll] Comment Color Brightness

[arcticicestudio]

Related issues: nordtheme/visual-studio-code#14 (comment)

Prehistory

There have been many contributions and issues about the comment color brightness across almost all port projects related to the current comment color and its brightness. Many users explained that it is hard to recognize and read comments.

Current Situation

The low contrast color for comment is by design of Nord and has been selected specifically to not disturb code flow and keep the focus of the developer on the code, but there are indeed situations where this design can also turn to a problem:

• Accessibility- Users with visual impairments or color blindness
• Environment - Local conditions like e.g. sunbeams or reflective objects which disturb the visibility
• Hardware - Users with monitors / screens which color settings are not optimally configured or not capable to provide best color adjustments

Another aspect users disagree with the highlighting color assignments is that everyone has different preferences. That's fine of course, and the reason why themes exist 😄

Existing Workarounds

Due to the high amount of requests the decision has been made to implement a theme configuration for all port projects with support for such theme mechanisms. Unfortunately not all port projects were able to provide this option due to limitations of the targeting application/platform.

The configuration allows users to define a custom comment color brightness with percentage adjustments from 0 - 20. It is a way to provide a way for users to easily adjust the comment color to fit their needs without overriding specific code parts individually. To adhere to the Nord style guide the initial value has been set to use nord3 by default and applied as fallback when the user assigned a invalid value.

This customization has been first implemented to the Nord Atom Syntax project and then ported to other port projects like e.g. Nord Vim and Nord Emacs. The values are calculated using the Sass lighten function to ensure full interoperability with other port projects that providing this theme feature. The lightness was calculated using the lightness function.

To help users to choose a new comment color and provide a overview of the new available values a table has been added to the documentations:

Increased by	Calculated value	Lightness
0% (default)	nord3	35.68627%
1%	#4e586d	36.68627%
2%	#505b70	37.68627%
3%	#525d73	38.68627%
4%	#556076	39.68627%
5%	#576279	40.68627%
6%	#59647c	41.68627%
7%	#5b677f	42.68627%
8%	#5d6982	43.68627%
9%	#5f6c85	44.68627%
10%	#616e88	45.68627%
11%	#63718b	46.68627%
12%	#66738e	47.68627%
13%	#687591	48.68627%
14%	#6a7894	49.68627%
15%	#6d7a96	50.68627%
16%	#6f7d98	51.68627%
17%	#72809a	52.68627%
18%	#75829c	53.68627%
19%	#78859e	54.68627%
20%	#7b88a1	55.68627%

Click to show Sass code used to calculate the new increased brightness values

$nord3: #4c566a;
$nord3-lightness: lightness($nord3);

$one: lighten($nord3, 1%);
$one-lightness: lightness($one);
$two: lighten($nord3, 2%);
$two-lightness: lightness($two);
$three: lighten($nord3, 3%);
$three-lightness: lightness($three);
$four: lighten($nord3, 4%);
$four-lightness: lightness($four);
$five: lighten($nord3, 5%);
$five-lightness: lightness($five);
$six: lighten($nord3, 6%);
$six-lightness: lightness($six);
$seven: lighten($nord3, 7%);
$seven-lightness: lightness($seven);
$eight: lighten($nord3, 8%);
$eight-lightness: lightness($eight);
$nine: lighten($nord3, 9%);
$nine-lightness: lightness($nine);
$ten: lighten($nord3, 10%);
$ten-lightness: lightness($ten);
$eleven: lighten($nord3, 11%);
$eleven-lightness: lightness($eleven);
$twelve: lighten($nord3, 12%);
$twelve-lightness: lightness($twelve);
$thirteen: lighten($nord3, 13%);
$thirteen-lightness: lightness($thirteen);
$fourteen: lighten($nord3, 14%);
$fourteen-lightness: lightness($fourteen);
$fifteen: lighten($nord3, 15%);
$fifteen-lightness: lightness($fifteen);
$sixteen: lighten($nord3, 16%);
$sixteen-lightness: lightness($sixteen);
$seventeen: lighten($nord3, 17%);
$seventeen-lightness: lightness($seventeen);
$eighteen: lighten($nord3, 18%);
$eighteen-lightness: lightness($eighteen);
$nineteen: lighten($nord3, 19%);
$nineteen-lightness: lightness($nineteen);
$twenty: lighten($nord3, 20%);
$twenty-lightness: lightness($twenty);

html {
  --nord3: #{$nord3};
  --new-value-one: #{$one};
  --new-value-two: #{$two};
  --new-value-three: #{$three};
  --new-value-four: #{$four};
  --new-value-five: #{$five};
  --new-value-six: #{$eight};
  --new-value-seven: #{$seven};
  --new-value-eight: #{$eight};
  --new-value-nine: #{$nine};
  --new-value-ten: #{$ten};
  --new-value-eleven: #{$eleven};
  --new-value-twelve: #{$twelve};
  --new-value-thirteen: #{$thirteen};
  --new-value-fourteen: #{$fourteen};
  --new-value-fifteen: #{$fifteen};
  --new-value-sixteen: #{$sixteen};
  --new-value-seventeen: #{$seventeen};
  --new-value-eighteen: #{$eighteen};
  --new-value-nineteen: #{$nineteen};
  --new-value-twenty: #{$twenty};

  --nord3-lightness: #{$nord3-lightness};
  --new-value-one-lightness: #{$one-lightness};
  --new-value-two-lightness: #{$two-lightness};
  --new-value-three-lightness: #{$three-lightness};
  --new-value-four-lightness: #{$four-lightness};
  --new-value-five-lightness: #{$five-lightness};
  --new-value-six-lightness: #{$six-lightness};
  --new-value-seven-lightness: #{$seven-lightness};
  --new-value-eight-lightness: #{$eight-lightness};
  --new-value-nine-lightness: #{$nine-lightness};
  --new-value-ten-lightness: #{$ten-lightness};
  --new-value-eleven-lightness: #{$eleven-lightness};
  --new-value-twelve-lightness: #{$twelve-lightness};
  --new-value-thirteen-lightness: #{$thirteen-lightness};
  --new-value-fourteen-lightness: #{$fourteen-lightness};
  --new-value-fifteen-lightness: #{$fifteen-lightness};
  --new-value-sixteen-lightness: #{$sixteen-lightness};
  --new-value-seventeen-lightness: #{$seventeen-lightness};
  --new-value-eighteen-lightness: #{$eighteen-lightness};
  --new-value-nineteen-lightness: #{$nineteen-lightness};
  --new-value-twenty-lightness: #{$twenty-lightness};
}

Current Situation

I've increased the comment color by 5% up to 8% locally for all my port projects I use every day and finally came to the decision that it should be fine to increase the current comment color by default. It has been requested in many port projects and I'd like to listen to the community to make the theme even more comfortable 🚀

Note that this will not affect Nord itself, the color palette won't change. It'll be changed in the documentation and style guidelines and only adjusted for port projects that define syntactic rules for comments. nord3 is good as it is and still works fine for all UI projects!

Also, each port project that has the capability to provide the theme configuration (like Nord Atom Syntax & UI, Nord Vim) will eventually get some kind of legacy comment color mode to not break the theme for users that like the current comment color.

Your Opinion Counts

This poll issue has been to get feedback from the community and users of all port projects to decide the value which will be between 5 and 8 percent.

Please vote only once for the value you'd like to see the comment color to be increased by!

The poll has been created with the awesome gh-polls project by apex.

With nord3 (default)

Increased by 10%

Journals

2019-03-17

Thanks everyone for your votes! 🏆
And the winner is… 8%!

This result clearly shows that the community want to increase the comment brightness significantly. Therefore the used value won't be 8 but 10 percent. The decision is based on the facts that it provides a lightness level of ~45.7% instead of ~43.7% which more than 24% higher than the level of the base background color nord0. It also improves the visual dissociation to nord1 and nord2 that are used as selection and active line background colors.

On the other side a higher increase value would collide with often used colors like nord9 (keywords, flow control statements, operators etc.). Their brightness level (~63.14%) and saturation would be too equal making it hard to distinguish between the two colors.

Example of increasing the color by 16% that would make it hard to distinguish between nord9

Please see the implementation status section below to get an overview of the actual change progress for each port project.

Implementation Status

The order for the port project implementations is the same like the order on the ports page which is sorted by GitHub stars. This reflects which ports are used the most so these will need to be updated first.

Nord Vim

Status: Completed ✓
🚀 Deployed in release version 🏷 0.10.0

All implementation details and requirements are documented in the corresponding issue nordtheme/vim#145.

Nord Visual Studio Code

Status: Completed ✓
🚀 Deployed in release version 🏷 0.8.0

All implementation details and requirements are documented in the corresponding issue nordtheme/visual-studio-code#117 and PR nordtheme/visual-studio-code#118.

Nord Jetbrains Editor

Status: Completed ✓
🚀 Deployed in release version 🏷 0.4.0

All implementation details and requirements are documented in the corresponding issue nordtheme/jetbrains#41 and PR nordtheme/jetbrains#42.

Nord Emacs

Status: Completed ✓

All implementation details and requirements are documented in the corresponding issue nordtheme/emacs#73 and PR nordtheme/emacs#74.

Nord Gedit

Status: Completed ✓

All implementation details and requirements are documented in the corresponding issue nordtheme/gedit#13 and PR nordtheme/gedit#14.

Nord Atom Syntax

Status: Completed ✓

All implementation details and requirements are documented in the corresponding issue nordtheme/atom-syntax#60 and PR nordtheme/atom-syntax#61.

Nord Sublime Text

Status: Completed ✓

All implementation details and requirements are documented in the corresponding issue nordtheme/sublime-text#18 and PR nordtheme/sublime-text#19.

Nord Xcode

Status: Completed ✓

All implementation details and requirements are documented in the corresponding issue nordtheme/xcode#6 and PR nordtheme/xcode#7.

Nord highlight.js

Status: Completed ✓

All implementation details and requirements are documented in the corresponding issue nordtheme/highlightjs#10 and PR nordtheme/highlightjs#11.

Nord Notepad++

Status: Completed ✓

All implementation details and requirements are documented in the corresponding issue nordtheme/notepadplusplus#5 and PR nordtheme/notepadplusplus#6.

Nord Brackets

Status: Completed ✓

All implementation details and requirements are documented in the corresponding issue nordtheme/brackets#6 and PR nordtheme/brackets#7.

Nord Eclipse Syntax

Status: Completed ✓

All implementation details and requirements are documented in the corresponding issue nordtheme/eclipse-syntax#6 and PR nordtheme/eclipse-syntax#7.

Nord Coda

Status: Completed ✓

All implementation details and requirements are documented in the corresponding issue nordtheme/coda#5 and PR nordtheme/coda#6.

[Alby407]

Has there been any updates on this?

[arcticicestudio]

@Alby407 This is still an important topic (issue has also been pinned), but there are still some more important tasks like the documentation and assets transition to Nord Docs. As soon as all port project transitions have been completed the initial website launch has been completed there's finally time again to work on the 400+ open issues and PRs of Nord 😆
Since this is a highly requested improvement it'll be processed first to get this done for all affected port projects.

[MarioRicalde]

This is really a massive issue in my book. It's a big usability issue.

[arcticicestudio]

The original design decision was to help the user to focus on the code while metadata stays out of the way.
The comment color was chosen due to the palettes scope, but while using it on my own I've also noticed that the color is often too blurred with the background making it hard to read. In the end I've to admit that it wasn't a clever decision and that's the reason this will be improved in retrospect, but it will take some time to make it the default for all port projects. Some ports like for Vim, Atom and Emacs already include a option to allow users to customize the comment color by increment the contrast up to 15%, but there are many ports left untouched.

I decided to increase the priority (see edited comment above) and will start to implement the changes as of today. The order will be the same like the order on the ports page which is sorted by GitHub stars. This reflects which ports are used the most so these will need to be updated first.

[arcticicestudio]

The implementation for Nord Vim is completed and has been 🚀 deployed in release version 🏷 0.10.0

[ghost]

@arcticicestudio for ports without this feature (gnome-terminal, gedit, etc), would changing nord3 value from default #4c566a to #616e88 (10% increase) be the best option to match VIM for example?

[arcticicestudio]

@duhok1 Ports for any terminal, like e.g. GNOME Terminal, won't be changed at all since they are not responsible for syntax highlighting.All they do is providing the value for the color that stands for the available colors 0-15.

Note that this will not affect Nord itself, the color palette won't change. It'll be changed in the documentation and style guidelines and only adjusted within each port project. nord3 is good as it is and still works fine for all UI projects!

Terminal ports have nothing but the colors while the highlighting is handled by the app that runs within the terminal like Vim or Emacs. The color for such ports like Vim and EMacs will be adjusted since they are providing a explicit definition for comments.

[arcticicestudio]

The implementation for Nord Visual Studio Code is completed and has been 🚀 deployed in release version 🏷 0.8.0

[arcticicestudio]

The implementation for Nord Jetbrains Editor is completed and has been 🚀 deployed in release version 🏷 0.4.0

[arcticicestudio]

The implementation for Nord Emacs is completed and has been 🚀 deployed in release version 🏷 0.4.0

[rodrigoalcarazdelaosa]

Why don't you check contrast with a tool such as colorable? I'm using the latest version of the highlight nord theme and the comment color still has very poor contrast

[arcticicestudio]

[...] the highlight nord theme [...]

This repository “only“ contains the colors and palettes of Nord while each port lives in its own repository.
Like described above…

Note that this will not affect Nord itself, the color palette won't change. It'll be changed in the documentation and style guidelines and only adjusted for port projects that define syntactic rules for comments. nord3 is good as it is and still works fine for all UI projects!

…the sources in this repository won't change at all. Since this issue is still open there are still ports that require this change so maybe that's why you're still seeing the original nord3 color.

Regarding calculated colors with tools like colorable:
If we'd live in a world that requires perfectionism this would be the optimal solution, but then themes wouldn't exist at all because everyone would use just a single style that consists only of colors with the best values in all rating categories. This is not a desirable state.
Everyone will always choose the theme which corresponds to personal preferences and not because an algorithm says it is best for you. Next to this the less bright comment color was a conscious design decision and is also clearly communicated as a theme feature like e.g. presented on the website of Nord Visual Studio Code:

Comments and reference documentations are intentionally inconspicuous and less disturbing in order to keep the focus on the important elements: the source code.

Don't get me wrong here: This issue only exists because nord3 was not fitting quite well for syntax highlighting purposes and was changed because of the high amount of user requests. The new comment color is 10% brighter and can now be clearly distinguished from the background. Changing the color(s) to only fulfill some algorithms instead of bringing in “a healthy portion of visual variety“ would just show that we are more of a machine than a human.

By the way, the link you posted uses nord3 as comment color instead of the new value #616e88. Maybe try it with the correct value and see if it still doesn't fit your needs.

[rodrigoalcarazdelaosa]

Thanks a lot for your reply. I really like Nord and was actually thinking about adapting my website colors to it. I use Textmate as my text editor and found this port, which doesn't have that color change for sure. It just struck me that the comment color had so poor contrast (also when using the highlight.js port, which has already been updated). I admit I may be a color freak (so much so I did a PhD partly in it) and that's why I just wanted to know the reason for choosing such an (intentionally) inconspicuous color.

Thanks again, looking forward for documentation updates and hopefully one for adapting websites to it 😉.

[arcticicestudio]

I also think that such tools are great when it comes to supporting accessibility, but there are also use cases when they are not necessary or at least you don't have to base your action entirely on it like in this case the overall “authentic appearance“ of a theme. I also hold on to my opinion because there are “limits“ when it comes to accessibility for themes like syntax highlighting, e.g. a person with severely impaired eyesight would never actually search for “authentic“ themes but instead make sure that there is a “high contrast“ mode or theme instead. Such persons wouldn't really mind about nice colors and themes like Nord are not a option for them at all.
Ah, and by the way: Thanks for mentioning colorable, looks like a great web app that is way more advanced and usable than some of the old W3 test sites 😄

Also the progress for port projects in this issue is of course only scoped to official ports while the one you linked is a community created project. I've quickly imported the theme into the TM editor web app and it looks like the master branch actually uses the brightened comment color #616e88.

You're absolutely right about Nords documentations, the brightened color is currently not mentioned at all in the the paragraph about nord3. This is also another important task and its progress will be tracked in this issue.

[paaguti]

Hi

this discussion predates my using nord-theme. However, I'd like to share my personal settings for comments and emacs-lisp documentation strings. I'm using 'tan' for comments and a dark cyan for the documentation strings because the dim grayish colours used by default hide comments too much. For me they are an essential part of code and I need them ;-)

A small screenshot:

Best, /PA

[sharpenedblade]

I think this issue should be closed. The new brightness is implemented in all syntax/editor projects. The only thing left is to update the docs about nord3. Do you need a PR for that, or is it waiting for something.