Text Contrast Checker

How to use the contrast result

1. Enter a foreground and background as opaque 3- or 6-digit hex colors.
2. Read the ratio and the assessment for the text size you will actually use.
3. Try the same pair in the real interface, including links, disabled states and focus indicators.
4. Check other requirements separately; this calculation is one part of accessibility work.

For W3C’s large-text threshold, use at least 18 points for regular text or 14 points for bold text, approximately 24px and 18.67px respectively. A large-looking heading in a screenshot is not enough evidence of its actual size and weight.

The formula, with two known checks

Convert each sRGB channel from 0–255 to 0–1. At or below 0.04045 divide it by 12.92; otherwise raise ((channel + 0.055) / 1.055) to 2.4. Relative luminance is 0.2126 × R + 0.7152 × G + 0.0722 × B after that conversion. The contrast ratio is (lighter + 0.05) / (darker + 0.05).

Swapping the two colors keeps the mathematical ratio the same. In an actual interface, the color’s role and surrounding elements still affect which requirement you must check.

What this checker cannot establish

The input accepts opaque sRGB colors only. It rejects 4- or 8-digit alpha hex values, named colors, gradients and CSS color functions. For transparency or an image background, first determine the actual composited colors at the relevant positions; a single pair cannot describe a changing background.

Non-text contrast applies to relevant information in interface components and graphical objects, with specific conditions and exceptions. A 3:1 result here is a comparison aid, not a statement that every border, icon or chart meets that criterion.

This page does not test keyboard access, screen-reader names, focus order, zoom behavior or the accessibility of a complete site. The preview intentionally lets you view failing pairs, but a failing pair should not become production text simply because it appears in the demo.

A small color review you can repeat

Make a list of the actual text/background pairs: body text, secondary text, link, button, error, placeholder and focus indicator. Note font size and weight beside each text pair. Use this tool to identify a candidate pair, then inspect it in the page where it will be used.

Keep labels such as Pass and Fail alongside color. A green or red mark alone would make the result harder to understand for some readers. When changing a color, check every component that uses the same design token so one fix does not create a different failure elsewhere.

The calculation stays in this browser and is not saved automatically. If you need a project record, copy the pair, ratio, threshold and tested context into your design review. That context makes the result useful beyond a standalone number.

Practical usage checklist

Check the pair you will ship, not a simplified mock: body text, muted captions, links, button labels, error text and focus rings each need their own foreground and background. Record font size and weight next to every text pair so large-text thresholds are applied honestly.

After the ratio passes, re-check the colors on the real surface — over images, gradients, glass overlays or scrolled content where the effective background changes. Copy the hex pair, unrounded decision and context into your design review so the number remains actionable.

Frequently asked questions