Colour Contrast Checker

This free color contrast checker tests whether text is easy to read on its background. Enter two colours and you get the contrast ratio and the WCAG 2.2 results in one go, before the design reaches real users.

How to use the color contrast checker

1. Enter the text colour as a hex code, such as #595959, or choose it with the colour picker.
2. Enter the background colour in the same way.
3. Read the contrast ratio, for example 4.54:1. The bigger the first number, the stronger the contrast.
4. Check the pass/fail results for normal text, large text and UI components and graphics, at level AA and AAA.
5. Look at the live preview of normal and large text to judge the pair by eye. Press Swap to flip the two colours. The ratio stays the same, because the formula always compares the lighter colour with the darker one, but you can see how the pair looks in a light or a dark layout.

What the WCAG 2.2 thresholds mean

The Web Content Accessibility Guidelines (WCAG) 2.2 have three success criteria about contrast. This table shows the minimum ratio for each one.

The text rules come from 1.4.3 Contrast (Minimum) and 1.4.6 Contrast (Enhanced). The 3:1 rule for non-text items comes from 1.4.11 Non-text Contrast. It covers what people need to see to find a control and know its state, such as the border of a text field, the tick in a checkbox or a focus ring. It also covers the parts of icons and charts that are needed to understand them.

What counts as large text?

WCAG defines large text as at least 18 point, or at least 14 point bold. One point is about 1.333 CSS pixels, so this works out to about 24px regular text, or about 18.5px bold text in W3C’s own rounding. Body copy is almost never large text, so use the 4.5:1 rule for paragraphs, labels and buttons.

How the contrast ratio is calculated

The ratio compares the relative luminance of the two colours, which is how bright each one looks, from 0 for black to 1 for white. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. So results run from 1:1 (the same colour twice) up to 21:1 (black on white).

To get the luminance of an sRGB colour:

1. Divide each red, green and blue value (0–255) by 255.
2. Linearise each value: if it is 0.04045 or less, divide it by 12.92; otherwise use ((value + 0.055) / 1.055) ^ 2.4. The WCAG text prints the threshold as 0.03928, which W3C notes is an old figure. For normal 8-bit colours the result is the same.
3. Add them up with weights: 0.2126 × R + 0.7152 × G + 0.0722 × B.

Green carries most of the weight, because our eyes are most sensitive to it. That is why yellow and light green text on white fails so easily, while blue text often passes.

function luminance(hex) {
  const [r, g, b] = [1, 3, 5].map(i => {
    const c = parseInt(hex.slice(i, i + 2), 16) / 255;
    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function contrastRatio(a, b) {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return (hi + 0.05) / (lo + 0.05);
}

console.log(contrastRatio('#767676', '#ffffff').toFixed(2)); // "4.54"

Tips for choosing accessible colours

• Test brand colours early. Saffron #ff9933 on white is only 2.13:1, so it fails even for large text. Turn it round: dark navy text #1a1a2e on a saffron background is 8.01:1.
• Light grey text is the most common failure. If you need muted text on white, #595959 gives about 7:1 and #767676 is close to the 4.5:1 limit.
• Check every state: hover, focus and visited links, and text placed over photos or gradients. For gradients and images, test the worst spot.
• Do not use colour alone to carry meaning. WCAG 1.4.1 asks for a second cue, such as an icon, an underline or text.

Learn more

• CSS Colors and Backgrounds
• Colour in UI Design
• Web Accessibility Basics: A Beginner’s Guide to WCAG 2.2
• Colour Theory for UI Designers: Practical Rules for Screens
• Dark Mode Design and CSS: From Colour Choices to a Working Toggle
• Colour Converter (HEX, RGB, HSL)

Frequently asked questions