Free tool

Color Contrast Checker

Check any two colors against the WCAG contrast rules, get the nearest shade that passes, and convert between HEX, RGB and HSL.

Use this free color contrast checker to test any two colors against the WCAG rules, straight in your browser. Put in a text color and a background color and the ratio appears as you type, with a pass or fail for each of the five levels that matter. Hex, rgb(), hsl() and plain CSS names such as tomato all work, and a color with transparency is composited over its background before it is measured, because that is what a reader actually sees.

If a pair fails you get the nearest color that passes, rather than a cross and no way forward. Nothing is uploaded: there are no files here at all, only color values, and they never leave the tab. Setting a whole type scale instead? Use the font clamp calculator.

1. Pick the two colors

Text color

Background color

Accepts hex, rgb, rgba, hsl, hsla or a CSS color name.

Or try a pair

2. The result

21 Contrast ratio

3. How it actually looks

Large text at 30 pixels

Body text at 16 pixels. This is the size most of a page is set in, and it is the size the 4.5 to 1 rule is written for. Read it, rather than trusting the number on its own.

Small print at 13 pixels, which is where a marginal pair stops being readable first.

4. Tints and shades of the text color

Each step is mixed toward white or black in sRGB, which is what a design tool means by a tint and a shade. The number under each one is its ratio against the current background, so you can see where the pair starts passing.

5. The same color, written every way

How to check color contrast

Five steps, no account and nothing to install.

Put in the two colors. Type a hex such as #767676, an rgb() or hsl() value, or a plain CSS name. The swatch beside each field opens your system color picker, and in Chrome and Edge a pipette button appears that takes a color from anywhere on your screen.
Read the ratio and the five badges. AA for normal text at 4.5 to 1 is the one almost every brief and every audit means. Large text and interface elements need 3 to 1. AAA asks for 7 to 1 on normal text.
Look at the preview. The panel underneath paints your pair at 30px, 16px and 13px with a button border, because a ratio that scrapes past a threshold can still be hard to read and a number on its own will not tell you that.
If it fails, take the suggestion. The tool walks your text color lighter or darker in one percent steps until it clears 4.5 to 1, then offers the first one that does. Use This Color applies it and the badges update.
Or pick from the tints and shades. Nine steps of your text color, each labelled with its real ratio against the current background, so you can see exactly where the pair starts passing and keep the hue you began with.

More free tools

Built for our own work, free for yours. No sign-up on any of them.

Font Clamp

Fluid clamp() for font size and its matching line height, across a whole type scale.

Email Signature Generator

Make a professional email signature that holds its shape in Gmail, Outlook and Apple Mail. Fill in your details, pick a layout, copy it and paste it in.

QR Code Generator

Generate styled QR codes with custom colors, dot styles, and logos.

Schema Markup Generator

Build valid JSON-LD for a local business, service, FAQ, article or breadcrumb trail, with every property Google treats as required checked before you paste it.

Meta Tag Preview

See how your page will look as a Google result and as a Facebook, X or LinkedIn card, then copy the tags. Measured by pixel width, which is what actually gets cut.

Case Converter

Switch text between sentence case, title case, camelCase, snake_case, and more.

UTM Builder

Tag your campaign links so analytics can tell where the traffic came from. Build a whole campaign at once and take the set out as a CSV.

Image Resizer

Resize images to any width, height or preset size, crop to fit, and convert the format. Batch, and nothing is uploaded.

PDF Compressor

Shrink PDF file sizes right in your browser. Batch upload and ZIP download supported.

Merge PDF

Join several PDFs into one file, in the order you choose. Nothing is uploaded and no quality is lost.

Split PDF

Split a PDF into separate files, or pull out only the pages you need. Pick them from thumbnails or type ranges.

Favicon Generator

Generate a complete favicon package, download as ZIP with HTML snippet.

Image Converter

Convert images to WebP, PNG, or JPG. Batch upload and download as a ZIP.

What people check color contrast for

Usually because something has to be readable by everyone, and somebody has asked for proof.

Settling an argument about a brand color

A palette that reads beautifully in a presentation can fail outright as body text. The ratio is the same number for everyone, so it turns a matter of taste into a matter of fact.

Fixing a failed accessibility audit

An audit hands you the pairs that failed and the ratio each one needs. This hands back the nearest color that passes, so the fix keeps the hue instead of throwing the palette out.

Choosing text for a colored section

Put the section background in, then walk the tints and shades of your text color until the number under a swatch clears the bar. No guessing, and no second tool.

Checking a button, not just the words on it

Borders, icons and form outlines are held to 3 to 1 rather than 4.5, which is why a control that looks faint can still be compliant and one that looks fine can still fail.

Testing text over a translucent overlay

Text on a scrim is measured on what is actually painted, not on the color you typed. Enter the overlay with its alpha and it is composited over the background first.

Building a palette that passes from the start

Far cheaper than discovering at launch that the secondary color cannot carry text. Check the pairs while the palette is still a decision rather than a dependency.

Frequently asked questions

What the levels mean, what happens to your colors, and why the number can differ by 0.01.

Are the colors I enter sent anywhere?

No. The whole tool runs in your own tab and there is nothing to upload: a color is a few characters and the arithmetic happens on your device. The page does send three counters, which are how many checks were run, how many values were copied, and one per visit. Those are numbers only and carry nothing about your colors or your palette.

What counts as large text?

WCAG means 18pt, which is 24px, or 14pt bold, which is about 18.66px. At or above that size a pair only needs 3 to 1 instead of 4.5 to 1, and below it 4.5 to 1 applies. This is why a headline can pass in a color that the body text underneath it cannot use.

Should I be aiming for AA or AAA?

AA is the level almost every brief, procurement requirement and audit means, and it is what the accessibility regulations in most countries are written against. AAA at 7 to 1 is a genuinely high bar that rules out a lot of otherwise usable color, and it is normally treated as an aspiration for body text rather than a requirement. If nobody has told you which one they want, they mean AA.

Another checker says 4.50 and this one says 4.49. Which is right?

Both are computing the same number and the difference is rounding. A raw ratio of 4.4951 rounds up to 4.50 but is genuinely below the 4.5 threshold, so a tool that rounds before it compares will show 4.50 next to a pass for a pair that actually fails. This one decides the pass or fail on the full unrounded value and rounds the displayed number down, so what you see can never claim more contrast than there is. On any pair that is comfortably clear of a threshold the two tools agree exactly.

Does a color with transparency work?

Yes, and it is handled properly. rgba(0, 0, 0, 0.5) is not black: what a reader sees is that black mixed with whatever is behind it. The tool composites the text color over the background color, and the background over white, before it measures anything. Skipping that step overstates the contrast, which is the dangerous direction to be wrong in.

What do the 3 to 1 badges cover?

Two separate things. One is large text, as above. The other is non-text contrast: the visible boundary of a button, a form field outline, a focus ring, an icon that carries meaning, and the parts of a chart you need to tell apart. Those are held to 3 to 1 against whatever sits next to them. It is the rule people forget, because it is easy to check the words on a button and never check the button.

Does this check my whole page?

No. It checks one pair of colors at a time, which is deliberate: this is the tool for while you are choosing colors, or fixing a specific finding. To sweep an existing page for every pair on it you want a browser extension or an automated audit, and then you come back here to work out what to change each failure to.

Which formats can I paste in?

Hex in three, four, six or eight digits, so #abc, #abcd, #1A2B3C and #11223344 all work. rgb() and rgba() in comma or space form, with percentages if you prefer. hsl() and hsla() the same way. And the CSS color names. Anything it cannot read is flagged rather than quietly treated as black, so a typo can never show you a confident number for a color you did not mean.