What Color Contrast Checker helps you do

Check whether text is readable on its background before you ship a design. Enter or pick two colors and the tool reports the WCAG 2.2 contrast ratio plus pass or fail grades for normal text, large text, and interface components, with a live preview of both sizes. It is the quick check before a brand palette becomes a support ticket.

All calculations run locally in your browser from the colors you enter. No palette, screenshot, or value is uploaded to Haivix servers.

How it works

Each color is converted to relative luminance using the WCAG formula, and the ratio is the lighter luminance plus 0.05 divided by the darker luminance plus 0.05. A pair of identical colors gives 1:1, and black on white gives 21:1. The preview renders both text sizes so the numbers are connected to what a reader actually sees.

How to use Color Contrast Checker

Pick or paste the text color and the background color.
Read the contrast ratio and the AA and AAA results for normal text, large text, and UI components.
Adjust one color until the pair passes, then copy the HEX values into your design or stylesheet.
Re-check the pair against the final rendered colors, not a mockup with opacity or overlays.

When to use it

Validate a brand palette before it reaches production.
Check button labels, form hints, and placeholder text that often fail contrast.
Document an accessibility fix in a design review or pull request.
Check link colors against the body background.
Test a dark-mode palette separately from the light theme.
Confirm that a disabled state is still distinguishable.

When not to use it

Do not use it to test text over photos or gradients; check the worst-case area separately.
Do not treat a passing ratio as full WCAG compliance.
Do not ignore font size and weight when judging a borderline result.

Example

A mid-blue button with white text measures 3.8:1, which fails AA for normal text. Darkening the blue to a deeper shade raises the ratio to 5.2:1 while keeping the brand hue, and the new HEX value is recorded with the measurement in the pull request.

What you can do with Color Contrast Checker

Pick a text color and a background color.
Read the contrast ratio from 1:1 to 21:1.
Check AA and AAA for normal and large text.
Check the 3:1 requirement for interface components.
Preview the pair at both text sizes.
Copy both HEX values and the measured ratio.

Example: fix a low-contrast button label

Enter the button's text color and its fill. If the ratio is below 4.5:1, the label fails AA for normal text even if it looks acceptable on a bright monitor.

Darken or lighten one color and watch the ratio. Changing the text is usually easier than changing a brand fill, and a darker shade of the same hue keeps the palette coherent.

Copy the HEX values and the ratio into the design review or pull request so the fix is documented and repeatable.

What to know before you start

It compares two solid colors; text over photos and gradients needs separate worst-case testing.
Contrast is one WCAG criterion and does not by itself prove accessibility compliance.
Perceived readability also depends on font weight, size, and letter spacing.
Opacity and blending are not modeled; enter the final composited colors.
The tool does not test focus indicators, motion or screen-reader semantics.

Common mistakes

Testing the intended color but shipping a lighter hover or disabled state.
Checking a mockup that has an opacity layer the final CSS does not use.
Treating large bold text as normal text, or the reverse.
Forgetting that placeholder text is text and must meet the same threshold.
Assuming a ratio of 4.5 is enough for a thin font at a small size.

Troubleshooting

If the ratio seems too high, confirm that the two colors are not both near white or both near black; the formula is sensitive to lightness, not hue.

If a brand color fails, keep it as an accent and use a darker or lighter tint for text.

If the preview looks different from the app, check for transparency, gradients or a background image behind the text.

If a large heading passes but body copy fails, the threshold is different for large text; test each size separately.

If you need to check a gradient, test the lightest and darkest points behind the text, not the average.

Color Contrast Checker