Color Contrast Checker

1. Enter a HEX value for the foreground color or choose one with its color picker.
2. Enter a HEX value for the background color or use its color picker.
3. Review the live contrast ratio.
4. Check the WCAG 2.2 results for normal text, large text, and applicable non-text elements.
5. Preview sample text and a button with your selected colors.
6. Use Swap to exchange the foreground and background colors, or Reset to restore the defaults.

Color Contrast Checker

Color contrast describes the difference in relative brightness between two colors. Sufficient contrast can make text easier to distinguish from its background. A color contrast checker lets you test a foreground and background combination before using it in a website, application, design system, or other interface.

Enter HEX values or select colors with the pickers. The contrast ratio and WCAG 2.2 results update as the colors change.

How to check color contrast

Choose a foreground color for text or another element and a background color behind it. Enter HEX values directly or use the color pickers. The checker calculates the contrast ratio and displays results for the applicable WCAG thresholds.

What is a contrast ratio?

The contrast ratio describes the relative difference between two colors and is written as a ratio, such as 4.5:1. It ranges from 1:1, with no contrast difference, to 21:1, the maximum contrast between black and white. A higher ratio generally means a greater difference, but the required threshold depends on the use: normal text, large text, or applicable non-text content.

WCAG 2.2 contrast requirements

For normal text, WCAG AA requires at least 4.5:1 and AAA requires at least 7:1. For large text, AA requires 3:1 and AAA requires 4.5:1. Applicable user interface components and meaningful graphical objects have a 3:1 minimum under the relevant non-text criterion. The checker shows these results separately.

What counts as large text?

For WCAG contrast purposes, large-scale text is at least 18 point or 14 point bold. Point sizes and CSS pixel sizes are not always interchangeable in every context, so consider the text as it is actually rendered. If it does not meet the large-text definition, use the normal-text thresholds.

Understanding AA and AAA

AA and AAA are different WCAG conformance levels, and AAA requires stronger text contrast. A combination with a ratio of 5:1 passes normal-text AA but not normal-text AAA; it passes both large-text AA and AAA. Each Pass or Fail label refers to its displayed threshold.

Preview, swap, and reset

The preview shows sample text and a button with your selected colors. Use it alongside the numerical ratio to review the combination visually. Swap exchanges foreground and background colors, and Reset restores the default colors. Results update as you edit either color.

What a passing result means

A passing result means that the selected pair meets that particular contrast threshold. It does not mean that an entire website or interface is accessible. Accessibility also depends on typography, text size and spacing, focus indicators, keyboard navigation, labels, alternative text, content structure, motion, and screen-reader support. Color alone should not communicate important information.

When to use a color contrast checker

Check text and background colors while designing a website, compare text colors for readability, review button colors and identifying boundaries, test applicable controls and graphics, or inspect a color pair from an existing interface. Testing contrast early can help identify color combinations that need adjustment.

Compare foreground and background colors and review the ratio against WCAG 2.2 AA and AAA thresholds for normal and large text, plus the applicable 3:1 non-text requirement.

Enter foreground and background colors as HEX values or choose them with the color pickers. The contrast result updates as you edit either color.

Preview sample text and a button with your selected colors to see how the combination looks alongside its numerical contrast ratio.

Use Swap to exchange foreground and background colors, or Reset to restore the default colors.