Damien Robson

I'm Damien. I build digital experiences that everyone can use.

Colour Contrast Ratio Checker

I've always been fascinated by colour, and particularly colour theory. I think it's part of the reason why I became interested in digital accessibility in the first place. Colour contrast ratios are a staple tool in the arsenal of an accessibility specialist, so I've spent a little time learning how it all hangs together and built the tool below. Have a play with it; just provide the two HEX codes you want to compare, and then trigger the calculation with the Calculate button.

Understanding the Thresholds

Now that you have a lovely ratio, how do you know if it's good to go or not? Well, here's a quick-reference table that you can use to determine whether you need to reconsider your colours.

Level Context Minimum Ratio
AA Normal Text 4.5:1
AA Large Text (>18pt or 14pt bold) 3.0:1
AAA Normal Text 7.0:1
AAA Large Text 4.5:1
UI Graphical Objects 3.0:1