Color Contrast Checker

What Is Color Contrast?

Color contrast is the difference in brightness between two colors, most often the color of text and the color behind it. The higher the contrast, the easier it is to read. Black text on a white background has the strongest contrast, while light gray text on a white background is hard to read for many people.

Good contrast helps everyone: people with low vision, people with color vision deficiency, older users, and anyone reading a screen in bright sunlight or on a cheap display.

What Is a Contrast Ratio?

The contrast ratio is a number from 1:1 to 21:1. A ratio of 1:1 means the two colors are the same, and 21:1 is the highest possible value, which is black on white. The ratio is calculated from the relative luminance of each color, which is a measure of how bright the color looks to the human eye.

The formula is: contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the luminance of the lighter color and L2 is the luminance of the darker color. You do not need to calculate it yourself, because this tool does it instantly as you change the colors.

WCAG Contrast Requirements: AA and AAA

The Web Content Accessibility Guidelines, known as WCAG, set the minimum contrast values used around the world for accessible websites. There are two main levels.

• AA normal text: at least 4.5:1. This is the common target for body text, labels and links.
• AA large text: at least 3:1 for large headings and big text.
• AAA normal text: at least 7:1, the enhanced level for the best readability.
• AAA large text: at least 4.5:1.
• UI components and graphics: at least 3:1 for button borders, form fields, icons and important parts of charts against nearby colors.

Most websites aim for level AA, which is also what many accessibility policies and procurement rules refer to. Level AAA is a higher goal that is not always possible for every part of a design.

What Is Large Text in WCAG?

WCAG treats text as large when it is at least 18 point (about 24 pixels) in regular weight, or at least 14 point (about 18.66 pixels) in bold. Large text is easier to read, so it can use a lower contrast ratio of 3:1 for AA. All smaller text is normal text and needs 4.5:1 for AA.

How to Use This Contrast Checker

1. Enter your text color: Use the color picker or type a HEX code such as #1F2937 or just 1F2937. Short codes like #333 work too.
2. Enter your background color: Do the same for the background. Use the swap button if you want to reverse the two colors.
3. Read the result: The big number is the contrast ratio. The list below shows Pass or Fail for each WCAG requirement.
4. Check the preview: The preview shows large text, normal text and a button with your colors, so you can judge readability by eye as well.
5. Fix failing colors: If the colors fail, use the suggested color, then fine tune it. You can copy the ratio or share the exact color pair with a link.

Common Contrast Examples

• Black on white (#000000 on #FFFFFF): 21:1, the maximum possible contrast.
• Gray #767676 on white: about 4.54:1. This is the lightest neutral gray that still passes AA for normal text on a white background.
• Light gray text on white: often below 3:1 and fails, even if it looks stylish.
• White text on a mid blue or bright color: can fail on bright backgrounds, so check the exact shade of your buttons and banners.

Tips for Accessible Color Combinations

• Test every text and background pair: Check body text, headings, links, buttons, placeholders, error messages and footer text.
• Do not depend on color alone: Use icons, underlines or labels as well, so that people who cannot see color differences still get the message.
• Be careful with text on images: Use an overlay or a solid background behind the text to keep the contrast stable.
• Check hover, focus and disabled states: They also need clear contrast where they carry information.
• Test dark mode separately: A color pair that works in light mode may not work on a dark background.
• Add real user testing: A passing ratio is a strong start, but readability also depends on font, size, spacing and the screen.

Who Needs a Contrast Checker?

Web designers and developers use a contrast checker while building websites and design systems. UI and UX designers use it for apps, dashboards and buttons. Marketers and content creators use it for banners, ads, social media posts and presentations. Students and teachers use it to learn about accessibility. Business owners use it to make sure that their website text is readable for all visitors.

Free Online Contrast Checker Without Installing Software

This online contrast ratio checker works in any modern web browser on desktop, tablet and mobile. All calculations run in your browser, so the colors you test are not uploaded or stored anywhere. There is nothing to install and no account to create. Bookmark the page, test your colors, and share the result link with your team or client.