Color Contrast Checker

Large sample heading

This is sample body text in your chosen colors. It shows how the text pair will look on a real page.

Contrast ratio: --
AA normal text ≥ 4.5  AA large text ≥ 3  AAA normal text ≥ 7  AAA large text ≥ 4.5

About Color Contrast Checker

This is a JavaScript widget that computes contrast ratios live. You pick a text color and a background color. The widget calculates the WCAG ratio in the browser. No page reload is ever needed.

WCAG is the web accessibility standard. It sets minimum ratios for readable text. Normal text needs 4.5 to 1 for AA level. Large text needs 3 to 1 at the same level.

Designers use it while building color palettes. Developers use it before shipping UI changes. Content teams use it on brand colors. Anyone can test any color pair instantly.

The widget shows pass or fail as you adjust colors. You see the result the moment you change a value. This live feedback speeds up the design loop. Keep adjusting until the pair passes.

How to use

  1. Open the checker widget on the page.
  2. Enter the text color as a hex code.
  3. Enter the background color as a hex code.
  4. Watch the ratio update live in the widget.
  5. Read the AA pass or fail grade shown.
  6. Switch to the AAA view for stricter targets.
  7. Adjust one color at a time until it passes.
  8. Copy the passing pair into your style guide.

Why use it

  • It tests color pairs without leaving the page.
  • It meets WCAG ratios for accessible text.
  • It cuts the risk of accessibility complaints.
  • It improves reading for low vision users.
  • It keeps brand colors while staying readable.
  • It runs as a free widget with no signup.

Tips

  • Test real text over photos not just flat colors.
  • Check hover and focus states as separate pairs.
  • Darken the text a bit before changing its hue.
  • Save passing pairs with their ratios noted.
  • Retest after any brand color change.

Frequently asked questions

What is a good contrast ratio

Aim for 4.5 to 1 on normal body text. Large text can pass with 3 to 1. Higher ratios are always safer for readers. Test every text pair you ship.

What do AA and AAA mean

They are WCAG conformance levels. AA is the common target for most sites. AAA is stricter and harder to reach. Most teams aim for AA first.

How does the widget compute the ratio

It runs the WCAG luminance formula in JavaScript. The math happens in your browser instantly. No data leaves your device. The result matches the standard formula.

Do buttons and icons need contrast too

UI parts need 3 to 1 against nearby colors. This covers icons and borders and focus rings. Text labels still need text ratios. Check the full component.

What counts as large text

Large text is at least 18 point regular type. Or 14 point bold type and up. These sizes pass with 3 to 1. Body text still needs 4.5 to 1.

How do I fix a failing pair

Darken the text color a little first. Or lighten the background color instead. Small shifts often cross the pass line. Retest after each change.

Does the widget store my colors

The widget stores nothing at all. All math runs on your device. Nothing is sent to a server. Close the page and the colors are gone.

Does the ratio update in real time

The widget recalculates on every change. You see the new ratio instantly. No button press is needed. This makes palette tuning fast.

Can I test gradients or images

The widget works with flat color pairs. Gradients vary across the surface. Test the lightest point of the gradient. That is the worst case for contrast.

Readable text is the base of good design. This widget grades your pairs in real time. Test a pair and adjust until it passes.