Color contrast checker, free private WCAG test

Color Contrast Quick is a free, private color contrast checker. For testing a foreground color against a background color.

Enter the two colors, read the contrast ratio. And see WCAG 2.1 pass or fail guidance. For normal text, large text, and UI components.

That’s the whole job. Find out wether text or interface colors have enough separation before they ship. I mean, the tool runs in your browser, says your data never leaves the device. And can export batch results when you have more then one pair to test.

Free color contrast checker that runs in your browser

Color contrast is one of those small design checks that prevents very visible problems. Pale gray text on a white card might look calm in a mockup. But it can become tiring or unreadable once its used in body copy, form labels, buttons, helper text, or dashboard values.

A contrast ratio checker gives you a number. Like 4.54:1, instead of a guess.

Color Contrast Quick shows ratio to 2 decimals. Then maps it to WCAG 2.1 thresholds. So you can see which categories pass. Really.

You get results for AA normal text at 4.5, AA large text at 3. AAA normal text at 7, AAA large text at 4.5. And UI components at 3.

It’s also useful when a color is close. But not quite there.

Honestly the app includes Fix suggestion, Suggest AA normal. And Suggest AAA normal options that can look for a nearest passing foreground color. When one is available.

If no passing color is found. With the selected background, the app can say that too. Makes sense.

When to check foreground and background contrast

Check contrast any time a color carries information or has to be read. Plus, that includes paragraph text, headings, navigation labels, error messages, pills, badges, buttons, form borders, icons, and text placed over colored panels.

The easiest habit is to test a pair before it becomes a repeated style.

If your design system has a primary blue button. With white text, check that pair once. Then check the hover, disabled, danger, success and secondary variants separately. Small changes matter. Now a background that looks liek the same blue. After an opacity tweak can produce a different ratio.

For content work, the risk is usually subtler. A creator might choose a brand accent. For a pull quote or put white text over a soft pastel block.

An accessibility color checker helps you catch those choices. Before they become a readability complaint.

Youll find times not to overuse the result. A passing ratio doesnt prove a full page is accessible. Also it doesn’t replace good type size, spacing, layout, or clear wording. If the font itself is to small, Font Size Pro can help you think. Throught readable sizing alongside contrast. Rather than treating color as the only variable. And that matters.

How to check a single foreground and background color

The Single tab is the place to test one color pair.

Use it for the classic question. Will this text color work on this background?

1. Open Color Contrast Quick for foreground and background testing.
2. Open the Single tab.
3. Set Foreground, text, using the native color picker or the hex text input.
4. Set Background using the native color picker or the hex text input.
5. Read the contrast ratio and the WCAG pass/fail results.
6. Review the live preview with Sample heading text. Plus, The quick brown fox jumps over the lazy dog.
7. Select Swap colors if you want to reverse the foreground and background.
8. Use Copy ratio if you only need the number as text.
9. Use Copy summary if you want a fuller text result to paste into an issue, design note, or review comment.
10. Try Fix suggestion, Suggest AA normal. Or Suggest AAA normal to find a nearest passing foreground color when available.
11. Open Batch, paste Color pairs, one per line. Like #fff, #000, then select Check pairs.
12. Use Export CSV or Export JSON if you need to save batch results.
13. Open Palette, enter one Foreground and Backgrounds. One per line, up to 50, then select Check palette.
14. Open History to review the last checks saved in localStorage. Re load a check. Or select Clear history.

A paid plan for Color Contrast Quick exists, but the source infomation doesn’t state prices.

If you already have a color set. And need to generate or compare swatches. Before testing contrast, Color Pal Lite fits earlier in the workflow.

Pick or adjust the palette frist, then bring likely text and background combinations into the checker.

How the WCAG 2.1 pass/fail results are shown

The ratio is the measurement. The pass/fail labels are the interpretation. That distinction helps because the same color pair can pass. For one use and fail for another.

Like a pair that passes AA large text at 3:1 may still fail AA normal text at 4.5:1. That doesn’t mean the tool is contradicting itself. Well it means the use case changed.

A big heading has a lower threshold than normal body text under the WCAG 2.1 categories shown in the app.

Color Contrast Quick reports these categories:

• AA normal text at 4.5.
• AA large text at 3.
• AAA normal text at 7.
• AAA large text at 4.5.
• UI components at 3.

I’d treat AA normal text as the default target. For readable interface copy. Unless you have a clear reason to do otherwise.

For tiny labels, placeholder style text. And dense data displays, passing the threshold is only the start.

You still need to judge whether the result is comfortable in context. Think abuot it.

Choosing Single, Batch, Palette, and History modes

Most people start with Single. But the ohter modes save time once you have more than a one off pair. The right mode depends on the shape of the question.

Single is best when you’re makign a decision inside a component. Batch is better for reviewing a list. From a design token file or a spreadsheet. Since long as each line is a foreground and background pair.

Palette mode is better when the foreground stays fixed. Such as white text. And you want to test it accross many card or badge backgrounds.

Batch checks, palette checks, and export options

Batch mode is for repetition. Paste Color pairs, one per line, then select Check pairs. The tool checks only the first 500 color pairs. That is enough for many token reviews. But stil a limit you should plan around.

Exports are available as CSV and JSON. Choose CSV if the results need to go into a spreadsheet or a simple review table. Choose JSON if the results need to be kept. In a structured format for a developer handoff or internal note.

And the fact that export exists doesn’t mean the tool scans codebases, CSS files, websites, or design files. It checks the pairs you give it.

Palette mode answers a slightly different question.

Enter one Foreground, then add Backgrounds, one per line, up to 50. And select Check palette. Look, this is handy for testing one text color. Across a set of swatches. Like a neutral ink color. Across pale backgrounds or white text across brand tones.

Copying results, fix suggestions, and local history

Copy ratio is the fast option. It gives you the contrast ratio as text. That is useful wehn a ticket or comment already has enough context.

Copy summary is better when someone else needs to understand the result without opening the tool. Plus a summary can sit in a design review note next to the proposed hex values. Teh pass/fail result. And the preview decision.

Fix suggestion is where the tool becomes more than a pass/fail sign. Suggest AA normal or Suggest AAA normal can look for a nearest passing foreground color when availible. That matters when the background must stay fixed. Like a brand panel or existing product surface.

If the app says No passing color found. With this background, pick a different background. Change the foreground more alot. Or reconsider the treatment.

History stores the last 50 checks in localStorage, you can re load a check or select Clear history. That makes it useful for short work sessions. But it isnt cloud sync and shouldn’t be treated as a permanent project record.

Privacy, limits, and what this accessibility color checker does not do

The page states that Color Contrast Quick runs in the browser. And that data never leaves the device.

For private brand palettes, unreleased interface colors. Or internal prodcut work, that local model is a good fit.

There are still boundaries. Batch mode checks only the first 500 color pairs. Palette mode checks olny the first 50 backgrounds.

History is limited to the last 50 checks. And is saved in localStorage.

The app can also return invalid color messages, such as Line 1. Invalid color, foreground.

That’s a formatting porblem, not a accessibility judgment. Fix the color value first, then run the check again.

Don’t treat a WCAG contrast checker as a legal stamp or an automated accessibility certificate. Color Contrast Quick checks foreground and background combinations against the listed WCAG 2.1 thresholds.

It doesn’t audit whole websites, pages, CSS files, or design files. Also it doesn’t cover every accessibility issue.

Common mistakes and quick fixes

Testing the brand color but not the actual background

A designer might test white text against the main brand blue. Then use that text on a lighter hover state. The fix is simpel. Test the exact foreground. And the exact background that appear together in the UI.

Reading AA large as a pass for all text

AA large text uses the 3:1 threshold, while AA normal text uses 4.5:1. If the copy is body text, labels, helper text, or small navigation text, judge it by the normal text result rather than the large text category.

Forgetting to check the reversed pair

A dark color on a light background may pass. But the reversed combination can be used elsewhere. And should be checked on its own.

Use Swap colors, then read the new ratio and pass/fail labels.

Pasting too many lines into Batch

Batch mode checks only the first 500 color pairs. If you have more, split the work into separate runs and export each set as CSV or JSON. So the unchecked lines dont get lost.

Assuming history is a project archive

History keeps the last 50 checks in localStorage. If a result needs to survive device changes, browser cleanup, or a longer review cycle, use Copy summary or export batch results instead.

Using invalid hex values

If you see a message such as line 1. Invalid color, foreground, inspect the line before debating the result.

Check the comma, the foreground value, the background value. And the hex format, then select Check pairs again. You get the idea.

Frequently asked questions

What is a good contrast ratio for text?

For the WCAG 2.1 results shown in Color Contrast Quick. Normal text passes AA at 4.5:1 and AAA at 7:1.

Large text passes AA at 3:1 and AAA at 4.5:1. If you’re unsure which category applies, test the actual text treatment. Rather than guessing from the color alone.

Can I use it as a hex color contrast checker?

Yes. Truth is, the tool has hex text input. Plus, a native color picker for Foreground, text, and Background. That makes it practical. When you already have values such as #fff and #000. From a design spec or style token.

Does it work as a foreground background contrast checker for UI components?

Yes. Along with text categories, Color Contrast Quick shows a WCAG 2.1 pass/fail result for UI components at 3:1.

Use that for things like interface elements where the component boundary or state color needs contrast.

Can I check a whole palette at once?

You can check one Foreground against many Backgrounds in Palette mode. With a limit of 50 backgrounds.

If you have many separate foreground and background pairs, Batch mode is the better fit. And checks the first 500 pairs.

Can I export results from the color contrast tester?

Batch results can be exported as CSV or JSON. CSV is useful for spreadsheets and review lists. Meanwhile, JSON is useful when you want structured results for a handoff. The tool doesn’t state export formats beyond CSV adn JSON for batch results.

Is this enough to prove WCAG compliance?

No. It gives WCAG 2.1 contrast pass/fail guidance for the listed thresholds. That is one part of accessibility review. A complete review also needs human judgment about content, layout, interaction, focus states, forms, and other issues outside color pair testing.

Start with the color pair that appears most offen in your interface. Usualy body text on the main page background. If it passes for the way you use it, move to buttons, links, form labels, alerts, and palette variants, then copy or export the results so the decision is easy to review later.

.