Colour contrast, font sizing and readability for SEO

If visitors cannot easily read your Wix site, they leave. If they leave quickly, your engagement metrics suffer. If your engagement metrics suffer, your rankings drop. Colour contrast and font sizing are not just accessibility requirements. They are direct SEO performance factors measured through user experience signals.

WCAG Contrast Requirements

• WCAG AA (minimum): 4.5:1 contrast ratio for normal text, 3:1 for large text (18px+ bold or 24px+ regular)
• WCAG AAA (enhanced): 7:1 contrast ratio for normal text, 4.5:1 for large text
• Target WCAG AA as a minimum for all text on your Wix site
• Common failures: light grey text on white background, white text on light-coloured images

Checking Contrast on Your Wix Site

Use the WebAIM Contrast Checker (webaim.org/resources/contrastchecker) to test any colour combination. Enter your text colour and background colour, and it instantly tells you whether you pass WCAG AA and AAA. The axe DevTools extension also flags contrast failures automatically during an accessibility scan.

Font Sizing and Line Height

• Body text: minimum 16px (Wix default). 18px is recommended for better readability.
• Line height: 1.5x the font size for body text (e.g., 16px font = 24px line height)
• Paragraph spacing: at least 1.5x the font size between paragraphs
• Mobile font sizes: never smaller than 14px on mobile. Test on a real device.
• Heading sizes: clear visual hierarchy with at least 20% size difference between heading levels

Complete How-To Guide

This step-by-step guide walks you through auditing every colour combination and font setting on your Wix site, fixing contrast failures, optimising typography for readability, and verifying your changes meet WCAG standards and improve user engagement.

How to fix colour contrast and typography on your Wix site for accessibility and SEO

• Step 1: Document your current colour palette. In the Wix Editor, go to Site Design > Colours. Write down every colour used on your site, including the hex codes for your primary text colour, secondary text colour, heading colour, background colour, link colour, button colour, and button text colour.
• Step 2: Open the WebAIM Contrast Checker (webaim.org/resources/contrastchecker). Test your primary body text colour against your main background colour. Enter the hex codes and check whether the combination passes WCAG AA (4.5:1 ratio for normal text). Record the result.
• Step 3: Repeat the contrast check for every text-background combination on your site. Common combinations to test: heading text on page background, body text on page background, link text on page background, button text on button background, footer text on footer background, text on any coloured section backgrounds, and text overlaid on images.
• Step 4: For any combination that fails WCAG AA, use the contrast checker's built-in suggestions. It will show you the closest colour that passes. Adjust either the text colour (make it darker) or the background colour (make it lighter) until you reach at least a 4.5:1 ratio. For large text (18px bold or 24px regular), the minimum is 3:1.
• Step 5: Update your Wix theme colours. In the Wix Editor, go to Site Design > Colours and update the failing colours to your new WCAG-compliant values. Because Wix uses a theme colour system, changing a colour here updates it across every page that uses that theme colour, saving you from fixing pages individually.
• Step 6: Check text overlaid on images. This is the most commonly failing contrast scenario. Open each page and look for any text placed directly on photographs or gradient backgrounds. Use the Colour Contrast Analyser desktop app (download from The Paciello Group) to sample the actual text colour against the actual background at the darkest and lightest points of the image behind the text.
• Step 7: Fix text-on-image contrast issues in the Wix Editor. Add a semi-transparent dark overlay behind light text (or a light overlay behind dark text) using a Wix strip or container background. Set the overlay opacity high enough that the text-background combination reaches 4.5:1. Alternatively, move the text to a solid-colour panel beside the image.
• Step 8: Audit your font sizes. In the Wix Editor, click on body text on your homepage and check the font size in the text formatting toolbar. Body text should be at least 16px, and 18px is recommended. Check body text on multiple pages, as Wix allows different sizes per text element even within the same template.
• Step 9: Check line height (leading) for all body text. Select body text in the Wix Editor, click the line height option in the text formatting toolbar, and set it to 1.5 (150%). This means 16px text should have 24px line height. Cramped line spacing significantly hurts readability and increases bounce rates.
• Step 10: Set paragraph spacing. In the Wix Editor, click on a text element, then adjust the spacing settings. Set the space after paragraphs to at least 1.5 times the font size (e.g. 24px for 16px text). This visual breathing room makes content scannable and reduces the cognitive load on readers.
• Step 11: Test your mobile typography. Open your Wix site on a real mobile device (or use Chrome DevTools device emulation). Check that no text is smaller than 14px on mobile, that line lengths are comfortable (roughly 40-60 characters per line on mobile), and that there is no horizontal scrolling required to read text.
• Step 12: Run a before-and-after comparison. Check your Google Analytics for the pages where you made contrast and typography changes. After two to four weeks, compare bounce rate, average session duration, and pages per session. Improved readability typically shows measurable improvements in these engagement metrics within the first month.