Code Comment Color and Contrast - CSS - in Forum

Posted on
  • I like the code option in forum posts... but the color is so dark, that it is barely readable...

    // comment color is so dark, that it is barely readable...
    /*
      * comment color is so dark, that it is barely readable...
    */
    

    How about to change it to, for example, #C797E7?

    Some UX guru input about suitable color?

    Edited: Conclusion: get a style overwriting plug-in/extension for your browser or just *right-click_inspect** and copy past the following code snippet into the console to get the job done... (for the page you are looking at)

    (function(st){ var rs = document.styleSheets[0].cssRules, i = rs.length; while (i > 0) { i--; if (rs[i].selectorText == st) return rs[i]; } })("pre .com, code .com").style.color="#C797E7";
    

    1 Attachment

    • codecommentcssforumcolor.png
  • Are you using a low-brightness display, or one with brightness and/or contrast adjusted improperly?
    On my screen, the grey is quite visible, but I'm reminded of a while back when I kept complaining about the visibility of this forum (it was on the light end, not the dark, but same sort of thing) where it seemed to be off-white-on-white. And then one day I looked at it from another computer and it was clear as crystal. I was able to get a significant improvement by twiddling contrast and brightness adjusts a bit, and when I finally replaced that monitor, things looked even better.

  • I find the comments also very dark. Not sure I like the purple, but simply a brighter grey may do the trick.

  • I use a calibrated display - and am not aware of any color blindness on my part.

    I notice though that the current coloring trend goes for 'not loud' colors and 'minimal contrast'. Have not much issue for that with backgrounds, lines, icons, additional (visual) information, etc. but with information that has to be readable and matters, i feel it is over-applied. In the US there exists the ADA - Americans with Disabilities Act - which also provides useful resources. I'm aware that sites have different compliance needs. A rule of thumb for contrast is: just slightly squint, and if it disappears (completely), it just does not have enough contrast. It's that simple.

    ...purple was just an option that is distinctive from the other colors used... any color providing the proper contrast 'without yelling' and is clearly different from already used colors is fine with me.

  • The 'dim' comment colors bother me because I see comment as an integral part of the code. Useful comments let me write more concise code and complement it with the 'memory refresher' when 'returning to the code' times after authoring.

    To have some figures, I came across this contrast measurement tool, for which I applied current and suggested colors. Current values for brightness difference, color difference, and overall contrast ratio are 73, 212 and 3.03 with colors not foreground/background compliant. Difference values are only about 50% of level 2 compliance; expected are values >=125 and >=500. Values for Suggested 'purple-ish' color are 135, 468 and 6.38 with sort of foreground/background compliance.

    Having a color difference in addition to brightness difference provides additional contrast support for the eye. The eye's strengths are color in the center and brightness in the periphery.

  • The comments haven't really bothered me personally - and unfortunately because I don't host the forum I don't get to change the CSS myself, so I'd have to get the forum hosts to do it.

    If you don't like the colours, why don't you write a Chrome Extension? I believe it's trivial to make one that would change CSS colours for one specific form of URL, and then you could do whatever you wanted.

    You could even add a 'send to Espruino' button and links to Espruino's reference documentation :)

  • Tried two of the eye-popping tools for Chrome, but could not get them to do what I wanted... I'm sure it is on my part...

    But opening the developer tool (with right-click inspect) and entering (copy-paste) the following code string in the console did the job:

    (function(st){ var rs = document.styleSheets[0].cssRules, i = rs.length; while (i > 0) { i--; if (rs[i].selectorText == st) return rs[i]; } })("pre .com, code .com").style.color="#C797E7";
    
  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview
About

Code Comment Color and Contrast - CSS - in Forum

Posted by Avatar for allObjects @allObjects

Actions