Ensure Readable Contrast - Wix

Ensure Readable Contrast in Wix

1. Open your site in the Wix Editor and navigate to the page containing the text, buttons, or UI elements you want to check.
2. Select a text element on the canvas (paragraph, heading, button label, or menu item).
3. In the right-hand panel, click Design → Customize Design.
4. Locate the Text Color and verify it has strong contrast against the background behind it.
   • Normal text should meet at least a 4.5:1 contrast ratio.
   • Large text (18px+ or 14px bold+) should meet at least 3:1.
5. If contrast is too low, adjust either the text color or the background color:
   • Change text color using the Color Picker.
   • Or select the element’s background (strip, container, box) and change its Background Color.
6. Repeat steps 2–5 for:
   • Buttons and clickable elements,
   • Navigation links,
   • Form fields and labels,
   • Icons that convey meaning (e.g., arrows, info icons).
7. If text is placed over an image:
   • Select the strip or box → Change Background.
   • Add a semi-transparent overlay under Customize Design → Opacity & Color to increase contrast.
8. Check Hover and Focus states:
   • Select the element → Design → choose Hover or Focus.
   • Ensure text remains readable even when colors change on interaction.
9. Switch to Mobile view and review the same elements. Adjust colors as needed since mobile backgrounds often shift layout.
10. Click Preview and scroll through the page to visually confirm all text is readable on every background.
11. Publish the site and check the live page using your browser’s accessibility or contrast tools to verify that all text meets WCAG contrast requirements.