Ensure Readable Contrast - GoDaddy

Ensure Readable Contrast in GoDaddy Website Builder

1. Open your site in GoDaddy Website Builder and navigate to the page you want to adjust.
2. Select the first text element (heading, paragraph, button label, link, or form field text). The right-hand settings panel will appear.
3. Open the Design or Color section of the settings panel.
4. Check the current text and background colors. Ensure they meet WCAG contrast requirements:
   • Normal text: at least 4.5:1
   • Large text (18px+ or 14px bold): at least 3:1
   • Button text and icon-based controls: at least 3:1
5. If contrast is too low, adjust one or both colors:
   • Increase text contrast by darkening or lightening the text color using the color picker.
   • Change the section background to a stronger color for improved readability.
   • For text over images, apply or increase a background overlay so text stands out clearly.
6. Check Headings (H1–H6):
   • Select each heading → adjust color in Design.
   • Ensure headings remain highly readable against the background.
7. Review Buttons:
   • Select a button → open Design.
   • Ensure the contrast between button text and button background is strong enough.
   • Check hover and focus states as well.
8. Check Icons used for navigation or actions:
   • Select the icon block → open Design.
   • Adjust the icon color or add a background highlight to maintain a 3:1 contrast ratio.
9. Review Form fields:
   • Select the form → click individual fields.
   • Ensure label text, input text, and placeholder text have adequate contrast.
   • Check the focus border color for visibility.
10. If using site-wide Theme Colors:
    • Open the site's global theme settings.
    • Adjust the primary, secondary, and background color sets for consistent contrast across all pages.
11. Switch to Mobile view:
    • Confirm text over images or gradients remains readable on smaller screens.
    • Adjust mobile-specific colors if needed.
12. Use Preview mode to scan the page and visually confirm all text and controls meet readable contrast standards.
13. Publish your changes to apply improved contrast to the live site.