Anybody know what's causing the varying color in black background on the website here?

The site has been fine, for a while it isn't as of recent that this has started appearing, there haven't been any updates made to the site at all.

https://thevisualpharmacy.com/contact-us
https://thevisualpharmacy.com/graphic-design-blog
 

Banding can be seen on these pages as well, feels pretty random.

I checked out the pages, and it sounds like you’re noticing some banding issues on the black backgrounds. Banding is when a gradient doesn’t appear smooth, and it can happen even if the color values are technically correct. It might be due to how the images or backgrounds are being compressed or the color depth being used.

If the site hasn’t been updated recently, it might be related to how different devices or screens are rendering the colors or even a subtle change in how the background is being displayed due to browser updates.

1. Check Image Compression:

• Squarespace Compression: Squarespace compresses images automatically to make the site load faster. Sometimes, this compression can cause artifacts or banding, even on flat, solid-color backgrounds.

• Upload Higher Quality Images: If the black background is an image, try uploading a higher-quality version with minimal compression. PNG files are generally better than JPEGs for solid colors since they handle compression better and avoid artifacts.

2. Use a Solid Color Background:

• Set Solid Color in Squarespace: Instead of using an image for the black background, use Squarespace’s built-in option to set a solid color background. Go to Design > Site Styles and set the background to pure black (#000000). This ensures there’s no compression or artifact issues.

3. Check for Overlays or Transparency:

• Remove Overlays: Ensure there are no overlays or transparency settings applied to the background. Sometimes, a slight transparency can cause variations in color.

• Background Block Settings: If the black background is part of a content block, check the block settings to make sure there’s no color overlay or transparency applied. Adjust or remove any settings that might be affecting the solid black color.

4. Clear Cache and Test on Different Devices:

• Clear Browser Cache: Sometimes, cached versions of the site might be causing visual issues. Clear your browser cache and reload the page to see if the banding disappears.

• Test on Different Devices: View the site on different devices and screens. The banding might appear differently depending on the screen quality or device, so it’s good to see how it looks across multiple devices.

5. Check Monitor Calibration:

• Monitor Settings: Sometimes, the issue isn’t with the site but with the monitor’s calibration. Ensure that your monitor is properly calibrated, as poor calibration can cause colors, especially dark ones, to appear uneven.

----------------------------------------

To be honest I didn't notice anything, even after deep examination and with different browsers and devices!

If you need more help or want to dig deeper, let me know!

Best Regards,