Skip to content
mistakes.show
793Kissues on 68,769 sites
mistakes.show
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

SERP snippet previewPreview title and description in searchrobots.txt generatorCrawler rules incl. AI botsrobots.txt testerIs this path allowed for this bot?hreflang generatorLanguage versions for search enginesSchema.org generatorStructured data in JSON-LDRedirect generatorRedirect rules for your server

Found mistakes on your site?

We can fix them in one sprint. Reply within one business day.

Get in touchServices