HH Color Lab
Contrast Checker

Make your text easy to read.

Ensure your design’s legibility with our color contrast checker. Test text and background colors to meet accessibility standards and enhance user experience.

Choose two colors

Ensure your design’s legibility with our color contrast checker. Test text and background colors against WCAG 2.2 and APCA standards to meet accessibility requirements and enhance user experience.

Try an example:

Result

The contrast ratio goes from 1:1 (no difference) to 21:1 (black on white).

0:1

CheckNeedsResult

How to use this tool (step by step)

Small steps, each with the reason behind it. Perfect for beginners, and a handy checklist for experts.

  1. Choose the text color

    • Press the small color square next to Text color, or type a HEX code such as #1B1A24.
    • Pick the color your words will have.
    • Watch the sample on the left change.

    Why we do this: The tool compares text and background, so it needs to know both.

  2. Choose the background color

    • Do the same for Background color.
    • Not sure which colors to try? Press one of the example buttons.
    • Use Swap colors to see what happens when text and background change places.

    Why we do this: Readability depends on the pair of colors, not on a single color.

  3. Read the result

    • Look at the big number (the contrast ratio).
    • Read the sentence under it: Excellent, Good, Only for big text, or Hard to read.
    • Check the table: green Pass means you meet that standard, red Fail means you do not.

    Why we do this: These are the rules of WCAG, the international guidelines that help people with low vision, tired eyes or sunny screens read your content.

  4. Fix colors that fail

    • Look at the Quick fix buttons under the table.
    • Press one to use a similar text color that passes.
    • Check the sample again to see that it still looks good.

    Why we do this: The fix keeps the same color family and only makes it lighter or darker, so your design keeps its style.

  5. Remember the sizes

    • Normal text needs a ratio of at least 4.5 to pass level AA.
    • Large text (about 24 pixels, or 19 pixels bold) needs at least 3.
    • Buttons, icons and borders need at least 3.

    Why we do this: Bigger shapes are easier to see, so they are allowed lower contrast.

Questions people ask

Quick answers.

What is a contrast ratio?

It compares how bright two colors are. The number goes from 1:1 (identical) up to 21:1 (pure black on pure white). Higher is easier to read.

What is the difference between AA and AAA?

AA is the normal target for most websites (4.5:1 for normal text). AAA is stricter (7:1) and recommended when you want the best readability.

Does this check color blindness?

Contrast is measured by brightness, which also helps people with color blindness. Do not rely on color alone, though. Add labels or icons too.

Is it legal to need this?

Many countries have accessibility rules for public websites and services that refer to WCAG. Checking contrast is one of the easiest parts to get right. This tool is a guide and not legal advice.