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 |