CleanorTools
Accessibility

Color Contrast Checker

Details

How to use Color Contrast Checker

What the tool does, how to run it, and what to expect from the result.

How to check colour contrast against WCAG

Contrast ratio is a number between 1:1 and 21:1 derived from the relative luminance of two colours. WCAG 2 sets four thresholds: AA needs 4.5:1 for normal text and 3:1 for large text, AAA needs 7:1 and 4.5:1. Those are the numbers an auditor will check, and they are the numbers a low-vision reader feels.

Enter your text colour and your background colour and this checker computes the ratio and tells you which of the four thresholds you clear, live, in your browser.

  • Enter the foreground (text) colour as a hex value, or use the colour picker.
  • Enter the background colour the same way.
  • Read the ratio and the four pass or fail badges: AA normal (4.5:1), AA large (3:1), AAA normal (7:1), AAA large (4.5:1).
  • Use Swap colours to check the inverse pairing, which is common for dark mode.
  • Darken the foreground or lighten the background until the badge you need turns green.
Tips

Getting a better result out of Color Contrast Checker

Specific settings and thresholds, not general advice.

  • WCAG AA needs 4.5:1 for body text but only 3:1 for large text, and large means 18.66px bold or 24px regular. That is why a grey that fails inside a paragraph can legitimately pass in a heading, and why the same colour pair can be both compliant and non-compliant on one page.
  • The ratio is computed from relative luminance, not from how bright the colour looks. That is why yellow on white is a disaster (both are high luminance, ratio around 1.07) while a mid-blue on white passes comfortably. Trusting your eye here is how teams ship unreadable links.
  • AAA is 7:1 for body text and 4.5:1 for large text. It is not the default target for a marketing site, but it is worth hitting for long-form reading, documentation, and anything a user will stare at for an hour.
  • The ratio scale runs from 1:1 (identical colours) to 21:1 (pure black on pure white). If you are hunting for a value, remember that you are chasing a contrast ratio, not a percentage, so 10:1 is already excellent.
  • Placeholder text, disabled buttons, and light-grey captions are where teams fail audits, because they are exactly where designers reach for a low-contrast grey. WCAG exempts disabled controls, and it does not exempt placeholder text that carries meaning.
Limits

What Color Contrast Checker does not do

The honest boundary, so you do not lose time finding it yourself.

  • Hex input only, 3-digit or 6-digit. No rgb(), hsl(), oklch(), or named colours, and no 8-digit hex with alpha.
  • It measures two opaque colours. It cannot account for transparency, a gradient, or text sitting over a photo.
  • It implements WCAG 2 contrast ratio only. It does not implement APCA, the perceptual algorithm proposed for WCAG 3.
  • It does not check non-text contrast for UI components and graphical objects, which has its own 3:1 requirement.
At a glance

Who Color Contrast Checker is for

A quick way to understand who this helps, what it solves, and where it connects next.

Best fit

Designers and developers checking WCAG color contrast.

Ideal for

Using the color contrast checker without installing anything or signing up.

FAQ

Common questions

Short answers for the questions people usually have before trying a utility like this.

What counts as large text?

WCAG defines it as at least 18pt, which is about 24px, or 14pt bold, which is about 18.66px. At that size the threshold drops from 4.5:1 to 3:1 for AA. This is why a colour can pass in your h2 and fail in the paragraph underneath it, and it is not a loophole: larger letterforms genuinely are easier to resolve at low contrast.

How is the ratio calculated?

Each channel is converted from sRGB to linear light, weighted (0.2126 red, 0.7152 green, 0.0722 blue) into a relative luminance, and the ratio is (lighter + 0.05) / (darker + 0.05). The green weighting is why green text seems to pass more easily than blue at the same apparent brightness: the formula models how much of our perception of luminance comes from the green channel.

Can I check text sitting on a photo or a gradient?

Not directly, and that is a real limitation of the whole WCAG contrast model, which assumes two flat colours. In practice, pick the lightest pixel under your text if the text is dark, or the darkest if the text is light, and test against that worst case. Or add a solid or semi-opaque scrim behind the text so there is a single background colour to test.

Does passing AA mean my page is accessible?

No. Contrast is one success criterion out of dozens. A page can pass every contrast check and still be unusable with a keyboard, unlabelled for a screen reader, or dependent on colour alone to convey meaning. Treat 4.5:1 as a floor you clear, not a certification you earn.

Why do my brand colours fail on white?

Most brand palettes were designed for logos and large fills, where contrast requirements are looser, not for 16px body text. The usual fix is not to abandon the brand colour but to keep a darker variant of it for text and links and reserve the original for backgrounds, borders, and headlines where 3:1 is enough.

Recommendations

You Might Also Like

Nearby tools from the catalog that fit the same job or workflow.

OG
UtilitySEO

Open Graph Image Preview

Check OG image fit

Preview one Open Graph image locally and check the practical share-card fit.

RATIO
UtilityRatio

Aspect Ratio Calculator

Solve aspect ratios

Reduce aspect ratios, solve missing dimensions, and check common layout presets.

CAN
UtilitySEO

Canonical Tag Checker

Check canonical tags

Check canonical tags from pasted HTML or head markup locally.

HEX
UtilityColor

Color Format Converter

Convert CSS color formats

Convert one color between HEX, RGB, RGBA, HSL, and HSLA with a live swatch.

LANG
UtilitySEO

Hreflang Tag Checker

Check hreflang tags

Inspect pasted hreflang tags locally and flag duplicates or suspicious codes.

CHK
UtilityHTML

HTML Validator

Check practical HTML issues

Run a practical HTML checker on pasted markup and surface common SEO/content issues locally.

Cleanor app

Do it all on your device

Cleanor puts these tools in one app: compress and convert images, video, and audio, work with PDFs, and scan text right on your device. Plus free up storage and clear inbox clutter with Email Cleaner. Start with a free trial.

  • iPhone
  • Android
  • Macsoon
  • Windowssoon
Get it on the App StoreGet it on Google PlayAll platforms & pricing