What is color contrast?
Color contrast refers to the difference in brightness between foreground and background colors. For accessible text, aim for a 4.5:1 ratio between these colors to ensure readability for people with moderately low vision or color blindness. For text that is bold and at least 19px or is 24px and larger, the color contrast minimum is 3:1. Aim for a 3:1 ratio for interactive elements like tabs, buttons, or Effective color contrast improves content visibility across different devices and lighting conditions. Watch a video from the Web Accessibility Initiative to learn the real impact of color contrast on web users.
Color contrast barriers can be found in:
- Website templates
- Digital and print documents
- Text within an image
- Text on a semi-transparent background
- Link text against its surrounding body text and/or background color
- Interactive element styling, such as buttons and menus.
Exceptions:
- Logos
- Inactive interface components
- Decorative elements.
How to check color contrast
Use an automatic scanner in the form of a browser extension, website, or desktop software to see color contrast ratios. Many include color blindness simulators which can be helpful in determining the contrast of an image.
- WebAIM’s Color Contrast Checker
- WebAIM’s Link Color Contrast Checker
- The Paciello Group’s Colour Contrast Analyser
- Color Contrast Grid
- Find more in our Tool Box
Using Carolina blue
UNC Creative developed a color palette which includes guidance on using various forms of Carolina Blue for digital materials.