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:
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
You can also try the Color Contrast Analyzer tool.