Brand and style guides
Show which brand colour pairs are readable together.
Content / widget · Elementor module
Color Contrast Checker Plugin for Elementor
Let visitors enter or pick two colours and see their WCAG contrast ratio with a pass or fail for each accessibility level.
Included in All AccessClassic Elementor widgetFrom $29 USD / year
Complementor / Color contrast checkerProduct preview
Text, style and layout controls inside Elementor
01 / Interactive demonstration
Check real colour pairs
These are the actual published outputs of the widget: black on white, white on a blue button with pass and fail icons, and the borderline grey #767676 listed against every criterion. Type a colour or use the picker.
02 / Inside WordPress
Colour contrast checker controls in Elementor
Content › Colours sets the starting foreground and background. Behaviour picks the WCAG criterion to report or lists every one. Display sets the sample text, labels, pass and fail words, the messages for missing or unsupported colours, and optional pass and fail icons. The Style tab covers the field layout, input states, ratio typography, result, pass and fail colours, icon size and the sample.
03 / Website use cases
Where to use color contrast checker
Designers, developers and clients often need to know whether two colours are readable together, and leaving your site for a separate tool breaks the flow of a guide or style page. Colour contrast checker computes the WCAG 2.x contrast ratio on your page, never rounds a ratio up past a threshold, and shows which levels pass.
Accessibility articles
Let readers test the colours your guide talks about.
Agency and design sites
Offer a small, useful tool to visitors.
04 / Installation and setup
How to add a contrast checker in Elementor
Start with Complementor installed and your license connected. Enable this module in the WordPress library, then configure it in Elementor.
Install Complementor, connect your license and enable Colour contrast checker in the Complementor library.
Add the widget and set the starting foreground and background colours.
Choose the criterion to report, or list every criterion.
Optionally add sample text and pass and fail icons.
Publish and try other colours on the page.
05 / Content and style controls
Customize color contrast checker in Elementor
Configure the settings available for this module to suit the page you are building.
WCAG 2.x contrast ratio for two opaque colours.
Text fields and colour pickers for both colours.
AA and AAA for normal and large text, plus non-text UI (SC 1.4.11).
Ratios truncated so a colour pair never appears to pass when it misses.
Clear messages for missing or unsupported colours.
Style: fields, input states, ratio, pass and fail colours, icons, sample.
06 / Choose the right approach
Color contrast checker and Elementor alternatives
Compare the existing Elementor workflow with this Complementor module before choosing your setup.
External contrast tools
They work but take visitors away. This keeps the check next to your content.
A screenshot of a result
A static image only covers one pair. Visitors can test their own colours here.
07 / Requirements and compatibility
Color contrast checker compatibility with Elementor
- Requires Elementor.
- Opaque colours only.
- WCAG 2.x ratios, not APCA.
Complementor uses classic Elementor APIs. Atomic-native controls are not implemented. Check your theme, cache and integrations on a staging site before release.
08 / Common setup problems
Troubleshoot color contrast checker
Check these settings if the published page behaves differently from the editor.
Why does it say the colour is unsupported?
Only opaque #rgb, #rrggbb and rgb() values are checked. Transparency, colour names and hsl are not guessed.
Why does 4.49 fail AA?
WCAG thresholds are exact, so the ratio is truncated rather than rounded up to 4.5.
Why is only one criterion listed?
Turn on List every criterion in Behaviour.
Can it check colours on my live page?
No. It checks the two colours entered; it does not scan the page.
Color contrast checker plugin questions
Does it need Elementor Pro?
No. It works with the free version of Elementor.
Which formula does it use?
WCAG 2.x relative luminance and the (L1 + 0.05) / (L2 + 0.05) contrast ratio.
Is it accessible?
Yes. Fields and pickers are labelled, invalid entries are flagged, and results are announced.
Does it support APCA?
No. It reports WCAG 2.x ratios only.
Does it work without JavaScript?
The starting colours are checked on the server; changing them needs JavaScript.
10 / Annual All Access subscription
Get color contrast checker with Complementor
This module is included with all 1007 current Complementor solutions. Choose your production website allowance; every plan includes the same modules.
One website
$29USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $29 USD each year.
A few websites
$49USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $49 USD each year.
More websites
$99USD / year
- All 1007 current modules
- Plugin downloads and updates for one year
- New releases during the paid term
- Product support
Renews at $99 USD each year.
Applicable taxes extra. Annual subscriptions renew automatically unless canceled in your customer account. Elementor Pro is required for Exclude current post. Read the terms and 14-day technical-issue refund policy.