Color Contrast Checker: Free WCAG 2.1 Test

A color contrast checker compares a text color with its background and tells you whether the pair meets WCAG 2.1 AA and AAA. Enter two colors as HEX or RGB, press Check Contrast, and you get the ratio, pass or fail results for normal text, large text and UI components, and a live preview of the pair.

What Is Color Contrast Ratio?

Color contrast ratio is a number from 1:1 to 21:1 that describes how different two colors are in brightness. The higher the number, the easier it is to read one color on top of the other. Black on white scores the maximum 21:1, and two identical colors score 1:1.

The Web Content Accessibility Guidelines (WCAG) define the calculation. Each color is converted to a relative luminance value between 0 (black) and 1 (white). The ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker one. The result is shown in the form 4.5:1.

This is different from the "color contrast" you may know from art or photography, where it can mean opposing hues on a color wheel. WCAG contrast is about legibility: whether people with low vision, color vision deficiencies or a glare-filled screen can actually read your text and see your controls.

How to Use the Color Contrast Checker

You only need two colors and one click. The tool starts with black text on a white background, so you will see a 21:1 result before you change anything.

1. Enter your text color in the Foreground (Text) Color field, or use the small color picker next to it.
2. Enter your page or button color in the Background Color field, or choose it with the picker.
3. Type colors as HEX (#333, #333333, or #333333cc with transparency) or as RGB such as rgb(51, 51, 51). Use rgba(51, 51, 51, 0.8) if you need transparency.
4. Click Check Contrast to calculate the ratio.
5. Read the Contrast Ratio and the table of Criterion, Required Ratio and Result. Each row shows Pass or Fail.
6. Look at the Live Preview to see sample normal text and large text in your colors.
7. Click Swap Colors to test the reverse pair, such as light text on a dark background.

If a color cannot be read, you will see a message such as "Invalid foreground color. Use HEX (#RRGGBB) or RGB." Fix the value and run the check again.

Worked Example: Is Gray Text on White Accessible?

Gray body text is the most common contrast failure on the web, so it makes a good test. Suppose your design uses #767676 text on a #ffffff background.

The checker returns a ratio of about 4.54:1. That passes Normal Text (AA) because 4.54 is above 4.5. It also passes Large Text (AA), Large Text (AAA) and UI Components (AA). It fails Normal Text (AAA), which needs 7:1.

Now lighten the gray to #999999. The ratio drops to about 2.85:1, and every row in the table fails. The fix is to darken the text until the Normal Text (AA) row turns to Pass. In this case, going back to #767676 or darker is enough for AA, and something near #595959 gets you close to AAA.

Example with transparency

Say your text is rgba(0, 0, 0, 0.5) on white. The tool blends the semi-transparent color over the background, which gives a mid-gray. The ratio is roughly 4:1, so it passes for large text but fails for normal text at AA. Transparent text is easy to misjudge by eye, so this is where a numeric check helps most.

How Do You Read the Contrast Results?

Each row in the results table answers a single question: does this color pair meet that WCAG requirement? The thresholds are fixed by WCAG 2.1, and the tool applies them to the ratio it calculates.

What counts as large text?

WCAG treats text as large when it is at least 18pt (24px), or at least 14pt (about 18.67px) and bold. The Live Preview shows normal text at 16px and large text at 24px, so you can see how each size looks in your colors. Anything smaller than the large threshold must meet the normal text ratios.

What should you aim for?

• Level AA is the usual target for websites and the level most accessibility policies and laws refer to. Aim for 4.5:1 on body text.
• Level AAA is stricter. Few sites meet it everywhere, but it is worth using for long reading content, small text or audiences with low vision.
• UI components such as input borders, icons and the outline on a focused button need 3:1 against the color next to them.

How to fix a failing pair

Change one color at a time and recheck. Darken the text, or lighten the background, until the row you care about turns to Pass. Keep the hue if brand color matters: a darker shade of the same blue usually fixes the ratio without changing the look much. If a brand color simply cannot reach 4.5:1, use it for large headings or decoration and use a darker shade for small text.

How Do You Check Contrast in Figma, Chrome, PDFs or PowerPoint?

This checker works with color values, so it fits any workflow where you can copy a HEX or RGB code. You do not need to upload a file or install anything.

• Figma, Illustrator or PowerPoint: select the text, copy its fill color, then select the background shape and copy that color. Paste both into the fields.
• Chrome and other browsers: open developer tools, inspect the element, and copy the color and background-color values from the Styles panel.
• PDFs and images: use a picker in your editing software to read the exact color of the text and its background, then enter the codes here.
• Print: WCAG ratios are designed for screens, but the same numbers are a handy gut check for printed material with strong ink contrast.

Once your pair passes, you can build the rest of the scheme with the color palette generator and test each text and background combination you plan to use.

Who Needs a Color Contrast Checker?

Anyone who chooses colors for people to read should test them. These are the most common situations:

• Web designers validating a style guide before handoff, including hover, disabled and focus states.
• Front-end developers checking CSS color values during a code review or an accessibility audit.
• Content and marketing teams picking text colors for banners, email templates and slide decks.
• Accessibility and compliance reviewers documenting which pairs meet AA or AAA.
• Brand teams deciding which brand colors are safe for body text and which are for accents only.

Good contrast also helps everyone else. Sunlight on a phone, a dim projector or a cheap monitor all reduce effective contrast, and pages with strong contrast stay readable in those conditions. That tends to help engagement and keeps people on the page.

Best Practices and Troubleshooting Tips

Most contrast mistakes come from testing only the main text color, or from entering a color the tool cannot read. These habits prevent both.

• Test every state. Check default, hover, active, disabled and focus colors, not just the default look.
• Test text over solid colors. If text sits on a gradient or photo, test the lightest and darkest areas behind it, or add a solid overlay.
• Check placeholder and helper text. Light gray placeholders are a frequent failure.
• Use the right HEX length. Three, four, six and eight digit HEX values are accepted, and each needs the # sign. A value like 33333 (five digits) will be rejected.
• Match RGB syntax. Use rgb() with three numbers from 0 to 255, or rgba() with a fourth alpha value from 0 to 1. Mixing them, such as rgb() with four values, triggers the invalid color message.
• Use Swap Colors for dark mode. A pair that works one way has the same ratio reversed, but the preview helps you judge how it feels.
• Keep the CSS tidy. After updating your stylesheet, run it through the code beautifier so the new color values are easy to review.

My result looks different from another tool. Why?

Small differences usually come from rounding, from how transparency is handled, or from a color that was typed slightly differently. This checker blends transparent colors over the background, and blends the background over white, before it calculates the ratio. If you compare numbers, make sure you are comparing the same final colors.

Limitations to Keep in Mind

A passing ratio is necessary for readable text, but it does not guarantee a fully accessible design. The tool judges the two colors you enter and nothing else.

• It does not read the page itself, so it cannot find text on images or gradients for you.
• It does not check font weight, thin typefaces or letter spacing, which also affect readability.
• Color should never be the only way to show meaning, such as red for errors. Add text or icons as well.
• The thresholds are WCAG 2.1 values. A pass here supports your compliance work, but it is not a legal certification.

Shadows and borders can add separation between elements, but they do not replace a proper text ratio. If you use them on buttons or cards, design them with the CSS box shadow generator and then test the text colors inside.

Check Your Colors Now

Enter your foreground and background colors above, press Check Contrast, and fix any row marked Fail before the design ships. It takes a few seconds per pair and removes guesswork from your accessibility review. For more utilities for building and testing pages, browse the web developer tools collection.