Color in web design
What is contrast?
Contrast is the difference between two or more things. There are seven kinds of color contrast.
- Contrast of hue
- Light-dark contrast
- Cold-warm contrast
- Complementary contrast
- Simultaneous contrast
- Contrast of saturation
- Contrast of extension
Contrast levels for accessibility
The Web Content Accessibility Guidelines (WCAG) 2.1 AA require that the contrast between text and the background behind it maintain certain ratios dependent on text size.
- Regular text, including images of text, must have a ratio of 4.5:1
- Large text (18 point or bigger, or 14 point or bigger when bolded) and non-text elements must have a contrast ratio of 3:1