WP Manifestindependent plugin directory
manifest / themes / je-color-matrix

JE Color Contrast Ratios

A WordPress plug-in that works with the GeneratePress theme to display global color variables defined in the Color section of the customizer.

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/jonericson/je-color-matrix/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

A WordPress plug-in that works with the GeneratePress theme to display global color variables defined in the Color section of the customizer.

What the project does

It displays the color variables defined in the Customizer. The display is in a matrix fashion to give a visual sense of how they work together. Included is a toggle to display values for Accessbility.

Why the project is useful

When rebranding or rebuilding a website new colors are often chosen by a designer or the client. By displaying the colors and accessibility score in a matrix form, it gives a visual sense to their compatibility BEFORE a lot of work on the website is performed and potentially wasted as clients change their minds. It also provides a way of verifying the global values. The default color variables from GeneratePress include base value, contrast, and accent colors.

Typically this is used during the early stages of a website build. The plug-in should be removed when the final site is delivered. It doesn't hurt to leave it in, but it isn't necessary.

How to use

  1. Define the colors in GeneratePress customizer (Customizer -> Colors)
  2. Install the plug-in using the normal methods.
  3. Create a temporary page under any name. On the page define the shortcode [/colour_matrix]
  4. View the page

That's it!