Fixing Contrast (Minimum) on Squarespace (WCAG 1.4.3)
Body text needs a contrast ratio of at least 4.5:1 against its background; large text (18.66px bold or 24px regular and above) needs 3:1.
Why it matters
This is the single most common failure on commercial sites, and on a store it lands on the elements that carry money. Sale prices are routinely set in a light grey or a brand accent that fails against white. Placeholder text inside checkout fields fails almost by default. 'Free shipping over €50' banners in thin light type fail. A customer who cannot read the price does not buy, and unlike a broken button this failure is invisible to anyone with normal vision — including the designer who shipped it.
Squarespace — where to look
Site Styles colour themes; section colour theme assignment.
What to do
Squarespace assigns colour themes per section. Fix the theme rather than overriding individual blocks, and re-check every section that uses a different theme.
Verification status
Not yet confirmed against a live installation. The paths and setting names below describe the general structure of Squarespace and menu names vary by version, theme and plugins. Where we have checked a step against the platform's own source, this box says so and links to it.
How to verify the fix
- Sample the foreground and background colours with a colour picker and run the pair through a contrast checker; do not judge by eye.
- Check the price, the sale price, the stock label and the shipping note specifically — these carry the purchase decision.
- For text over imagery, test against the lightest image currently in rotation, not against the design mockup.
- Open a checkout field and read the placeholder against the field background.
Other platforms
- Fixing Contrast (Minimum) on Shopify
- Fixing Contrast (Minimum) on WooCommerce
- Fixing Contrast (Minimum) on Webflow
- Fixing Contrast (Minimum) on Wix
The full criterion
Read the full explanation of WCAG 1.4.3 Contrast (Minimum), or the formal W3C definition.