Contrast ratio 3.8 of 21. Reads only at big sizes. WCAG AA Large.

Color Contrast Checker

Pick two colors. The whole page shifts to them. If you can read this comfortably, your design will too.

Text color
#
Background
#

Reads only at big sizes.

Use it for large headlines and chunky buttons, not for small print or body text. Look at the back of the card below to see what happens at small sizes.

3.8of 21

21 is the highest ratio possible. Pure black on pure white hits exactly 21.

It measures the brightness difference between two colors, adjusted for ambient light. A ratio of 7 means one color reads about seven times brighter than the other.

Business card contrast for your next project.

This is what your colors look like printed on a real business card. The front uses your background color, the back flips it. If the name on the front feels confident and the details on the back read clean, you have a print-ready pair. The colors you pick above flow straight through.

Hover either card to reveal a color chip. Tap the chip to change that side's color.

Two surfaces, one ratio.

The math is the same. The medium is not. A pair that reads cleanly on a glowing screen can fall apart on a piece of paper.

For screens

Displays emit their own light, so contrast looks crisper than the math suggests. WCAG sets the standard most accessibility laws follow.

  • Body text needs at least 4.5 to meet WCAG AA.
  • Large headlines and buttons can go as low as 3.
  • Aim for 7 on long-form articles. Easier on the eyes.

For print

Paper has no backlight, so low-contrast pairs that pass on a screen can become unreadable in print, especially under warm lighting or at small sizes.

  • Aim higher than the web minimums. 7 or above is safe.
  • Small print on business cards and custom stickers needs strong contrast.
  • Uncoated paper softens color. Bump contrast a notch for matte stocks.

How this works.

The contrast ratio is a single number that describes how different two colors look to the human eye. It runs from 1 (the two colors are the same, so the text is invisible) up to 21 (pure black sitting on pure white, the highest contrast possible). The bigger the gap between your two colors, the higher the ratio, and the easier the text is to read.

The thresholds at 3, 4.5, and 7 come from the Web Content Accessibility Guidelines, which is the international standard for digital readability. Below 3, almost no one can read it. From 3 to 4.5 is okay for big text only. From 4.5 to 7 works for normal body copy. Above 7 is comfortable for everyone, including people with low vision or color blindness.

The same principles carry over to print. The math was built for screens, but the eye is still the eye. If a color pair fails on a website, it usually fails on a sticker or a business card too.

Still picking your colors? Our color palette generator can suggest combinations that work well together. Try a palette there, then bring two colors here to check that they read clearly.