Skip to content
An independent index of 1,651 brand websites — platforms, security, email and SEO Web indexAdvertiseContact
coolbrands
Find a brand
coolbrands
Get in touch
  1. Home
  2. Tools
  3. Contrast checker
Runs in your browserDesign

Color contrast checker

Pick a text and a background color to get the WCAG contrast ratio, pass or fail for each level, and the closest text color that passes. Runs in your browser.

#1f2937
#ffffff
Runs locally — nothing is uploaded
Result
Pick two colors to check their contrast.

How to use

  1. 1Pick the text color and the background color.
  2. 2Choose normal or large text: large means at least 24px, or 18.66px bold.
  3. 3Read the ratio and the results: AA needs 4.5:1 for normal text and 3:1 for large text and UI parts.
  4. 4If a check fails, click a suggested color to copy it.

WCAG 2 uses relative luminance: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. It ranges from 1:1 to 21:1. The result is rounded down here, so 4.49:1 fails a 4.5:1 requirement.

APCA is the contrast method proposed for WCAG 3. It accounts for text polarity and gives a lightness contrast value Lc of up to about 106. It is shown for reference only; audits and laws still use WCAG 2.

At least 18pt (24px) regular or 14pt (about 18.66px) bold. Large text needs 3:1 for AA and 4.5:1 for AAA.

Icons, input borders, focus indicators and other parts needed to understand or operate the page (WCAG 1.4.11 Non-text contrast).

Related tools

Palette generatorOKLCH color scales and harmonies Color converterHEX, RGB, HSL, OKLCH and CMYK in one go Domain typo generatorTyposquatting variants of your domain, for brand protection Domain name generatorTurn keywords into hundreds of domain name ideas Open Graph generatorSocial share tags with a preview SERP snippet previewPreview title and description in search

Want your brand’s website benchmarked?

We compare your site with your category on security, speed, email and SEO — and fix what lags behind.

Get in touchServices