WCAG Color Contrast Checker

How to use

1. Type a colour into Text colour. Three hex digits or six, hash or no hash, any case, or a CSS name, rgb(), hsl() or oklch(): #1a73e8, 1a73e8, #FFF and navy are all accepted.
2. Do the same in Background colour, or click the small square beside the box to open your system colour picker.
3. Read the contrast ratio. The number is cut, not rounded, to two decimal places, so it can never read past a line the pair misses.
4. Check the five verdicts underneath: normal and large text at AA and AAA, plus icons and focus at 3:1, each with how far it clears or misses.
5. Look at the sample before you commit. If the sample sentence is uncomfortable to read at a passing ratio, believe your eyes and push the colors further apart.

About this tool

Contrast ratio is a single number between 1 and 21, and WCAG hangs nearly all of its readability rules on it. Black on white is 21. Two identical colors are 1. Everything you actually ship lands somewhere in between, and a WCAG contrast checker exists to tell you where. Put a colour in Text colour, another in Background colour (hex, a CSS name, rgb(), hsl() or oklch() all read), and the big number redraws on the keystroke. There is no Calculate button, because there is nothing to wait for.

Five verdicts sit under that number. Normal text has to clear 4.5:1 for AA and 7:1 for AAA. Large text, which the spec defines as 24px, or 18.67px (14pt) when it is bold, gets the softer 3:1 and 4.5:1, and icons, control borders and focus rings get their own 3:1 under WCAG 1.4.11. Each verdict says Pass or Fail and how far the pair is from the line, rather than leaving you to compare against a table you half remember.

Further down the same two colours are painted onto real sentences at the four sizes the rules turn on (16px, 18.67px bold, 24px and 24px bold), with an icon, an outlined button and a focus ring drawn in the text colour. Ratios are blunt instruments, and the sample catches the cases where the arithmetic says fine and your eyes disagree. On Chrome and Edge a small pipette also appears beside each swatch. Click it and you can lift a color from anywhere on your screen, including a window that is not this one, which beats opening a screenshot in an image editor to find one pixel.

When a pairing fails, reach for lightness before hue. The luminance formula weighs the green channel at 0.7152, red at 0.2126 and blue at 0.0722, so most of your ratio lives in green and a change to blue barely moves it. Each side has a Lightness slider that keeps the hue, and when normal text fails the page works out the nearest colour along the same hue that clears 4.5:1 and offers it in one press.

The blue Bootstrap had to change

Bootstrap 4 shipped its primary blue as #007bff. The page opens on it against white, and the ratio reads 3.97. Normal text comes back AA Fail and AAA Fail, while Large text gets AA Pass, and the nearest blue that would clear AA is #0072ee. The framework default that a lot of sites inherited for links was never legal for body copy at AA, only for headings.

Bootstrap 5 ships #0d6efd instead. Against the same white, the ratio comes out at 4.5. Normal text flips to AA Pass and Large text picks up AAA Pass as well. Put the two blues next to each other and most people cannot tell them apart.

Good to know

• Opacity belongs in Text alpha, not in the colour: an eight-digit hex such as #1a73e880 is refused with a pointer to that field, and a text alpha is composited over the background before anything is measured. The background is treated as opaque, because a translucent background depends on a page this tool cannot see. Text over a photograph or a gradient is out of reach too, since the ratio changes pixel by pixel and no single pair of colours can describe it.