Color contrast is the visible difference between two colors placed side by side, such as text and its background. On websites, it usually refers to the difference in lightness between the foreground and background colors. The greater the difference, the easier it is to see and read text and interface elements. Accessibility standards measure it as a contrast ratio.
Text that blends into its background is harder for many people to read, including those with low vision, color vision deficiencies, or age-related vision changes. Low contrast also affects anyone reading on a phone in bright sunlight or on a dim screen.
For this reason, contrast is part of the Web Content Accessibility Guidelines (WCAG), the standard that many accessibility laws and policies reference. Accessibility testing tools also flag low-contrast text most often.
Contrast is measured by comparing the relative brightness (luminance) of two colors. The result is a ratio from 1:1 (no difference, white on white) to 21:1 (the maximum, black on white).
For example, mid-gray text (#767676) on a white background has a ratio of about 4.5:1, which meets the WCAG minimum for body text. A lighter gray (#999999) on white drops to about 2.8:1 and does not meet the minimum. To see how the ratio is calculated, read our explanation of the luminance contrast ratio.
WCAG sets minimum ratios based on the size and type of content:
Content | Minimum (Level AA) | Enhanced (Level AAA) |
|---|---|---|
Normal text | 4.5:1 | 7:1 |
Large text (about 24px, or about 19px bold) | 3:1 | 4.5:1 |
Buttons, form field borders, icons and chart elements | 3:1 | Not specified |
The same requirements apply to text inside images, such as banners and infographics. Logos, purely decorative text and disabled controls are exempt. Most organizations aim for Level AA; our guide to WCAG A, AA and AAA levels explains the difference. The full criteria are published by the World Wide Web Consortium (W3C).
Color contrast is about how light or dark two colors are compared, while use of color is about whether color is the only way information is communicated.
Color contrast | Use of color | |
|---|---|---|
Question it answers | Can people tell text or elements apart from the background? | Can people understand the information without seeing color? |
Example issue | Light gray text on a white background | Required form fields marked only in red |
Typical fix | Darken the text or adjust the background | Add text labels, icons or patterns |
WCAG criteria | Contrast (Minimum), Non-text Contrast | Use of Color |
A page can pass one and fail the other. Two colors can look very different yet have low contrast; for example, red and green with similar lightness can be hard to distinguish for people with color blindness.
Luminance Contrast Ratio: The formula used to calculate the contrast between two colors.
Color Blindness: A condition that affects how people perceive certain colors, which is why contrast and color choices matter.
WCAG: Accessibility guidelines that set minimum contrast ratios for web content.
Readability: How easily people can read and understand content, which contrast directly affects.
For body text, aim for at least 4.5:1. Large text and interface elements such as buttons and icons need at least 3:1. Higher ratios can improve readability further, though some readers find pure black on bright white tiring, so dark gray on off-white that still meets the minimum is a common choice.
Not exactly. In art and design, color contrast can describe several kinds of difference, such as hue, saturation, or warm versus cool colors. In web accessibility, it refers specifically to the difference in lightness, measured as a contrast ratio.
Logos are exempt, but brand colors used for text, buttons or links are not. If a brand color falls short, teams typically use a darker shade for text, reserve the original for larger elements or decorative use, or add an accessible secondary palette.
Contrast checkers, such as the WebAIM Contrast Checker, compare two color values and report the ratio. Automated accessibility scans can flag low-contrast text across many pages, but text placed over images or gradients usually needs a manual check.
Compliance Content Manager | CIPP/E (IAPP) | CPACC (IAAP)
Alex is a Compliance Content Manager at Clym, where he researches and writes about everything related to data privacy and web accessibility compliance for businesses, helping them stay informed on their compliance needs and spreading awareness about making the web safer and more inclusive. When he's not writing about compliance, Alex has his nose in a book or is hiking in the great outdoors.
