Text with low color contrast on Elementor
What this is
3 pieces of text are hard to read against their background. People with low vision or color blindness, or anyone in bright sunlight, may not be able to read it.
Who it affects
- People with low vision
- People with color blindness
Standards
How to fix it
- Make the text darker (on light backgrounds) or lighter (on dark ones) until the ratio is at least 4.5:1 – or 3:1 for large text (24px, or 19px bold).
- Use a contrast checker to pick the nearest passing color.
- Or adjust the background color instead.
- Change the color once in your theme/CSS variable so every use is fixed together.
On Elementor
Site Settings → Global Colors, or select the widget → Style → Typography/Text Color. Fixing the global color fixes every use.
Other platforms
Prompt for an AI coding tool
Scan your site with AccessibilityBrief and you get a ready-to-use prompt for this problem, with the exact elements on your pages filled in.
Check your own website
Paste a web address. The free scan checks one page and shows what it finds.
More fixes
Automated testing detects only a portion of WCAG issues. Manual testing is required to assess full conformance.