A Drupal Color Contrast Checker That Works Inside CKEditor 5
An editor picks a light gray on white for a caption because it looks clean, and a low-vision reader cannot make out a word of it. Contrast & Color Checker measures every text and background pairing against WCAG 1.4.3 while the editor is still in CKEditor 5, and crawls the rendered theme for failures already live.
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 sites we have scanned, usually in places nobody thinks to check: placeholder text, disabled buttons, footer links, and hover states set in a theme’s CSS. A color that passes on a designer’s calibrated monitor can fail badly on a phone screen in direct sunlight.
This module installs on any Drupal 10.6+ or Drupal 11 site with Composer, and pairs with WPPersona's WCAG 2.1 AA compliance approach. No CMS migration required.
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 Drupal site.
CKEditor 5 live checking
Where your text format enables the CKEditor 5 font and background color options, the plugin calculates the contrast ratio live as an editor picks colors 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.
Theme-wide color audit
A crawl of rendered pages surfaces every failing pairing already live, grouped by the theme region, block, or component causing the failure.
AAA-level flagging
For agencies targeting the stricter 7:1 ratio on key pages, the module can flag AA passes that still fall short of AAA, so you know exactly what a higher bar would require.
Palette lock via config
Restrict editor and block color options to a pre-approved palette stored in Drupal config, where every combination has already been verified, removing the failure at the source.
From composer require to Fixed, in Four Steps
Install and run the first audit
The module crawls rendered 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 to a handful of theme variables. Fixing them at the source resolves the majority of flagged instances in one pass.
Turn on live checking
Editors get instant feedback in CKEditor 5 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 CSS variable can reintroduce failures across dozens of pages.
“Our brand guide had three shades of gray for secondary text. Two of them failed AA and were baked into the theme’s SDC components. 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 Drupal 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.
Does this check the Claro admin theme or just the front end?
The site-wide crawl targets your public front-end theme where residents actually read content. It can also scan a custom admin theme on request, though core’s Claro and Olivero themes already ship with strong contrast defaults.
Can it fix contrast failures automatically?
It suggests the nearest passing shade of your existing brand color and can apply it to a config-managed palette with one click, but it will not silently overwrite your theme. A person confirms the change, since brand color decisions usually involve more than the math.
Get Contrast & Color Checker on Your Drupal Site
There's no self-serve checkout yet. Submit the form and our team confirms your license tier, sends pricing, and gives you private Composer repository access with installation instructions within 1 business day.
- Drupal 10.6+ or Drupal 11, PHP 8.1+, integrates with CKEditor 5
- License covers updates and support for 12 months
Need more than one? See the full Accessibility Suite bundle.
Request to Purchase
Tell us which modules you need. We'll send licensing and setup details.
Pairs Well With
Looking for the deeper compliance picture? Read how these modules 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