Utility Tally

Color contrast checker

Check WCAG color contrast ratios for accessibility

Color selection
Choose foreground and background colors
Contrast ratio
WCAG compliance results
21:1
Normal text (AA)Pass
Normal text (AAA)Pass
Large text (AA)Pass
Large text (AAA)Pass
Preview
See how your colors look together

Normal text (16px): The quick brown fox jumps over the lazy dog

Large text (18px bold): The quick brown fox jumps over the lazy dog

How to use this tool
  1. Select your foreground (text) color using the color picker or hex input
  2. Select your background color
  3. The contrast ratio is calculated automatically
  4. Check the WCAG compliance results for normal and large text
  5. Use the preview to see how the colors look together
  6. Aim for at least AA compliance (4.5:1 for normal text, 3:1 for large text)
Example

Colors:

Foreground: #000000 (black)

Background: #ffffff (white)

Result:

Contrast ratio: 21:1

Normal text AA: Pass ✓

Normal text AAA: Pass ✓

Frequently asked questions

What is color contrast ratio?

Contrast ratio measures the difference in luminance between two colors. It ranges from 1:1 (no contrast) to 21:1 (maximum contrast, black on white).

What is WCAG?

WCAG (Web Content Accessibility Guidelines) are standards for making web content accessible. They define minimum contrast ratios for text readability.

What ratio should I aim for?

For normal text, aim for at least 4.5:1 (AA) or 7:1 (AAA). For large text (18pt+ or 14pt+ bold), 3:1 (AA) or 4.5:1 (AAA) is acceptable.

Why does contrast matter?

Good contrast ensures text is readable for everyone, including people with visual impairments, color blindness, or viewing in bright sunlight.

Can I use this for UI elements?

Yes, WCAG also requires 3:1 contrast for UI components and graphical objects. Use this tool to verify buttons, icons, and form controls.

Related tools

color contrast checker

How the color contrast checker helps

Use the color contrast checker to test whether text, buttons, badges, links, and interface labels are readable against their background. Contrast matters for accessibility, mobile screens, bright rooms, low vision users, aging displays, and anyone scanning content quickly.

Utility Tally tools are built for quick, practical workflows: prepare the input, review the result, copy or download the output, and move on without creating an account. The guidance below explains how to use this page responsibly, what the result means, and which related tools or guides can help with the next step.

For best results, start with sample or non-sensitive data when you are learning a tool, then move to real work only after you understand the output. If the result will be sent to a client, imported into software, printed, published, or used in a security-related workflow, take an extra minute to verify formatting, totals, links, spelling, privacy, and destination requirements.

How to use it
  1. Enter the text color and background color.
  2. Review the contrast ratio and pass/fail guidance.
  3. Adjust either color until the result is readable for the intended text size.
  4. Test important hover, disabled, error, and active states too.
  5. Apply the approved color pair consistently in your design system or CSS.
How it works

Contrast ratio compares the relative luminance of two colors. WCAG guidance uses ratios such as 4.5:1 for many normal text situations and 3:1 for some large text or UI components. The exact requirement depends on text size, weight, and context.

The result should be treated as a working output, not a substitute for professional review where tax, security, accessibility, legal, accounting, or production data requirements apply. Check the destination system, final format, and any local rules before relying on the result.

Practical tips

Do not check only the main body text; buttons, links, helper text, and form errors also need contrast.

Text over images can fail when the image changes behind the letters.

Disabled text still needs to be understandable if users must read it.

A color can look vivid and still fail contrast if its luminance is too close to the background.

Related tools
Color Palette GeneratorQR Code GeneratorImage Resizer and CompressorHTML Entity Encoder and DecoderUTM Link BuilderWord and Character Counter
Related guides
Color Contrast Basics for Readable DesignQR Code Planning and Testing GuideHow to Choose Safe Online Utility ToolsWCAG Color Contrast Ratios Explained: AA and AAA
Color Contrast Checker FAQ

What contrast ratio should normal text meet?

A common WCAG AA target for normal text is 4.5:1, though requirements depend on text size and context.

Does large text need the same contrast?

Large or bold text may have a lower required ratio, but stronger contrast is often still easier to read.

Should button icons be checked?

Yes, important icons and controls should have enough contrast to be understood.