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

screenshot of tool that checks contrast ratios

You can also try the Color Contrast Analyzer tool.