What this demonstrates


What this site is showing

This is a stock Zen Cart catalog rendered through several templates, so you can see the same store the same way a visitor would – and, more to the point, see what it takes to bring a template up to accessibility standards.

Use View Different Templates in the sidebox to switch. Your choice persists until you reset it.

The comparison

Each ZCA Bootstrap template appears twice:

  • As shipped – byte-for-byte what the template's author distributes. Nothing has been altered.
  • WCAG AAA – the identical template with contrast corrections applied.

The two differ by exactly two files: one stylesheet of colour overrides, and the template's own description. Everything else is identical, so any difference you see is the accessibility work and nothing else.

The homepage of each template carries a table of measured contrast ratios for that template, so the claim is visible rather than asserted.

What the levels mean

WCAG defines three conformance levels, A, AA and AAA. For the contrast of normal-size text against its background:

  • AA requires a ratio of at least 4.5:1
  • AAA requires at least 7:1

Large text has lower thresholds (3:1 and 4.5:1). The figures on each homepage are judged against the stricter normal-text thresholds.

What was changed

The corrected templates carry a single override stylesheet. In summary:

  • The main accent blue moved from #007FAF to #025E8E – 4.51:1 becomes 7.01:1, both as a background behind white text and as link text on white.
  • Body links, breadcrumbs, pagination, category tabs, sidebox links and the search suggestion panel were all brought to 7:1 or better, including their hover states.
  • The add-to-cart green moved from #00C851 to #00680E.
  • Red informational text moved from #FF0000 (4.00:1, which fails even AA) to #B60000 (7.03:1).
  • Sidebox heading bars darkened from #767676 to #585858, because white text was already as light as it can get.

How the figures were produced

Each page and every stylesheet it loads was fetched as a browser would receive it, reassembled in real cascade order, and the CSS custom properties resolved – then each text and background pairing was scored. The numbers are measurements of the live pages, not estimates, and they are regenerated rather than edited by hand.

Honest limitations

Contrast is one part of accessibility, not the whole of it. This demonstration addresses colour contrast only. It does not attempt to certify keyboard navigation, focus order, screen-reader behaviour, form labelling or alternative text.

One element cannot be scored automatically: the lightbox previous/next arrows are white and sit over whatever photograph is on screen. Contrast against imagery has to be judged by eye, or handled with a shadow behind the text.

Responsive Classic, the template Zen Cart itself ships, is included as a point of reference only. No contrast work has been applied to it.