Suggestion of dark grey instead of black font for responsive_classic template text

I've recently updated to v2.1.0 (https://www.proteawines.jp) and am implementing minor style changes, one of which was to change the default black text and headings of the responsive_classic template (more accurately, my custom version based on it) to various shades of dark grey.
This is easier on the eyes in my opinion, and I understand it seems to be a common suggestion for digital media to avoid pure black.
The experimental values I am currently using:
(1) text: #1D1D38
(2) headings and other items with more "ink": #333333 (slightly lighter, to offset the heaviness)

I don't know what changes are already intended for the responsive_classic template, but perhaps this idea might be useful in future, choosing various warm, neutral, or cool greys appropriately.

#1D1D38 is far from gray. It's primarily blue. If you are speaking of gray on a white (#FFFFFF) background, anything less than or equal to #595959 will work and maintain advanced contrast (AAA).

You need to watch out on your a links. Using #767676 for hover on a #FFFFFF background is not a good contrast for smaller text. Nor is the #666666 used in the footer link.

I'm not sure what other changes you've made to the template, but I doubt the actions of your .site-title are standard. It's already difficult to read with the image background but, when you hover over it, the opacity makes it even more difficult.

Hello @dbltoe,
Thanks for the feedback, I will make changes as recommended to improve contrast. WIP.

Hello @dbltoe,
Can you advise what you mean with .site-title please?
I have searched for this string and have been unable to find it. Not sure what element/image/text you are referring to, and would like to fix it.

.site-title is the classx given to the title at the top of your page.

Opacity is actually working against you in this case.

The title and especially it's .site-description are already difficult to read as they are on top of the vineyard image. The legibility is made more difficult when hover invokes an opacity to the .site-title class. Since the CAPE selection image is wrapped in a similiar a tag, it has the same result on hover.

I'm not sure which opacity line is affecting the .site-title. It could be the overall opacity for .site-branding on line 1657 of the stylesheet.

There's a static opacity of 0.8 applied to the .site-description at line 1697.

There are other ways of using images, text, and opacity. i.e., https://alsjerky.com/index.php?main_page=product_info&cPath=67&products_id=207.

The use of an opaque background for the text over an image is a simple way to ensure legibility.

Hello @dbltoe,
I understand. My apology, I mistakenly put the main site link as my site URL, which is actually a Wordpress site with a standard Wordpress template you rightly pointed out might need some customization (none done at the moment) to correct various issues.
The Zencart shop is at https://www.proteawines.jp/shop

Got it.

Some good directions at https://docs.zen-cart.com/user/accessibility/tools/siteimprove/

Product by browser available at https://www.siteimprove.com/integrations/browser-extensions/

Sites with A failures are ripe fruit for the new internet favorite of lawsuits for accessibility.

AA rankings are next and AAA are things that any e-commerce site should try to accomplish simply to make it easier for their customers.

Using the Siteimprove addon, we find one A failure on your site. And, as often happens, the problem is with the inclusion of the letsencrypt info in your footer. Today's browser will warn or even block a site without a current SSL certificate, so the link is really not needed. Also, you site does not qualify for the CSS badge (22 errors). Personally, I don't recommend that or the HTML badge as they can easily be unvalidated with one stray character.

AA failures on your site are for element size and contrast. Both are critical to staying off the lawsuit list.

I'm not sure what slider you are using but the dots at the bottom of the slider are not given enough space for someone to select them. Especially on a mobile. To meet AA standards, the 8 x 8 setting should be at least 24 x 24. For best practices, the size should be 44 x 44. Those settings are minimums.

Your AA contrast problems are in your footer where you have a background of #C0C0C0 and a foreground of #364FB5. That's a contrast of 3.92:1. In order to meet AA compliance the ratio should be 4.5:1 and AAA should be 7:1. It's often difficult to figure out the right value when you want to keep a particular color. I created a site that can help with this (click on a little help with colors in my sig). Keeping the #C0C0C0 background, the foreground is displayed for all ratios.

[Attachment no longer available][Attachment no longer available]

Likewise, all of your product numbers in the Category sidebox are set for a #FFFFFF background with a #666666 text color. Using the same generator, you would need to be at least #6E28DC to meet AAA standards. It may look fine on a desktop but, when you get to mobile, the numbers are small. If you want to stay with the gray, the Color Contrast Generator is not much help. The Colour Contrast Analyzer is your helper in this case. Synchronizing the colour values starting with #666666, you can click on the red value's round slider and use the arrow keys to reach a valid setting while maintaining a gray look.

[Attachment no longer available]

You'll find both tools very helpful in making your site more accessibie to your users.

Hello @dbltoe
Whew.... thanks! That is quite a bit to go through, but yes, I will give it a shot, make improvements and see what standard I can meet. Slider is the ZX Slideshow v3 plugin. If there are suggestions for something better/newer/easier I am all ears.