Skip to content
3Wdesign
Start a project
3Wdesign
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

Color converterHEX, RGB, HSL, OKLCH and CMYK in one goPalette generatorOKLCH color scales and harmoniesType scaleModular font sizes with a live previewCSS clamp() generatorFluid sizes between two viewport widthsPX to REM converterBatch px ⇄ rem for any root sizeAspect ratio calculatorSimplify W:H and resize without distortion

Let's make something good

Tell us about your project — we reply within one business day.

Get in touchServices