Colour Palette Generator & Contrast Ratio Checker 

Having a good colour contrast ratio in your designs make it more accessible to visually impaired and disabled people. I have created a useful tool to help you do this. It's free to use, but consider tipping my Ko.Fi if you found it handy. I programmed this myself using JavaScript, CSS and HTML. Currently only optimised for computer, but mobile version coming soon!

​

With the WCAG there are different levels of compliance from A (Lowest), AA, and AAA (Highest). When it comes to contrast ratio:

​

- Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. 

- Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

​

The tool below will generate a colour palette and show the contrast ratios for all combos  

​and if they meet AA/AAA for contrast. You can type in your own hex codes, make a colour 

lighter/darker and save a colour while you refresh the others.​

​

​

I have also made a simple colour pair generator that will always generate pairs of colours with a good contrast ratio.