Developers · Gutenberg
Contrast Checker block for WordPress
WCAG color contrast accessibility checker. Test foreground/background color combinations against AA and AAA standards.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
WCAG color contrast accessibility checker. Test foreground/background color combinations against AA and AAA standards.
Inspector panels on this block: Content, Sizing. Those titles come from index.js, not from a shared template.
Where to find it
Gutenberg inserter → Developers → search “Contrast Checker” (block name `blockenberg/contrast-checker` in block.json). Style it in the sidebar after insert.
How to use Contrast Checker block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Contrast Checker”, insert it. Category: Developers.
- Configure inspector controls that exist on this block. Open Content. Set “Content — Title”, “Subtitle”, “Preview Text”, “Default Foreground Color”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-sugfg. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Content — Title | Text field in the inspector. block.json default: Color Contrast Checker. Saved as `title`. |
| Subtitle | Text field in the inspector. block.json default: Test accessibility compliance with WCAG 2.1 standards. Saved as `subtitle`. |
| Preview Text | Text field in the inspector. block.json default: The quick brown fox jumps over the lazy dog. Saved as `previewText`. |
| Default Foreground Color | Text field in the inspector. block.json default: #1e1b4b. Saved as `defaultFg`. |
| Default Background Color | Text field in the inspector. block.json default: #ffffff. Saved as `defaultBg`. |
| Show Text Preview | On/off toggle in the inspector. On by default. Saved as `showPreview`. |
| Show Color Suggestions | On/off toggle in the inspector. On by default. Saved as `showSuggestions`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoTitle`. |
| Subtitle (Typo Subtitle) | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `typoSubtitle`. |
| Sample text font size (px) | Numeric range control in the inspector. Range 11–28. block.json default: 16. Saved as `sampleFontSize`. |
| Pass Badge | Color control in the inspector. block.json default: #16a34a. Saved as `passColor`. |
| Fail Badge | Color control in the inspector. block.json default: #dc2626. Saved as `failColor`. |
| Accent | Color control in the inspector. block.json default: #6c3fb5. Saved as `accentColor`. |
| Card Background | Color control in the inspector. block.json default: #ffffff. Saved as `cardBg`. |
| Section Background | Color control in the inspector. block.json default: #f5f3ff. Saved as `sectionBg`. |
| Colors — Title | Color control in the inspector. block.json default: #111827. Saved as `titleColor`. |
| Subtitle | Color control in the inspector. block.json default: #6b7280. Saved as `subtitleColor`. |
| Labels | Color control in the inspector. block.json default: #374151. Saved as `labelColor`. |
| Max Width (px) | Numeric range control in the inspector. Range 360–1400. block.json default: 680. Saved as `contentMaxWidth`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-sugfg.
When this is the right block
- WCAG color contrast accessibility checker. Test foreground/background color combinations against AA and AAA standards — that is the job of Contrast Checker, not a generic content block.
- Use it when you need the editor control labeled “Content — Title”, which exists on this block’s inspector.
- It matches pages about contrast, accessibility, wcag.
- Inserter grouping: docs sites, utilities, and developer landing pages.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Contrast Checker block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Contrast Checker”. It sits under Developers. After insert, open Content and set “Content — Title”, “Subtitle”, “Preview Text”, “Default Foreground Color”.
What makes Contrast Checker different from other Blockenberg blocks?
WCAG color contrast accessibility checker. Test foreground/background color combinations against AA and AAA standards. Inspector labels on this block include “Content — Title”, “Subtitle”, “Preview Text”, “Default Foreground Color”.
Is the Contrast Checker Gutenberg block free?
Yes. Contrast Checker ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Contrast Checker to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Content, Sizing).
Related developers blocks
Color Harmony
Pick a base color and instantly see complementary, triadic, analogous, and other harmonic palettes. Click any swatch to copy its hex value.
Color Mixer
Interactive color mixing tool. Pick two colors, blend them at any ratio, view the result in HEX/RGB/HSL, generate color harmonies, and copy any value instantly.
Color Palette
Display brand color swatches with HEX, RGB, and CSS variable labels. Perfect for style guides and design systems.
CSS Gradient Generator
Interactive CSS gradient builder with live preview, multiple color stops, and one-click CSS copy.
Color Converter
Live Hex ↔ RGB ↔ HSL color converter with a real-time color preview swatch.
Color Thief
Upload an image to automatically extract its dominant color palette using canvas pixel analysis.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Contrast Checker from the Gutenberg inserter.