Skip to main content

Test live pages Free

Contrast everywhere, with a palette fixer

Contrast measured on gradients, images, text shadows, controls and focus rings, plus a block editor fix that suggests the nearest passing color from your palette.

Download Lumtera free (downloads lumtera.zip from WordPress.org) Read the docs

Updated for Lumtera 1.2.2 and Lumtera Pro 1.1.1.

Overview

Review mode's Whole page tab measures text contrast from the colors the browser paints, including your theme and page builder CSS. On a gradient, it works out the colors under the text and uses the worst one. On an image, it reads the image's pixels behind the text when the browser allows it, and reports when one in twenty of those pixels gives too little contrast. Images served from another address, videos and backgrounds it cannot read are listed as "check contrast" items for a person.

Contrast is also checked where text is not involved. Form field borders, fields with no visible edge, custom checkboxes and radio buttons, and icon buttons need 3:1 against what is next to them. The focus indicator is measured too, whether it is an outline, a box-shadow ring, a border change or a color change, with a separate tip when it could be more visible. Text shadows and links told apart from text by color alone are flagged as well.

When text fails, the finding names the closest color in your theme's palette that passes, or a nearby color that would pass when none in the palette does. In the block editor, for blocks that set their own colors, the color-contrast issue shows the current and suggested color side by side, marked "(not in your palette)" when needed. Choose Use this color to change the block's text color; nothing changes before that, and the editor's Undo reverses it.

Why does it matter?

Low contrast is one of the most common barriers on the web, and it hides in places a simple color check cannot see: white text on a light end of a gradient, a heading over a busy photo, a pale form border, a focus ring that almost disappears. Knowing a color fails is also only half the answer; you need a color that passes and still fits your brand.

What do you get?

  • Text on gradients is judged against the worst color under the text, not the average.
  • Text over images is measured from the image's pixels when the browser allows it. Images from another site, videos and backgrounds that cannot be read are listed for you to check by eye.
  • Text shadows, form field borders, custom checkboxes, icon buttons and focus indicators are checked against the 3:1 or 4.5:1 ratio they need.
  • Findings name the closest color in your theme's palette that passes.
  • In the block editor, a Use this color button changes the block's text color to that suggestion, only when you choose it.

How does it work?

  1. Check the rendered page

    Open a page in review mode. The Whole page tab measures contrast from the colors your browser actually paints, theme and page builder included.

  2. See the suggestion

    Each low-contrast finding shows the ratio, the colors involved and, where one exists, the nearest palette color that passes.

  3. Apply it in the editor

    For a block that sets its own colors, the editor shows the current and suggested color side by side. Choose Use this color, or Undo if you change your mind.

Who is it for?

  • Hero sections and banners

    White text over photos and gradients is measured where it actually sits. The finding also reminds you to look again at phone width, where images crop differently.

  • Brand colors that almost pass

    Get the nearest palette color that meets the ratio, so the fix stays on brand.

  • Forms and icon buttons

    Pale input borders and light gray icons are common and easy to miss. They are checked against 3:1.

Good to know

How it behaves, what it needs, and where its limits are.

Colors from the theme
The editor fix changes only colors a block sets itself. When the color comes from the theme, the finding tells you where it is usually set: the Site Editor's Styles, the Customizer or your page builder's global colors.
Shared parts
A block inside a template part gets a link to the Site Editor, and a block inside a synced pattern a link to the pattern, instead of a change from the post.
Gradients in the editor
Blocks with a gradient background get no one-click color change. Review mode's gradient finding explains how to change the gradient or add an overlay instead.
Simulations
The Simulate menu in review mode shows the page with protanopia, deuteranopia, tritanopia, achromatopsia or low vision, and keeps your choice as you move between pages in the same browser session.
Where it runs
Rendered contrast runs in your browser in review mode, one page at a time. Content checks in the editor catch colors set inside blocks as you write.
Modern colors and icons
Colors written with color-mix(), oklch(), lab() or wide-gamut spaces, as Tailwind 4 and newer themes use, are read as painted. A color that still cannot be read makes the finding a review item, never a guess. Symbols and one-letter icons, such as an "X" close button, are measured at 3:1, as graphics, for review.

Questions

Something else on your mind? Contact support

What if the color comes from my header or a synced pattern?

Shared parts are never changed from inside a post. For a block in a template part, the fix links to the Site Editor; for a synced pattern, it links to the pattern.

Can I see the page as someone with low vision or color blindness might?

Yes. Review mode can simulate protanopia, deuteranopia, tritanopia, achromatopsia and low vision. It is an approximation, useful for spotting information shown by color alone, not for judging contrast ratios.

Why is some text over an image marked "check it yourself"?

Browsers do not let a page read the pixels of an image from another address, such as an image CDN, and a video changes as it plays. In those cases Lumtera cannot measure the contrast and asks a person to look.

Does Lumtera Pro add anything here?

Lumtera Pro also checks contrast in hover, focus and pressed states, and runs page checks across many pages on a schedule.

More in “Test live pages”

  • Free

    Whole-page review

    Check a page the way visitors see it — theme, header, menus, footer and page-builder output — with {page_checks} checks for contrast, target size, keyboard and widgets.

  • Free

    Keyboard walk and widget tests

    Review mode's Keyboard tab numbers every Tab stop on the page, flags focus you cannot see, and opens menus, dialogs and tabs from the keyboard.

  • Free

    Screen reader preview

    See roughly what a screen reader lists on a page: headings, landmarks, links and form fields, plus the whole page in reading order.

Start with the free plugin today

All 69 content checks and 33 whole-page checks, fixes you approve with undo, and the site report — free, with no account and no page limits.

Download free (downloads lumtera.zip from WordPress.org)See Pro plans