What counts as large text?

18pt, or 14pt bold. WCAG's own conversion is 1pt = 1.333px, which puts those at 24px and 18.66px. At that size the requirement drops from 4.5:1 to 3:1, and nothing smaller gets the exception.

Is color contrast required by law?

Often, yes, and which law depends on where you operate. In the United States, the Revised Section 508 Standards incorporate WCAG 2.0 level A and AA by reference for federal agencies and their suppliers. In the European Union, the European Accessibility Act has applied since 28 June 2025; it sets accessibility requirements rather than naming WCAG, and in practice they are met by following EN 301 549, the European standard that adopts WCAG level AA.

Can I still use a brand color that fails?

Yes, as long as nobody needs to read it. WCAG 1.4.3 exempts pure decoration and logotypes, so use the color for large shapes, backgrounds and your wordmark, and pair it with a text color that passes. For buttons, a deeper shade of the same hue usually clears 4.5:1 without changing the color your brand is.

What does the suggested palette change?

Only lightness, and only on the colors that failed. Hue and saturation are held, so each changed color is recognizably the one you brought in, and the panel says which color moved, what it was, what it became and which check it was failing. When the only lightness that passes would turn a color into a different one, such as a yellow darkened into olive, it is left as it is, and the panel says so and shows which of your colors reads as text on top of it instead. To start over instead of adjusting, the palette generator makes 10 new palettes from one sentence, for one AI credit.

Does it work for dark mode?

Yes. Import your dark palette the same way, then open “Change which color does what” and set Page to your dark background. Contrast is a ratio between two colors, so it works the same in both directions.

How many colors can I check at once?

Up to twelve, and every one is checked against every other in the same pass. With six colors that is thirty ordered pairs, which is the grid under “Every pair, side by side”.

Can I check just two colors, like white text on my brand color?

Yes: paste the two hex codes anywhere on the page, or remove the others from the bar. The pair is graded both ways against the level you pick, AA or AAA, and a lightness-only fix is suggested if it fails. With two colors, the sample page shows text on a background and nothing else.

What about WCAG 3 and APCA?

WCAG 3 is still a working draft, and it may use a newer way of measuring contrast called APCA. The WCAG 2 ratio used here is what current guidelines and laws refer to today.

Home › Tools › Contrast checker

Color contrast checker

This color contrast checker takes your whole palette and shows whether people can read text in those colors. We lay it out as a real page, flag what is hard to read, and suggest the smallest change that fixes it.

or tap a color below to change it

Your palette on a page

We give each color a job: your lightest becomes the page, the one that reads best becomes text, the most colorful becomes buttons and links.

See it:

NorthwindProductPricingAbout

Plan your quarter in one place

Northwind keeps your team’s goals, deadlines and notes together, so nobody has to chase an update.

Updated 3 days ago, 4 min read

Read the case study

Weekly check-insFifteen minutes, every Monday.

Start free trial

Change which color does what

PageTextCardButton and linkSmall textOnly in the illustration: Extra

2 things are hard to read

Numbers match the marks on the page.

Small gray text: Small text on Page is 3.20:1. It needs 4.5:1.
Small text on the card: Small text on Card is 2.72:1. It needs 4.5:1.

Every pair, side by side

Each square is one color as text on another as background. Rows are backgrounds, columns are text.

14 of 30 pairs are easy to read as body text. Pick any square to see it large.

Text →

Page

Card

Text

Extra

Small text

Button

Page

Card

Text

Extra

Small text

Button

Easy to readHard to read (hatched)

What the numbers mean

Contrast is how different two colors look in brightness, written as a ratio. The same sentence below sits on the same background; only the contrast changes. Most text needs at least 4.5:1.

Your order ships on Monday.1.49:11.50:1Hard for anyone

Your order ships on Monday.2.21:12.20:1Hard for many people

Your order ships on Monday.3.01:13.01:1Big headings only

Your order ships on Monday.4.50:14.46:1Most text needs this

Your order ships on Monday.6.98:16.99:1Strict, best for long reading

Your order ships on Monday.13.97:114.02:1Plenty

The same sentence, the same background. Only the contrast changes.

Which level do you need?

It depends on what the color is doing. Body text needs the most contrast, big headings and icons need less, and some things need none at all.

Large heading. At least 24px, or 18.66px bold.3:1
Body text and small print. Paragraphs, labels, captions. Small text gets no exception.4.5:1
Input borders and icons. Anything people need to see to use the page (WCAG 1.4.11).3:1
Button label. Text on a button is still text.4.5:1
Disabled buttons and logos. WCAG 1.4.3 exempts inactive components, pure decoration and logotypes.none

For long reading, like articles and documentation, aim for 7:1 (AAA).

Three fixes that solve most problems

These come up on almost every site we check. Each one keeps the look of the brand.

Delivered on Tuesday. Track your parcel any time.2.47:1 before

Delivered on Tuesday. Track your parcel any time.5.73:1 after

Light gray text on white. Darken the gray until it reaches 4.5:1. It still reads as secondary text.

Add to cart2.51:1 before

Add to cart5.36:1 after

White text on a bright brand color. Use a deeper shade of the same color for buttons, or switch the label to dark text.

Summer in the hillshard to read

Summer in the hillsreadable

Text over a photo. Add a dark fade behind the words, or move the text off the image. A photo has no single contrast ratio, so check the lightest spot under the text.

How to check whether your colors are readable

Bring your colorsImport them, or tap a color to change it.
See them on a pageAnything hard to read gets a numbered mark.
Take the fixWe suggest a fix and say why each color changed, or why one was left as it is.

Questions people ask

Short answers about contrast, WCAG and this checker.

The Web Content Accessibility Guidelines, published by the W3C. Level AA is the usual target: success criterion 1.4.3 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and 1.4.11 asks for 3:1 for icons and the parts of a control that tell you what it is.

The math runs in your browser. Pasted colors and images you pick colors from never leave the page.

More free tools

All tools

Palette generatorPalettes from a prompt
Palette visualizerPalettes on mockups
Image compressorSmaller JPG, PNG, WebP
Image resizerEvery size, every photo
Image converterHEIC, RAW, PSD, TIFF
Remove backgroundTransparent PNG
Image to SVG converterRaster to vector
SVG editorRecolor, erase, export

One file is free. Four hundred, on brand, in every size, is what we do.