Why does this matter?
Using shades of gray lighter than the above means some people will not
be able to read or use your site as well as others,
which can be a really bad user experience and can cost your business money in lost revenue.
Not to mention, it’s just a tad bit discriminatory, isn’t it?
Ever tried to use your phone outside during the day? Maybe you can relate.
Level AA
The minimum recommended contrast ratio is 4.5:1.
#767676 is the lightest shade of gray that's safe to use on a white background.
Level AAA
For enhanced readability,
the minimum recommended contrast ratio is 7:1.
#595959 is the lightest shade that meets this contrast ratio.
AA Large Text
For large text, the minimum is 3:1.
#959595 is the lightest shade that's safe to use on a white background.
Large text is at least 18 points or 14 points bold.
That’s 24px and 19.2px respectively.
AAA Large Text
For enhanced readability,
the minimum recommended contrast ratio for large text is 4.5:1.
#767676 is the lightest shade that's safe to use.