Ensure Readable Contrast - Elementor

Ensure Readable Contrast in Elementor

1. Open your WordPress dashboard, navigate to the page you want to fix, and click Edit with Elementor.
2. Select the first text element (heading, paragraph, button label, menu item, form field label, or icon label). The Elementor panel will show its settings.
3. Open the Style tab and inspect the Text Color.
4. Compare the text color against its background (solid color, gradient, or image). Ensure it meets WCAG contrast requirements:
   • Normal text: 4.5:1 minimum
   • Large text (18px+ or 14px bold): 3:1 minimum
   • Buttons and UI elements: 3:1 minimum
5. If contrast is too low, adjust one or both colors:
   • Darken or lighten the text color using the color picker.
   • Change the section or column background color via Style → Background.
   • Add or adjust an overlay if text is over an image (Section/Column → Style → Background Overlay).
6. Check Headings (H1–H6) separately:
   • Select each heading widget → Style.
   • Ensure headings maintain strong contrast, especially over images or gradients.
7. Fix Buttons:
   • Select a button → Style → Typography / Background / Border.
   • Ensure contrast between button text and the button background meets the 3:1 minimum, including hover/focus states.
8. Review Icons that convey meaning:
   • Select the icon widget → Style.
   • Ensure the icon color contrasts with its background at or above 3:1.
9. Check Form Fields:
   • Select the Form widget → Style → Fields.
   • Ensure field labels, input text, and placeholder text have adequate contrast.
   • Also check Focus and Hover states for readability.
10. If using Theme Styles (Elementor Global Settings):
    • Go to the left panel → top menu → Site Settings → Typography / Buttons / Backgrounds.
    • Adjust global text and color styles to enforce consistent accessible contrast sitewide.
11. Switch to Tablet and Mobile view using the responsive preview icons:
    • Check backgrounds and overlays—mobile layouts often rearrange elements over images.
    • Adjust mobile-specific colors if needed.
12. Click Update to save.
13. Open the page in a new tab, scroll through it, and use your browser’s built-in contrast checker or an extension like WAVE to verify all elements meet WCAG contrast requirements.