Contrast ratio is a measurement of the visual difference between two colors expressed mathematically.

If the foreground text color has high enough contrast compared to the background color, it ensures visibility and legibility under a wide range of lighting conditions, screens, device settings, and visual acuity. 

Web Content Accessibility Guidelines (WCAG) 2.0 AA requires a contrast ratio of:

  • 4.5:1 for normal text 
  • 3:1 for large text

Example of contrast ratios:

list of text demonstrating contrast ratios from pale grey on white to black on white

 

Exceptions to the 18pt rule: If text is 14pt and bold it only needs to meet the 3:1 ratio.

Example of tool to check color contrast on webaim.org

screenshot of tool that checks contrast ratios

You can also try the Color Contrast Analyzer tool.

Read more about color contrast on WebAIM.org
Read full documentation on contrast ratio