Color Contrast Checker

What is a color contrast checker?

A color contrast checker measures how readable text is against its background by comparing the two colors’ brightness. The result is a single contrast ratio, from 1:1 (the colors are identical and the text is invisible) up to 21:1 (pure black on pure white). The higher the number, the easier the text is to read.

This matters because a color combo that looks fine to you on a bright laptop screen can be unreadable for someone in sunlight, on a cheap monitor, or with reduced vision. The WCAG accessibility guidelines turn “readable enough” into concrete numbers, and this tool checks your colors against them in real time.

How to use it

1. Set your text color and background using the pickers or by typing a hex value — convert one from RGB or HSL first with our Color Converter if that is the format you have.
2. Read the contrast ratio shown below the live preview.
3. Check the AA / AAA rows for normal and large text — each shows Pass or Fail.
4. Adjust either color until you hit the level you need.

The preview shows real sample text in your chosen colors, so you can sanity-check the feel alongside the math.

The thresholds that matter

• AA, normal text — 4.5:1. The practical minimum for body copy. Hit this and the vast majority of users can read comfortably.
• AA, large text — 3:1. For headings and big labels (≈24px, or 18.66px bold).
• AAA, normal text — 7:1. A stricter target for high-accessibility products or text-heavy reading.
• AAA, large text — 4.5:1. The strong target for large type.

If you only remember one number, remember 4.5:1 — it is the line most teams design to.

Tips for better contrast

• Don’t rely on color alone. Links and states should be distinguishable by more than hue (underlines, icons, weight), since contrast and color-blindness are separate problems.
• Watch your grays. Light gray text on white is the most common failure on the web. Darken it until it clears 4.5:1.
• Test the real colors. Brand palettes often pass on paper but fail on screen once opacity, overlays or gradients are involved — check the actual rendered colors.
• Mind disabled and placeholder text. It is fine for it to be quieter, but it should still be perceivable; aim for at least 3:1 where it carries meaning.
• Large + bold buys you room. If a brand color narrowly fails for body text, it may pass for headings — use it there instead of forcing it everywhere.

Why it is worth the minute

Accessible contrast is one of those rare changes that helps everyone — not just users with low vision — and it costs almost nothing to get right. Better readability means lower bounce, clearer calls to action and fewer support questions. Because this checker runs entirely in your browser, you can iterate on colors instantly and privately until they pass.