A WordPress Color Contrast Checker Plugin That Works Inside the Block Editor
A designer picks a light gray on white for a caption because it looks clean, and a low-vision reader can’t make out a word of it. Contrast & Color Checker measures every text and background pairing against WCAG 1.4.3 and flags it before the page goes live, not after a complaint arrives.
Contrast Failures Are the Most Common WCAG Violation. They’re Also the Easiest to Miss.
Contrast ratio failures show up on the majority of government and education websites we’ve scanned, usually in places nobody thinks to check: placeholder text, disabled buttons, footer links, and hover states. A color that passes on a designer’s calibrated monitor can fail badly on a phone screen in direct sunlight.
This plugin pairs well with WPPersona's built-in accessibility compliance if your agency runs on the WPPersona CMS, and installs standalone on any WordPress 6.0+ site.
4.5:1
minimum contrast ratio WCAG 1.4.3 requires for normal-size body text at Level AA
What Contrast & Color Checker Actually Checks
Every feature below maps to a specific WCAG 2.1 success criterion, not a vague accessibility claim. Here's exactly what changes on your site.
Real-time editor checking
As an editor sets text or background colors in the block editor, the plugin calculates the contrast ratio live and warns before a failing combination is saved.
Non-text contrast checks
Buttons, form field borders, and icon-only controls are checked against the 3:1 minimum WCAG requires for user interface components, not just body copy.
Site-wide color audit
A full crawl of published pages surfaces every failing color pairing already live on the site, grouped by the theme element or block type causing the failure.
AAA-level flagging
For agencies targeting the stricter 7:1 ratio on key pages, the plugin can flag AA passes that still fall short of AAA, so you know exactly what a higher bar would require.
Theme palette lock
Restrict the color picker to a pre-approved palette where every combination has already been verified, removing the failure at the source instead of catching it after the fact.
From Install to Fixed, in Four Steps
Install and run the first audit
The plugin crawls your published pages and reports every color combination that fails WCAG 1.4.3 or 1.4.11, ranked by how many pages use it.
Fix the theme-level failures first
Most contrast problems trace back to a handful of theme colors. Fixing the palette at the source resolves the majority of flagged instances in one pass.
Turn on live checking
Editors get instant feedback in the block editor going forward, so new contrast failures stop entering the pipeline.
Re-audit after theme updates
Run the site-wide scan again after any theme or design system change, since a single updated color variable can reintroduce failures across dozens of pages.
“Our brand guide had three shades of gray for secondary text. Two of them failed AA. We didn’t know until the audit ran.”
Web Manager, Regional K-12 School District
Common Questions About Contrast & Color Checker
What color contrast ratio does WordPress need for WCAG 2.1 AA?
Normal-size text needs a 4.5:1 ratio against its background. Large text, defined as 18pt or 14pt bold and above, needs 3:1. User interface components like button borders and form field outlines also need 3:1 under WCAG 1.4.11.
Can this plugin fix contrast failures automatically?
It can suggest the nearest passing shade of your existing brand color and apply it with one click, but it won’t silently overwrite your palette. A person confirms the change, since brand color decisions usually involve more than the math.
Does this check images with text in them?
The plugin checks CSS-rendered text and UI colors directly. Text baked into an image, like a graphic with a headline, needs to be checked manually or flagged for redesign as live text, since contrast tools can’t reliably measure rasterized text against its background.
Get Contrast & Color Checker on Your Site
There's no self-serve checkout yet. Submit the form and our team confirms your license tier, sends pricing, and gets you installation instructions within 1 business day.
- WordPress 6.2+, PHP 7.4+, compatible with the Block Editor color picker
- License covers updates and support for 12 months
Need more than one? See the full Accessibility Suite bundle.
Request to Purchase
Tell us which plugins you need. We'll send licensing and setup details.
Pairs Well With
Looking for the deeper compliance picture? Read how these plugins fit into WCAG 2.1 AA compliance for government websites, or browse our accessibility resources hub for guides on ADA Title II deadlines.
See Your Agency's PDF Risk in 2 Minutes
Enter your government website URL. We crawl every page, scan every PDF, and deliver a full ADA compliance risk report. No account. No credit card.
Run Free AuditTalk to Someone Who Speaks Government
Our team understands government procurement, ADA compliance timelines, and what it takes to migrate a government website. Free 20-minute demo. No hard sell.
- Full platform walkthrough for your agency type
- Answers to procurement and security questions
- Honest timeline and migration assessment