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

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 Compressor
Related guides
Color Contrast Basics for Readable DesignQR Code Planning and Testing GuideHow to Choose Safe Online Utility Tools
Color Contrast Checker FAQ