Color contrast examples

To check your color contrast:

  1. Get your text and background color values from Web Inspector.
  2. Plug them into Lea Verou's Contrast Ratio tool.
  3. Get feedback that compares your colors to WCAG 2.0 standards.

This text is too light for any size or weight.

This text is too light for some sizes and weights.

This text is just right at an size for most people!

This text is good for everyone!

Fun fact: Lea Verou is a lady developer who is an open source contributor on GitHub and who works for the W3C!