Check colour contrast
See whether your text is actually readable, and by how much you are missing it.
Large text looks like this
And this is what a normal paragraph looks like at the size most body text is actually set. If you have to lean in to read this, the number beside it is telling you something true.
Small print, the size nobody tests and everybody ships.
Ratio
5.28:1
- AA, normal textPasses
- AA, large textPasses
- AAA, normal text1.72 short
- AAA, large textPasses
Large text means 18.66px bold or 24px and up. Falling short by a small amount is usually one step of lightness away, which is why the gap is shown rather than a bare pass or fail.
Questions
- What do AA and AAA mean?
- They are levels in the Web Content Accessibility Guidelines. AA needs a ratio of 4.5 to 1 for normal text and is what most legislation and company standards require. AAA needs 7 to 1 and is stricter than most designs manage for body text.
- What counts as large text?
- From 18.66px if it is bold, or 24px otherwise. Larger text is legible at a lower contrast, which is why it gets its own lower threshold.
- Why show how far short I am rather than just fail?
- Because a fail on its own leaves you guessing. Being 0.3 short is usually one step of lightness away, and being 2 short means rethinking the pair. Those need different responses.
- Does this cover everything about accessible colour?
- No. It checks contrast, which is the part with a number attached. It cannot tell you whether you are relying on colour alone to carry meaning, which is a separate and equally common failure.