Color contrast checker

Type two colors and get an instant WCAG read.

Colors

Hex format: #RGB or #RRGGBB
Tip: try your brand palette combos.

Preview

Bowerist
Clean, confident, and readable — that’s the whole point.
Text: #111111 Background: #FFFFFF
Contrast ratio
—

WCAG Results

AA — Normal text
≥ 4.5:1
—
AA — Large text
≥ 3.0:1
—
AAA — Normal text
≥ 7.0:1
—
AAA — Large text
≥ 4.5:1
—

*WCAG contrast is calculated using relative luminance (with sRGB gamma correction).*

Why did we build this?

We wanted to create a LOVELY color contrast checker, not a techy tool, but something that makes you want to come back! Bookmark this page and make a habit of coming back to check the color contrast of your social posts, website content or business collateral!

What is WCAG?

WCAG stands for Web Content Accessibility Guidelines. It’s the international standard used to make websites and digital content easier to use for people with disabilities — including low vision, colour blindness, and other accessibility needs.

For colour contrast, WCAG defines minimum contrast ratios so text is readable against its background:

  • AA is the most common baseline for accessible design (good for most websites)
  • AAA is the stricter standard (best-in-class readability)

If your colours don’t meet the recommended ratio, the fix is usually simple: darken the text colour, lighten the background colour, or increase text size/weight.

Learn more about color contrast & why it matters