Ensure Readable Contrast - Squarespace

Ensure Readable Contrast in Squarespace

1. Open your Squarespace site and navigate to the page you want to adjust, then click Edit to activate inline editing.
2. Select a text element (paragraph, heading, button, or link) and click Edit to open its text or style controls.
3. Open the Design panel for the block or section containing the text:
   • For text blocks: click Design in the floating toolbar.
   • For buttons: click the button → Edit → Design.
   • For sections: click the section’s Settings → Colors.
4. Check the color pairing:
   • Ensure body text has at least a 4.5:1 contrast ratio.
   • Large text (18px+ or 14px bold) should meet at least a 3:1 contrast ratio.
   • Buttons, links, and icon-based UI elements should also meet 3:1 contrast.
5. Adjust colors as needed:
   • Use the Color Picker to darken text or lighten the background.
   • Or switch the section’s Color Theme to one with stronger contrast.
6. Check headings and accent text:
   • Select each heading level (H1–H4) and confirm its color contrasts well with the section background.
   • Adjust heading colors within the theme’s Site Styles if needed.
7. Review buttons:
   • Select the button → Edit → Design.
   • Ensure the text color and button background maintain readable contrast in both default and hover states.
8. If text sits on an image:
   • Select the section → Background.
   • Add or increase the opacity of an image overlay to strengthen contrast behind text.
9. Switch to Mobile preview:
   • Verify that text remains readable where the layout shifts.
   • Adjust mobile-specific color settings if your template allows.
10. Click Preview and scroll through the entire page to visually confirm all text and UI elements are readable across backgrounds, images, and themes.
11. Save and publish your changes, then check the live site using your browser’s contrast checker to confirm all text meets WCAG contrast requirements.