Dynamic accessibility colour matrix with GeneratePress


There are lots of great tools out there to check accessibility contrast ratios for colours. Specifically comparing the foreground and background colours. However, the downside to these is that they require you to manually add every colour from your palette.

I wanted a quick and simple way to see all the possible colour combinations with my colour palette. What better place to generate this than on the website I’m building since the colours already exist in the database.


You can see in the screenshots below what the colour matrix will look like. It easily shows you all the valid text on background combinations. Then, when you hit the ratings toggle, it will switch to show you the WCAG guidelines rating. Whether or not it passes with G, AA or AAA. You can learn more about contrast ratios and ratings here.

This snippet will also allow you to copy the headers CSS variable directly to your clipboard. (Note: Copy to clipboard only works on websites with a secure SSL)

Colour Matrix

colour matrix colours

Colour Ratings

colour matrix ratings

1. Calculate the contrast ratios

Add the code below to functions.php or code snippet plugin.

Members content only

Become a SnippetClub member to gain instant access to this tutorial plus tons more premium content.

Already a member? Log in below.

Login Form

👋🏻 Weekly Tutorial Digest

I send out a weekly newsletter with links to new tutorials written in the last week, you can subscribe below.


🔒I won't send you spam, I promise