6

On other StachExchange sites, you can easily see the Quoted blocks in posts. But on this site they are, because of the white background, hardly visible.

Maybe it should be considered to give them a more darker gray background.

  • 1
    Seems like a similar question to Where did OP background color go? except that I think the quoted code blocks are set to the (marginally) lighter F3F3F£, rather than F6 – GAThrawn Jun 25 '12 at 9:41
2

I do agree that a little improvement needs to be performed on some of the lightest grey's used.

I mainly use Firefox 13.0.1 under Ubuntu 12.04, and with my recently acquired ASUS VE228 LED Monitor, I have some trouble recognizing some of the lightest grey colors currently being used.


Light background colours used:

Using Firebug, I've analyzed and collected some information regarding tags or classes that apply a light grey as a background color for a visual representation:

  1. #F4F4F4 is hard to see

    • .post-tag class currently using #F4F4F4

      This class is used on on regular tags.

      e.g.,

  2. #F3F3F3 is hard to see

    • code tag currently using #F3F3F3

      This tag is used on inline code, when we wrap something around a `.

      e.g., I'm inline highlighted code

    • pre tag currently using #F3F3F3

      This tag is used when we either press ctrl + k or use the toolbar button toolbar button for code format.

      e.g.,

      I'm a code block
      
  3. #F6F6F6 is hard to see, with considerations

    • .owner class currently using #F6F6F6

      This class is used for the background of a users signature.

      Note:
      Since the rectangle for a user signature has a respectable size, it's easier to notice the color difference between the white background and the signature background.

  4. #EEEEEE works very well

    • blockquote tag currently using #EEEEEE

      This tag is used when we either press ctrl + q or use the toolbar button enter image description here.

      e.g.,

      I'm a quote block


Tests performed

In order to properly understand if this was an issue of my newly acquired monitor, or a overall situation, I've performed some tests (opening and navigating the http://meta.android.stackexchange.com page) using difference OS’s and monitors. Here's the conclusions:

Windows XP Professional Version 2002 SP3 | ASUS VE228 LED Monitor

Browsers used:

  • Firefox 3.6.16
  • Opera 12.00
  • Internet Explorer 8 (8.0.6001.18702)
  • Google Chrome 20.0.1132.57 m
  • Safari 5.1.2 (7534.52.7)

Result obtained: equal results on all browsers

  1. #F4F4F4 is hard to see
  2. #F3F3F3 is hard to see
  3. #F6F6F6 is hard to see, with considerations
  4. #EEEEEE works very well

My conclusion for the tests performed is that under optimal color calibration conditions, the light grey's used are hard to distinguish from the white background. It gets really hard when we're reading a paragraph with some inline code, because at first glance I can't spot it.

The code-block fails only if we are reading a single line of code. When two or more lines are used, it is reasonable visible, just like the background color for the user signature.

Windows 7 Home Edition SP1 | Toshiba Laptop - Satellite C660 (built-in monitor)

Browsers used:

  • Firefox 13.0.1
  • Opera 11.64
  • Internet Explorer 9 (9.0.8112.16421IC)
  • Google Chrome 20.0.1132.57 m
  • Safari 5.1.4 (7534.54.16)

Result obtained: equal results on all browsers

  1. #F4F4F4 works well with any brightness level
  2. #F3F3F3 works well with any brightness level
  3. #F6F6F6 works well with any brightness level
  4. #EEEEEE works very well with any brightness level

My Toshiba doesn't have any color calibration applied, since I don't perform any graphical design with it. The sole purpose for this laptop is the test of work being developed, just like a client would see it, so, everything is by default across the system.

Here, It appears to work well on all browsers on all colors tested. Naturally that the light grey is more like a blueish color than actually a tone from black-to-white. So I can't really rely on this as to a positive assessment, I'll consider it a false-positive.


Conclusion

Every grey color currently used below the tone provided by #EEEEEE can't stand out if used on small areas. Some improvements are noted if used of considerably large areas.

The #EEEEEE works well for calibrated an non calibrated working environments.


Proposal

Have the following colors updated to a slightly dark tone:

  1. #F4F4F4 to #E8E8E8
  2. #F3F3F3 to #E5E5E5
  3. #F6F6F6 to #E8E8E8

This assessment was performed with a Linux tool called Agave. I've used the tool color piker and picked the colors from examples provided on this answer. Then, I've lowered the tone by one, and the result provided was far more visible then the one picked.

Grey Colors Side By Side

HTML color code is placed on the lower right side of the color rectangle

Using Agave color picker on this image, I did get the correct code for each rectangle picked. There seems to be no distinction between the colors in use or proposed colors when placed side by side respectively. All three used colors side by side are visually equal. Same goes for the ones suggested.

As a side note: one may consider using just one color to replace the three being used.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .