[Accessibility] Desktop header cart count fails contrast requirements due to opacity (WCAG 2.1 SC 1.4.3)

[robcmcdowall]

Prerequisites

• I have deactivated other plugins and themes and confirmed this bug occurs when only WooCommerce + Storefront theme are active.
• I can reproduce this bug consistently using the steps below.

Describe the bug

The desktop header cart item count is styled with reduced opacity:

@media (min-width: 768px) {
	.site-header-cart .cart-contents .count {
		font-weight: 400;
		opacity: .5;
		font-size: .875em;
	}
}

The base text colour is #333333 and the background colour is #ffffff.

Applying opacity: .5 (rendered by the browser as #33333380) results in an effective visual foreground colour of #999999 when displayed on a white background (calculated with the TPGi Colour Contrast Analyser).

This reduces the contrast ratio to 2.84:1, which is below the minimum contrast requirement of WCAG SC 1.4.3: Contrast (Minimum), 4.5:1 for normal text. This requirement is unchanged in WCAG 2.2:

WebAim Contrast Checker Report for #999999

This styling is applied:

• When the cart is empty
• When the cart contains one or more items

The cart count communicates the number of items currently in the cart and is necessary for users to understand cart state. As functional text, it must meet minimum contrast requirements under WCAG SC 1.4.3.

Screenshots

The screenshots below show the issue in both empty and populated cart states:

Expected behavior

The cart count text should maintain a contrast ratio of at least 4.5:1 between background and foreground to ensure legibility.

To Reproduce

Steps to reproduce the behavior:

1. Install WordPress locally (clean install).
2. Install and activate Storefront and WooCommerce.
3. Import sample products.
4. Observe the header cart count:

• Before adding items (empty cart)
• After adding one or more items

5. Inspect .site-header-cart .cart-contents .count and note opacity: .5.
6. Check computed contrast against the background using a contrast evaluation tool.

Recommendation

Remove the opacity: .5 declaration so the cart count text is fully opaque, ensuring it meets WCAG SC 1.4.3: Contrast (Minimum).

Browser Environment

• Firefox Developer Edition 149.0b1 (Windows 11 Home)
• Firefox 148.0 (Windows 11 Home)
• Chrome 145.0.7632.117 (Windows 11 Home)
• Microsoft Edge 145.0.3800.70 (Windows 11 Home)

WordPress Environment

System Status Report

### WordPress Environment ###

WordPress address (URL): [Redacted]
Site address (URL): [Redacted]
WC Version: 10.5.2
Legacy REST API Package Version: The Legacy REST API plugin is not installed on this site.
Action Scheduler Version: ✔ 3.9.3
Log Directory Writable: ✔
WP Version: 6.9.1
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: –
WP Cron: ✔
WP Environment Type: local
Language: en_GB
External object cache: –

### Server Environment ###

Server Info: nginx/1.26.1
Server Architecture: Windows NT 10.0 AMD64
PHP Version: 8.4.4
PHP Post Max Size: 1,000 MB
PHP Time Limit: 1200
PHP Max Input Vars: 4000
cURL Version: 8.10.1
OpenSSL/3.0.15

SUHOSIN Installed: –
MySQL Version: 8.0.16
Max Upload Size: 300 MB
Default Timezone is UTC: ✔
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔

### Database ###

[REDACTED]

### Post Type Counts ###

attachment: 23
customize_changeset: 1
page: 7
post: 2
product: 22
product_variation: 7
revision: 1
wp_navigation: 1

### Security ###

Secure connection (HTTPS): ❌
					Your store is not using HTTPS. Learn more about HTTPS and SSL Certificates.
Hide errors from visitors: ✔

### Active Plugins (1) ###

WooCommerce: by Automattic – 10.5.2

### Inactive Plugins (0) ###


### Settings ###

Legacy API Enabled: –
Force SSL: –
Currency: GBP (£)
Currency Position: left
Thousand Separator: ,
Decimal Separator: .
Number of Decimals: 2
Taxonomies: Product Types: external (external)
grouped (grouped)
simple (simple)
variable (variable)

Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog)
exclude-from-search (exclude-from-search)
featured (featured)
outofstock (outofstock)
rated-1 (rated-1)
rated-2 (rated-2)
rated-3 (rated-3)
rated-4 (rated-4)
rated-5 (rated-5)

Connected to WooCommerce.com: –
Enforce Approved Product Download Directories: ✔
HPOS feature enabled: ✔
Order datastore: Automattic\WooCommerce\Internal\DataStores\Orders\OrdersTableDataStore
HPOS data sync enabled: –
Enabled Features: analytics
marketplace
order_attribution
site_visibility_badge
remote_logging
email_improvements
blueprint
point_of_sale
custom_order_tables


### Logging ###

Enabled: ✔
Handler: Automattic\WooCommerce\Internal\Admin\Logging\LogHandlerFileV2
Retention period: 30 days
Level threshold: –
Log directory size: 9 KB

### WC Pages ###

Shop base: #7 - /shop/
Basket: #8 - /cart/ -  Contains the woocommerce/cart block
Checkout: #9 - /checkout/ -  Contains the woocommerce/checkout block
My account: #10 - /my-account/ -  Contains the [woocommerce_my_account] shortcode
Terms and conditions: ❌ Page not set

### Theme ###

Name: Storefront
Version: 4.6.2
Author URL: https://woocommerce.com/
Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build
personally we recommend using a child theme. See: How to create a child theme

Theme type: Classic theme
WooCommerce Support: ✔

### Templates ###

Overrides: –

### Admin ###

Enabled Features: activity-panels
analytics
analytics-scheduled-import
product-block-editor
experimental-iapi-mini-cart
coupons
core-profiler
customize-store
customer-effort-score-tracks
import-products-task
experimental-fashion-sample-products
shipping-smart-defaults
shipping-setting-tour
homescreen
marketing
mobile-app-banner
onboarding
onboarding-tasks
pattern-toolkit-full-composability
product-custom-fields
remote-inbox-notifications
remote-free-extensions
payment-gateway-suggestions
printful
shipping-label-banner
subscriptions
store-alerts
transient-notices
woo-mobile-welcome
wc-pay-promotion
wc-pay-welcome-page
launch-your-store

Disabled Features: product-data-views
experimental-blocks
experimental-iapi-runtime
coming-soon-newsletter-template
minified-js
product-pre-publish-modal
products-catalog-api
settings
async-product-editor-category-field
product-editor-template-system
use-wp-horizon
rest-api-v4

Daily Cron: ❌ Not scheduled
Options: ✔
Notes: 60
Onboarding: completed

### Action Scheduler ###

Complete: 110
Oldest: 2026-02-27 08:35:23 +0000
Newest: 2026-03-01 12:20:26 +0000

Pending: 15
Oldest: 2026-03-01 13:08:30 +0000
Newest: 2026-03-15 08:18:55 +0000

Failed: 2
Oldest: 2026-02-27 08:48:02 +0000
Newest: 2026-02-27 09:32:33 +0000

Canceled: 2
Oldest: 2026-02-27 08:36:48 +0000
Newest: -0001-11-29 23:58:45 -0001


### Status report information ###

Generated at: 2026-03-01 13:09:32 +00:00