Color contrast checker

How to use the color contrast checker, with a worked example

The tool sits right above this section. It takes two colors, each as a six digit hex value (#rrggbb), a three digit short form (#rgb), or a choice from the color picker. The sample text under the inputs repaints as you type, once in normal size and once in large size, so you can see the pair as well as measure it.

Here is a real case from an audit. A shop used a mid grey, #777777, for product descriptions on a white page. Enter #777777 as the text color and #ffffff as the background:

Product details in #777777 on white

1. The ratio reads 4.47:1.
2. AA normal text fails, because 4.47 is below 4.5.
3. AA large text passes, because 4.47 is above 3.
4. Both AAA rows fail.
5. The UI parts and graphics row passes, so the same grey would be fine for an input border.

The grey is so close to the line that many people would call it fine by eye. The checker does not round, so it reports the fail honestly. Under the rows it then names the closest text color that passes AA for normal text, here #767676 at 4.54:1, one step darker in each channel, with a button that applies it:

Product details in #767676 on white

The suggestion only appears when the pair is below 4.5:1, and it only changes the text color. With white text on a mid blue button, for example, it may offer a dark grey text instead, because no shade of white can pass. If you want to keep white text, darken the button color yourself and test again. The checker opens with #595959 on white, which is 7.00:1, right on the AAA line.

The swap button exchanges the two colors. The ratio does not change when you swap, because contrast compares the lighter color with the darker one, whichever is on top. Swapping is still useful: it shows how a button with white text on a colored fill will look, using the same pair.

What each pass or fail row means in this accessibility color contrast checker

The checker shows five results. Each one maps to a WCAG success criterion. Only the rows that match your content matter, so a fail on an AAA row does not mean your site fails AA.

Legal rules and contracts nearly always point to level AA, so the first, second and last rows are the ones to watch. For the full rule text, the size definitions and the exemptions, read the WCAG contrast ratio rules. The UI row is explained in depth in our guide to contrast for controls and graphics.

How to fix a pair that fails

You rarely need a new palette. Small changes in lightness usually fix a fail while the color still looks like your brand. Work in this order:

1. Darken the text (or lighten it, on a dark background). Keep the hue and only move lightness. This is what the checker suggestion does.
2. If the text color is fixed, change the background instead, for example from a pale grey panel to white.
3. If both colors are fixed by the brand, make the text large enough to count as large text, then aim for 3:1.
4. Test again in every state: hover, focus, visited and disabled styles often use a second color that nobody checked.

The second row is a common trap. A grey that passes on white can fail on the light grey card that sits on the same page. Always test against the real background behind the words.

Checking colors from a design file or a live page

From a design file. Copy the hex values from the inspect panel of your design tool, not from a screenshot. Screenshots pass through the display color profile and can shift a value by a few steps. Watch for layer opacity: text set to #000000 at 60 percent opacity is really a mid grey once it is blended with the background, and that blended color is the one to test.

From a live page. The browser can measure contrast for you. In Chrome and Edge, right click the text, choose Inspect, then select the small color square next to the color property in the Styles pane. The color picker that opens shows the contrast ratio and marks AA and AAA, and it draws lines on the color area that show where passing colors begin. In Firefox, the Accessibility panel of the developer tools can check the whole page for contrast issues.

A browser extension checker scans many text elements at once, which is a fast first pass. Treat its list as a starting point. Extensions often cannot judge text over photos, gradients or video, and they miss colors that appear only on hover or focus. Our guide to WCAG checkers explains what automated tools catch and what they miss.

Brand colors that fail, and how to keep them

Bright brand colors are the most common reason a site fails contrast. Orange, yellow, light green and sky blue are bright, so white text on them is weak. A few real numbers:

• White on orange #ffa500: 1.97:1, a fail for every row. Black on the same orange: 10.63:1, a pass even for AAA.
• White on pure red #ff0000: 3.99:1, enough for large text only. A deeper red, #d32f2f, gives 4.97:1 with white.
• Yellow #fff000 text on white: 1.18:1. Yellow works as a background for black text instead.

Black on brand orange White on deep red

The usual fix is a small set of shades for each brand color: the bright original for large shapes, illustrations and big headings, and a darker text shade for links and small labels. Logos are exempt from contrast rules, so the logo itself can stay as it is.

To check a whole palette, make a grid with your text colors down the side and your background colors across the top, run each pair through the checker, and write the ratio in each cell. Share the grid with designers so everyone picks from pairs that already pass. This is what people mean by a color palette contrast checker.

Text on images and gradients

Contrast still applies when text sits on a photo or a gradient. The checker needs one background color, so pick the worst one: for white text, the lightest spot behind any letter; for dark text, the darkest spot. Use the eyedropper in the color picker to sample that spot, then test it.

A photo of a sky with white text across it may pass on the blue and fail on a cloud. A gradient from navy to light blue may pass at the left and fail at the right. If any letter sits on a failing area, the text fails.

Reliable fixes, in order of strength:

• Put the text on a solid panel next to or over the image.
• Add a dark overlay between the image and the text, then test the text against the darkest overlay result on the lightest part of the photo.
• Move the text to a calmer area of the image and lock the crop on small screens, where the image shifts.

.hero { position: relative; }
.hero::before { content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.6); }
.hero h2 { position: relative; color: #ffffff; }

A thin text shadow alone is not a dependable fix, because the checker cannot measure it and it often fails at the edges of each letter. Text that is part of the picture itself, such as a sign in a street photo, has no contrast rule; text placed on top by the website does.

Contrast in dark mode

Dark mode is a second color scheme, so it needs a second round of checks. A pair that passes in light mode tells you nothing about dark mode.

Many teams avoid pure white on pure black (21:1) for long text, because some readers, including many with astigmatism, see the letters glow or blur. An off white on an off black, like the first row, still passes AAA with plenty of room. Remember the borders, focus rings and icons too: they need 3:1 in both themes.

What contrast math cannot tell you

The ratio is a measure of lightness difference. It is useful and it is what WCAG requires, but it has blind spots:

• Thin and small fonts. A hairline font at 4.6:1 passes on paper and is still hard to read. The formula knows only two sizes, normal and large.
• Some color pairs. Many designers find white on bright orange easy to read even though it fails, and some dark pairs pass while looking muddy. Follow the number for conformance and use your eyes as a second check.
• Hue alone. Red and green can have similar lightness, so a pair can pass while a color blind reader still cannot tell which item is the error. That is a separate rule, covered in our guide to color as the only cue.
• States and moving content. The checker tests one pair at a time. Hover colors, focus styles, video captions and carousel slides need their own checks.

For the exact wording of the rule, see the W3C Understanding page for 1.4.3. Contrast is only one line of an audit; the WCAG checklist shows the rest.

Contrast guides on this site

This checker is the hub for color and contrast. Each guide below covers one rule in detail, with tests and fixes.

For the wider picture, read what WCAG is and accessible web design for designers choosing colors from the start.