Color contrast checker

What the contrast ratio measures

The contrast ratio compares how bright two colors look to the eye, from 1:1 (the same color twice) to 21:1 (black on white). It is the number the Web Content Accessibility Guidelines (WCAG), published by the W3C, use to decide whether text can be read by people with low vision or color vision deficiencies, and by everyone else on a phone in the sun. Hue plays almost no part: a red and a green of the same brightness have a ratio close to 1:1, however different they look. Whether you call it a color or a colour contrast checker, the test is the same one, defined in the same W3C document for the US, the UK and the EU.

The formula in plain words

Each color is turned into its relative luminance, a number from 0 (black) to 1 (white). The red, green and blue values are first converted from the screen's sRGB curve to linear light, then weighted the way the eye perceives them: green counts most (about 72%), red about 21% and blue only about 7%. That is why yellow looks so much lighter than blue at the same saturation. The ratio is then (lighter luminance + 0.05) divided by (darker luminance + 0.05). The 0.05 stands for the glare that a real screen always adds. The exact steps are in the methodology section at the end of this guide.

WCAG says the result must not be rounded up, so 4.499:1 fails a 4.5:1 test. Gray #777777 on white is the classic near miss: 4.478:1, shown here as 4.47:1, which fails AA for normal text by a hair. Its neighbor #767676 is the lightest gray that passes, at 4.54:1. Barely a step apart in the hex code, and on opposite sides of the line.

AA and AAA: what each level asks for

WCAG has three conformance levels. Level AA is the one websites are usually held to; AAA is stricter and the W3C itself does not recommend requiring it for whole sites, because some content cannot meet it. The contrast rules in WCAG 2.2 are:

What counts as large text

Large text is at least 18 point, which is 24 CSS pixels, at regular weight, or at least 14 point bold, which is about 18.66 CSS pixels. Most body copy, at 16 px, is normal text whatever the font. Thin and decorative fonts read smaller than their size suggests, so give them more contrast than the minimum. In the checker, switch the suggestions to Large text and they aim for 3:1 and 4.5:1 instead of 4.5:1 and 7:1.

User interface parts and graphics

Success criterion 1.4.11, Non-text Contrast, asks for 3:1 between the background and anything a person needs to see to use the page: the border of a text field, a checkbox, an icon button without a label, the focus ring, the line in a chart. The comparison is with the colors next to the part, so a gray input border on a white card is measured against the white. A button with a solid fill needs its fill to stand out from the page at 3:1, or its label to carry the meaning. There is no AAA level for these parts. To check one, enter the part's color as the text color, the color around it as the background, and switch the suggestions to UI parts.

What does not count

The contrast rules leave out a few things: logos and text that is part of a logo or brand name, text in disabled controls, purely decorative text, text nobody can see, and text inside a photo that carries other important content. Placeholder text in form fields does count, and it is one of the most common failures. Text over a photo or a gradient counts too: test it against the lightest area behind the letters for dark text, or the darkest area for light text. Pick that area's color with your design tool or a browser eyedropper and enter it here as the background.

Opacity and transparent colors

When text is semi-transparent, what people see is a mix of the text color and the background. The checker blends the two before measuring, the same way the browser paints it: each channel is the text value times the opacity plus the background value times the rest. Black text at 60% opacity on white is really a gray, #666666, with a ratio of 5.74:1. Drop it to 50% and it becomes #808080, at 3.94:1, which fails for normal text. The same blend explains why light text on a translucent overlay often fails on part of an image. The background itself is treated as solid: if it is transparent too, measure the color you actually see behind the text.

How to fix a pair that fails

The fastest fix is almost always lightness. Darken the text or lighten the background, and keep the hue so the brand still reads as the brand. The suggestions next to the result do exactly that: they move the lightness of one color in the smallest step that reaches AA or AAA, show the new pair as a swatch with its ratio, and apply it with one click. If you change your mind, Undo puts the previous pair back. If your brand color is a mid tone, such as a bright orange or a sky blue, use it for large headings, icons and fills, and keep a darker shade of it for body text and links. To see every pair in a palette at once, open the colors in the color palette generator and use its contrast grid.

Contrast and the law

Contrast is one of the most frequent failures in accessibility audits, and it is easy to check from the outside, which is why it shows up in complaints and demand letters. Laws rarely mention WCAG by name, but WCAG 2.x level AA is the benchmark most of them point to in practice.

• United States, ADA Title III: the Americans with Disabilities Act covers businesses open to the public, and courts have applied it to websites. It sets no technical standard of its own for private businesses; settlements and guidance usually refer to WCAG AA.
• United States, Section 508: federal agencies, and the technology they buy, must meet standards that incorporate WCAG 2.0 AA.
• European Union, European Accessibility Act: in force since 28 June 2025 for many consumer products and services, including online shops, banking and e-books. It can reach businesses outside the EU that sell to people in the EU, and very small service businesses are exempt. The European standard for digital accessibility, EN 301 549, incorporates WCAG and is the usual reference for meeting it.
• United Kingdom, Equality Act 2010: service providers must make reasonable adjustments for disabled people, which in practice includes websites. Public sector sites have their own regulations that refer to WCAG AA.

This is a general overview, not legal advice. Whether a law applies to your business depends on where you are, who you sell to and what you sell. A passing color pair is one check among the dozens an audit covers: headings, keyboard use, forms, alt text, focus order and more.

Sources

• Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation, including the definitions of relative luminance, contrast ratio and large scale text
• Understanding SC 1.4.3: Contrast (Minimum), W3C
• Understanding SC 1.4.6: Contrast (Enhanced), W3C
• Understanding SC 1.4.11: Non-text Contrast, W3C