Free Tool

Accessibility Checker

Check your Squarespace site's accessibility and get actionable fixes

Why this matters

One in four adults has a disability. If your website isn't accessible, you're not just leaving money on the table — you could be facing legal issues. This tool checks your color contrast and walks you through the most important accessibility fixes for Squarespace.

Color Contrast Checker

Test foreground and background color combinations against WCAG 2.1 contrast requirements.

Sample Heading Text

This is how your body text will look with these colors.

Small text / captions at 12px

12.63:1
Contrast Ratio
AA Normal Text
Requires 4.5:1
✓ Pass
AA Large Text
Requires 3:1
✓ Pass
AAA Normal Text
Requires 7:1
✓ Pass
AAA Large Text
Requires 4.5:1
✓ Pass
CSS for Squarespace
/* Squarespace Custom CSS */ /* Paste in Design > Custom CSS */ /* Override text color for contrast */ body, .sqs-block-content, p { color: #333333; } /* Override background if needed */ .page-section, .content-wrapper { background-color: #ffffff; }

Accessibility Checklist

Work through each item and check it off. Every item includes Squarespace-specific instructions.

0 of 22 items checked0%

🖼Images0/3

All images have alt text
Every informative image must have a descriptive alt attribute so screen readers can convey the content to users who cannot see the image.
Decorative images have empty alt=""
Purely decorative images (borders, spacers, background textures) should have an empty alt attribute so screen readers skip them entirely.
Images of text are avoided
Text rendered inside images cannot be resized, translated, or read by screen readers. Use real HTML text whenever possible.

🧭Navigation0/4

Skip to content link exists
A "Skip to main content" link at the top of the page lets keyboard users bypass the navigation and jump straight to the page content.
Keyboard navigation works (Tab order)
All interactive elements (links, buttons, form fields) must be reachable and operable using only the keyboard, in a logical order.
Focus states are visible
When a user tabs to an interactive element, it must have a visible outline or highlight so they know where they are on the page.
Mobile menu is keyboard accessible
The mobile hamburger menu must be operable via keyboard: openable, navigable, and closable with Tab, Enter, and Escape keys.

AaTypography0/4

Body text is at least 16px
Text smaller than 16px is difficult to read on mobile devices and may cause browsers to zoom in on form fields, disrupting the layout.
Line height is at least 1.5
Adequate line spacing makes text easier to read, especially for users with dyslexia or visual impairments.
Color is not the only way to convey information
Links, errors, required fields, and status indicators should use additional cues like underlines, icons, or text labels alongside color changes.
Links are distinguishable from body text
Links must be visually distinct from surrounding text through underlines, weight changes, or other non-color cues.

📝Forms0/4

All form fields have labels
Every input, select, and textarea must have a visible, associated label so screen readers can announce what the field is for.
Required fields are marked
Required fields must be clearly indicated both visually and programmatically (using the required attribute and a visual indicator like an asterisk).
Error messages are descriptive
Error messages should clearly explain what went wrong and how to fix it, not just "Invalid input." They should be programmatically associated with the relevant field.
Form has proper tab order
Users should be able to Tab through form fields in a logical order (typically top to bottom, left to right) without jumping around.

🏗Structure0/4

Only one H1 per page
Each page should have exactly one H1 heading that describes the page's main topic. Multiple H1s confuse screen readers and dilute SEO.
Headings are in logical order
Headings must follow a sequential hierarchy (H1 > H2 > H3). Never skip levels (e.g., H1 directly to H3) as screen reader users navigate by heading level.
Page has a descriptive title
The page <title> should be unique, descriptive, and follow a consistent format like "Page Name | Site Name."
Language is set on the html element
The <html> tag must have a lang attribute (e.g., lang="en") so screen readers pronounce text correctly and browsers can offer translation.

🎬Media0/3

Videos have captions
All video content must have synchronized captions for deaf and hard-of-hearing users, and for anyone watching without sound.
Audio has transcripts
Provide a text transcript for any audio content (podcasts, audio clips) so the content is accessible to deaf users and searchable by everyone.
Autoplay is disabled
Auto-playing media disrupts screen readers, startles users, and wastes bandwidth. Media should only play when the user explicitly activates it.
Generates a .txt report with all results and fix instructions for failing items.