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.
by Jon Ericson via SnippetClub.com · github.com/jonericson/je-color-matrix · website
Install
No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:
wp plugin install https://github.com/jonericson/je-color-matrix/archive/refs/heads/main.zipA 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
- Define the colors in GeneratePress customizer (Customizer -> Colors)
- Install the plug-in using the normal methods.
- Create a temporary page under any name. On the page define the shortcode [/colour_matrix]
- View the page
That's it!