A practical checklist for shop owners
Review product images and color contrast in WooCommerce.
Work through a live product page, make each check in the WordPress editor, and return to the storefront to confirm your changes. Repeat for every product and gallery image you publish.
Completing this checklist does not guarantee legal compliance or prove that a shop conforms to WCAG or any accessibility law.
Product image alternatives
Give each useful product view its own shopper-focused description.
Review the featured image and every image in the product gallery. A shopper should get the same useful product information from the image alternative that a sighted shopper gets from looking at the image.
- Open the live product page. Compare the main image and each gallery image with the nearby product name, short description, and specifications. Note what each view adds: for example, a different angle, close-up detail, included parts, or a size comparison. Review the actual published gallery, not only the editor preview.
- Decide whether each image adds information. For an informative image, describe the visible, shopper-relevant detail. Give distinct gallery views distinct alternatives; do not repeat one generic product name for every view. If an image is decorative or repeats information already given nearby, leave its alternative text empty so assistive technology can skip it.
- Review the WordPress media alternative. In WordPress, open Products → All Products, edit the product, and check its Product image and Product gallery. Open each file from the media picker or Media → Library, then review the Alt Text field. If your theme or gallery extension has a separate alternative-text field, review that too.
- Correct, save, and recheck. Write an accurate alternative for each informative view or clear the field for a decorative or redundant image. Update the product, refresh the live page, and review each image again. If the live gallery still uses old or different text, check the product editor, theme, or gallery extension for an override before marking the item as passed.
Pass
Every informative image has an accurate, useful alternative; distinct views are described distinctly; decorative or redundant images have an empty alternative; and you confirmed the saved result on the live product page.
Review
An image is missing an alternative, uses a filename or vague product name, repeats another view, has a description that does not match what shoppers see, or still announces unexpected text. Record the product and image, correct it, then repeat the live-page check.
Color contrast
Check the colors shoppers actually see.
Review a published product page at normal zoom. Compare the foreground and background for each text or visual cue; theme palette names alone do not tell you whether a particular pairing passes.
- Make a list of the page elements to inspect. Include product copy, prices and sale prices, labels, links, buttons, variation names and selected or unselected indicators, and any text placed over a product photo. Include important boundaries or icons that tell shoppers where a control is or what state it is in.
- Measure each actual color pair. Use a contrast checker with the rendered text or cue color and its actual background color. For text over a photo, gradient, or changing image, check every area behind the text and inspect the live page at desktop and mobile sizes. Check normal, hover, keyboard-focus, selected, and other states shoppers need to distinguish.
- Compare the result with WCAG 2.2 AA. Normal text needs at least 4.5:1. Large text needs at least 3:1; large means 24 CSS pixels or larger at regular weight, or about 19 CSS pixels or larger when bold. Visual information needed to identify a control or its state, and meaningful graphical cues, needs at least 3:1 against adjacent colors.
- Fix the pair and retest it. Adjust the text or background color in your theme, product template, block, or button settings. For text over a photo, choose a clearer text color or add a solid or sufficiently opaque background behind the text. Make sure selection is not communicated by color alone. Save, reload the storefront, measure the same pair and state again, then check other pages that use the shared style.
Pass
Every text pair meets its applicable ratio, and each necessary control or graphical cue meets 3:1 against adjacent colors in the states and sizes you checked.
Review
A pair is below its threshold, changes across an image or state, is hard to measure, or a variation choice depends on color alone. Record the product, item, state, and ratio; correct the style and measure it again on the live page.