WCAG Level AA Requirements for Color Contrast Ratios:

• 4.5:1 contrast between the non-link text color and the background.
• 4.5:1 contrast between the link text color and the background.
• If links are not underlined, 3:1 contrast between the link text color and the surrounding non-link text color.
• Focus/hover states for links must have a non-color designator (e.g. underline, outline, etc).
• 3:1 contrast is permitted for large text.

Minimum Font Sizes and Weights

The cited sizes in the WCAG specs for text are mentioned in points. On our sites, which currently use pixels, this works out to be roughly the following:

• Normal Text - Requires 4.5:1 ratio or higher:
  • 12px normal or larger*
• Large Text - Requires 3:1 ratio or higher:
  • 20px bold or larger*
  • 24px normal or larger*

*Based on Helvetica, Arial, or other common system font. Some fonts might require larger sizes to pass due to their visual characteristics.

• For example, the Mr Eaves web fonts usually need to be about 2px larger to achieve the same visual size as Helvetica due to its smaller x-height.
• A thin web font may be more difficult to see and it is recommended that you increase the contrast amount to be higher than the minimums.

Online Tools to Check Contrast Ratios

• WebAIM: Color Contrast Checker
  http://webaim.org/resources/contrastchecker/

  Provides the contrast ratio and a Pass/Fail result for Normal and Large Text. Our target is to pass WCAG 2.0 AA.

• Lea Verou's Color Contrast Checker
  https://contrast-ratio.com/

  Does the same thing only with huge color blocks to get a nice idea of how the color combos will look. Mmmmm, pretty! Background color in the first field, foreground color in the second field, voilà!

Need Help Picking a Color?

If you have a color you really love, you can use the following tool to tweak it lighter or darker a percentage point at a time until you find a close hex value that will pass.

• Hex Color - Lighten or Darken Tool http://www.cssfontstack.com/oldsites/hexcolortool/

Frequently Asked Questions

Q. "But, I don't see any guidelines for text smaller than 12px!"
A. No, you don't. That's because it is way too small. Phase it out! :)

Q. "If I use an image of text, do I still have to meet the contrast ratio?"
A. Use real text whenever possible but if you use an image, yes, it must still meet the contrast requirements.