Color Contrast Checker

A color contrast checker measures how readable text is against its background. Enter a text color and a background color, in hex, rgb() or hsl(), and this tool calculates the contrast ratio defined by the Web Content Accessibility Guidelines (WCAG) and shows whether the pair passes level AA and AAA for normal text, large text and user-interface parts such as icons and input borders. A live preview shows the colors at real sizes, and if a pair falls short, the tool suggests the nearest lighter and darker shades of your text color that would pass, so you can fix the problem without redesigning your palette. Everything runs in your browser.

How to use the Contrast checker

1. 1 Enter the text colorType or paste a hex code such as #5c6370, an rgb() or hsl() value, or use the color picker. Semi-transparent colors are supported.
2. 2 Enter the background colorUse the color the text actually sits on. For text over images or gradients, test the lightest and darkest areas behind the text.
3. 3 Read the ratio and resultsThe ratio appears at once, with a pass or fail for AA and AAA at normal and large sizes and for UI components.
4. 4 Check the live previewSee headings, body text, small print, a button outline, an icon and a link in your colors.
5. 5 Pick a passing shadeIf the pair fails, click one of the suggested colors to apply it, or copy its hex code for your stylesheet.

Why color contrast matters

Text that does not stand out clearly from its background is harder for everyone to read, and for many people it is unreadable. That includes people with low vision, people with color vision deficiencies, older visitors whose contrast sensitivity has declined, and anyone reading a phone outdoors in bright light. Light gray text on white, pale buttons and thin colored links are among the most common accessibility problems on the web.

Contrast is also one of the few accessibility checks that can be measured precisely, which is why it appears in almost every accessibility audit and in automated tools such as Lighthouse. Fixing contrast usually means small color adjustments rather than a redesign, and it makes pages easier to scan for every visitor, not only those with a disability.

How the WCAG contrast ratio is calculated

WCAG defines contrast using relative luminance, a measure of how bright a color appears to the human eye. Each red, green and blue channel is converted from the gamma-encoded sRGB value to a linear light value, then weighted: green counts most, red less and blue least, because our eyes are most sensitive to green light. The result is a luminance between 0 for black and 1 for white.

The contrast ratio is then (L1 + 0.05) divided by (L2 + 0.05), where L1 is the lighter color's luminance and L2 the darker one's. It runs from 1:1, for two identical colors, to 21:1, for black on white. The order of the colors does not matter: dark text on a light background and light text on a dark background give the same ratio.

One detail trips people up: WCAG compares the exact ratio with the threshold, without rounding. A pair that calculates to 4.49:1 fails AA even though it might be displayed as 4.5. This tool rounds the displayed value down and grades the unrounded number, so what you see never looks like a pass when it is not.

WCAG AA and AAA requirements explained

WCAG 2.1 and 2.2 success criterion 1.4.3, Contrast (Minimum), is the level AA requirement most laws and policies point to. Normal text needs a ratio of at least 4.5:1. Large text needs at least 3:1. Large text means at least 24 CSS pixels at regular weight, or at least 18.66 CSS pixels (14 points) in bold.

Success criterion 1.4.6, Contrast (Enhanced), is the stricter level AAA: 7:1 for normal text and 4.5:1 for large text. Few organisations require AAA across a whole site, but it is a good target for long-form reading and for audiences with many older readers.

Success criterion 1.4.11, Non-text Contrast, applies to the visual parts of interface components and to meaningful graphics: input borders, focus indicators, checkboxes, icons that convey meaning, and chart lines. These need at least 3:1 against the colors next to them. Text that is purely decorative, part of a logo, or in a disabled control is exempt from the text requirements.

• AA normal text: 4.5:1 or higher.
• AA large text (24px, or 18.66px bold): 3:1 or higher.
• AAA normal text: 7:1 or higher.
• AAA large text: 4.5:1 or higher.
• UI components and meaningful graphics: 3:1 or higher.

Testing real designs: transparency, images and states

Colors with transparency are seen mixed with whatever is behind them. When your text color has an alpha value, such as rgba(0, 0, 0, 0.6), this tool blends it over the background and tests the color you actually see. Background transparency depends on the layers further back, so for backgrounds enter the final, visible color.

Text over photos and gradients has no single background color. Test the text color against both the lightest and the darkest area it overlaps, and if either fails, add a solid or semi-transparent overlay behind the text, or a text shadow, until every part passes.

Remember interactive states. A button may pass in its normal state but fail on hover, a link may be readable but its visited color may not, and placeholder text in form fields is often far too light. Check each state you have styled, and check focus outlines against the background under them.

Fixing contrast without changing your brand

Most failing pairs are close to passing. The suggestions in this tool keep the hue and saturation of your text color and change only its lightness, so the color still looks like your brand color, just darker or lighter. A mid gray that fails on white, for example, often only needs to move a few steps darker to reach 4.5:1.

If a brand color cannot reach the ratio you need on a given background, use it where the rules are looser: large headings, decorative shapes, or backgrounds behind dark or white text. Keep a darker variant of the color for body text and links. Many design systems define an accessible text version of each brand color for exactly this reason.

Contrast is not the only signal. Do not rely on color alone to convey meaning: links in body text should be underlined or otherwise distinguished, error messages need words as well as red, and charts need labels or patterns as well as color.

Beyond WCAG 2: APCA and newer methods

The WCAG 2 formula is simple and widely adopted, but it has known weaknesses, especially for dark backgrounds and very thin or very large text. The Accessible Perceptual Contrast Algorithm (APCA) is a newer method being explored for a future version of WCAG. It takes text size and weight into account and treats light-on-dark differently from dark-on-light.

APCA is not yet part of any published WCAG standard, and legal and procurement requirements still reference the WCAG 2 ratio, so this tool reports the WCAG 2 values. If you design mostly dark interfaces, it can still be worth reading about APCA and testing important pairs with both methods.

For a wider review, run a full website audit, which checks accessibility issues across your pages, and use our Color Palette Generator to build a palette with contrast in mind from the start.

Examples you can copy

#999999 on #ffffff  ->  2.84:1  fails AA
#767676 on #ffffff  ->  4.54:1  passes AA (normal text)
#595959 on #ffffff  ->  7.00:1  passes AAA (normal text)

:root {
  --brand: #3b82f6;       /* 3.67:1 on white: large text and UI parts only */
  --brand-text: #1d4ed8;  /* 6.70:1 on white: body text and links */
}

.hero {
  background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url(hero.jpg) center/cover;
  color: #ffffff;
}

Common mistakes to avoid

Frequently asked questions