Generate a color combination grid to test WCAG compliance contrast ratios.
Examples
Here are a few color palettes to show the end results:
How to use
Enter one color per line into the Background field to create the grid rows. Supports both hex codes and variables for easy copy / paste with your coding tool:
#fff --blue: #008fd5; $green: #39b54a;
You can leave the Text field empty to use the same values for the grid columns as well, or enter unique colors to test specific combinations.
The grid renders swatches of the color combination, along with the contrast ratio and a ratio category icon for quicker visual parsing.
For safety, contrast ratios are rounded down to the nearest single decimal place. (Some contrast grid generators round up, which will pass in the grid but fail in production.)
Use the Level and Show toggles to filter the results by the desired contrast level. Disabled combinations display as a light grey box, and identical background / text combinations display as an empty box.
The color and toggle selections automatically update the URL for easy bookmarking or sharing. You can even use your browser's back / forward buttons to undo / redo actions.
About contrast ratios
To pass digital accessibility standards, text and its background need to have enough contrast to ensure readability by all users, even if they have low vision or impaired perception.
These contrast ratios are mathematically calculated from the colors' luminance values, and vary by element and your targeted WCAG compliance level:
| Element | Level AA | Level AAA |
|---|---|---|
| Text | 4.5:1 | 7:1 |
| Large-scale text Interactive components |
3:1 | 4.5:1 |
| Logos Decorative components |
No contrast requirement | No contrast requirement |
The contrast ratios for large-scale text are lower because larger text is easier to read. The size requirement varies by font weight:
| Font weight | Minimum size | ||
|---|---|---|---|
| Bold (700) or heavier | 1.125rem | 18px | 14pt |
| Lighter than Bold (700) | 1.5rem | 24px | 18pt |
These rem values are based on the standard root font size of 16px.
Text below these size/weight values is considered normal text and needs to meet the higher contrast ratio for its compliance level.
Note that these are only the minimum contrast requirements. It's generally best practice to leave "wiggle room" in your color combinations, as additional elements like semitransparent background images can disrupt narrow contrast ratios and cause them to fail.
You can read more about the specifics in the WCAG docs:
Credits
Built by Brandon Peat at Peat Web Studio.
Based on the excellent contrast grid tool by Eightshapes, with additional inspiration from Michael Herchel. When the Eightshapes site went offline, it was an excuse to roll up my sleeves and make my own version better tailored to my workflow.
I built this just for me, but if it's helpful to anyone else, great! Feel free to use and share.