ADA/WCAG Test for 1.5.7c.
Welcome Guest! You are looking at Bootstrap 3.3.0 loaded from the latest download to Zen Cart 1.5.7c with all demo items and features.
This is a "bare-bones" installation with no mods or changes to the template.
We have added our ADA widget. Look for the handicapped symbol in the lower, right-hand corner).
The problems with Bootstrap 3..3.0 Color Contrast are that a lot of the 'a' (link) attributes are overlooked as far as color contrast. A lot of it is just a case of "It's always been that way." With twenty+ years of experience in the area, it's one of the few areas I even attempt to claim expert status.
There are four states a link can be in:
- a:link - a normal, unvisited link.
- a:visited - a link the user has visited.
- a:hover - a link when the user mouses over it.
- a:active - a link the moment it is clicked. (not used in the default 3.3.0)
Each of these (if used at all) will generally use color to identify them to the user. a is often seen without the :link. a:hover especially needs a specific way to notify the user that this is the link they will go to when they click the link. If it is done with colors, the colors must meet a 4.5:1 ratio.
Normally, the colors of the link (if compliant with the minimum 4.5:1 ratio) are simply reversed when the cursor is hovered over the item. So one would expect that, when hovering over Hardware in the above navigation menu, you would get #33B5E5-colored text with a white (#FFFFFF) background. Not the case. In fact, the out-of-the-box colors for the link themselves are not compliant with Color Contrast rules.
The background color should be at least #007FAF to meet the 4.5:1 standard. And, the existing :hover colors do not change the color to even the non-compliant #33B5E5 but, instead, changes the text color to #CCCCCC which results in a 1.6:1 ratio. Just changing those colors removes a large portion of the 147 contrast errors on the main page.
The color change when hovering over the EZPages link is just another example of :hover failing the contrast check.
Understand that these problems have been in code for years as even the most experienced coder cannot keep up with all the many things affecting the validity of a site for html, JavaScript, PHP, jQuery, CSS, ADA, WCAG, etc.
Colors that have been around Zen Cart for years (specifically the red coloring of pricing for Specials) have never been Color Contrast Compliant.
Take the time to run what testers you have or are familiar with to see where the contrast problems are. Some are warnings to check text that is in an image. While they should be checked and fixed as needed, the Contrast errors should be a priority for fixing.
I recommend using ANDI which was developed by the United States Social Security Administration as a testing tool.
You can also use the Free Tools provided by axe. You will need to make an account and do a trial of the commercial version but, it will still work well when it converts to Free.
Yes, I know the Color Contrast is incorrect in the above ANDI and Free Tool links. This site is meant to show what standard formatting will result when using the current (uncorrected) colors.
Let's see what I might have missed so we can further support the Zen Cart community.
dbltoe