Skip to main content

Squarespace accessibility: design choices with consequences

Popular with design-led small businesses

Squarespace templates are visually strong and that is precisely the problem: the design decisions that make them look good are often the ones that fail contrast and focus requirements.

What actually breaks on Squarespace

01Light grey body text

Several templates ship with a grey that fails the 4.5:1 minimum. It looks refined and is unreadable for a lot of people.

Where to fix it: Design, Colors, then darken the text colour in each section theme.

02Removed focus outlines

Template CSS often strips focus styling because it interferes with the look, leaving keyboard users unable to see where they are.

Where to fix it: Custom CSS, restore a visible :focus-visible outline.

03Gallery images with no descriptions

Portfolio and gallery blocks accept alt text but rarely get it.

Where to fix it: Each image's settings panel has an alt text field.

04Cover pages with text over imagery

Text laid over a photograph almost never holds contrast across the whole image.

Where to fix it: Add an overlay layer, or move the text off the busiest part of the image.

The encouraging part

Squarespace's section themes mean a corrected colour set applies across the whole site rather than block by block.

Find out which of these apply to you

The scanner detects that you are on Squarespace and writes the repair steps for that setup. Free, about fifteen seconds, no signup.

Scan my page

Other platforms