Color Contrast Checker for WCAG 2.2 Accessibility and Readable Text

How to use the color contrast checker

Type or paste two colours into the color contrast checker: the foreground, usually your text, and the background behind it. It returns a single ratio, such as 4.54:1, and marks it against each WCAG threshold. You can swap the colours, nudge either one lighter or darker, and watch the ratio change as you go.

Test every combination that will actually appear, not just the main one. Body text on the page background is obvious, but link colours, button labels, placeholder text in forms and captions over tinted panels are where palettes usually fail. A palette from the color palette generator might need three or four separate checks before it is ready.

A ratio from any color contrast checker is only as good as the colours you enter. Text set over a photograph has no single background colour, so test against the lightest area the text crosses. Semi-transparent overlays also change the result, which means you should check the blended colour that actually reaches the screen, not the overlay’s nominal value.

What the color contrast checker tests: WCAG 2.2 thresholds

WCAG 2.2, published by the W3C as a Recommendation in October 2023, sets three contrast thresholds that matter to most designers. They come from three success criteria: 1.4.3 for minimum text contrast, 1.4.6 for enhanced text contrast, and 1.4.11 for non-text contrast, which was added in version 2.1 in 2018.

The 4.5:1 figure was chosen to compensate for vision loss typical of people around age 80, according to the W3C’s own explanation of the criterion. The 7:1 figure covers a wider range of low vision. Large text gets a lower bar because thicker, bigger letters remain legible at lower contrast than small body copy does.

Some content is exempt. Text in logos and brand names, purely decorative text and text in disabled controls do not have to meet the thresholds. Graphics that carry meaning, such as a chart line or the border that shows where a form field begins, do need 3:1 against adjacent colours under the WCAG non-text rule.

The relative luminance formula behind the ratio

Contrast ratio in WCAG is built on relative luminance, a measure of how bright a colour appears on a scale from 0 for black to 1 for white. Each colour channel is converted from its 0 to 255 value into a linear light value before the three channels are weighted and added together.

• Divide each red, green and blue value by 255.
• If the result is 0.04045 or below, divide it by 12.92; otherwise add 0.055, divide by 1.055 and raise it to the power of 2.4.
• Relative luminance L equals 0.2126 times red, plus 0.7152 times green, plus 0.0722 times blue.
• The contrast ratio equals the lighter L plus 0.05, divided by the darker L plus 0.05.

The weights explain a lot. Green contributes over 70 per cent of perceived brightness, blue barely 7 per cent. That is why pure blue text on white scores a comfortable 8.6:1 while pure red manages only about 4.0:1. Older versions of the WCAG text printed 0.03928 as the threshold, which makes no practical difference for 8-bit colours.

The added 0.05 in the ratio represents ambient light reflected from the screen, a small allowance that keeps the ratio from becoming infinite with pure black. Black on white comes out at exactly 21:1. Grey 767676 on white scores 4.54:1, making it the lightest neutral grey that passes Level AA for normal text.

How APCA and WCAG 3 differ, as of 2026

The WCAG 2 formula has known weaknesses. It treats dark text on a light background and light text on a dark background as equivalent, and it tends to overstate the contrast of some dark colour pairs. Critics also point out that it ignores font weight and size beyond the single large text cut-off.

APCA, the Accessible Perceptual Contrast Algorithm, was developed by Andrew Somers to fix those issues. It reports a lightness contrast value, written as Lc, rather than a ratio. Its scores depend on polarity, so light-on-dark and dark-on-light are measured differently, and its guidance links the required value to font size and weight, suggesting Lc 75 or more for body text.

APCA appeared in early WCAG 3 working drafts, but the working group removed it in July 2023. As of the most recent working draft, dated March 2026, the contrast method for WCAG 3 is listed as yet to be determined, and the W3C says the guidelines still need several years of work before they could become a standard.

For real projects in 2026, that leaves a clear rule. Meet WCAG 2.2, because that is what accessibility laws and procurement rules cite. Use APCA, if you like, as a second opinion on dark mode designs or very thin type, where the older formula is weakest. Never use an APCA score to justify failing the WCAG 2.2 ratio.

Accessibility rules that cite contrast in Canada

In Ontario, the Integrated Accessibility Standards Regulation under the Accessibility for Ontarians with Disabilities Act required public websites of organizations with 50 or more employees to meet WCAG 2.0 Level AA from 1 January 2021. Contrast at 4.5:1 is part of that level, so a failing button colour is a compliance problem, not only a design flaw.

Federally, the Government of Canada’s Standard on Web Accessibility applies WCAG 2.0 Level AA to its own sites, and the Accessible Canada Act of 2019 created a framework for further standards. Across the Atlantic, the European Accessibility Act has applied since 28 June 2025. Because WCAG versions are backward compatible, meeting 2.2 covers the older references too.

Common contrast mistakes and quick fixes

The most common failure is light grey body text on white, a fashion that comes back every few years. Anything lighter than 767676 fails for normal text. The second is white text on a mid-tone brand colour, such as orange or bright green buttons, which often lands between 2:1 and 3:1. Darkening the button usually fixes it.

Placeholder text in form fields and hover states are frequent blind spots, because they appear only in certain conditions and are easily missed. Focus outlines, the rings that show keyboard users where they are, need 3:1 against neighbouring colours as well. The color contrast checker handles each the same way: two colours in, one ratio out.

One aside on type. A thin typeface at 16 pixels can pass 4.5:1 and still be hard to read, because no color contrast checker sees stroke width. The guide to typography basics covers weight and size, and colour theory explains why value matters more than hue. The free design tools page lists the rest.

A final example worth testing yourself: the bright Swiss poster red DA291C on white passes Level AA for normal text at about 4.9:1, while pure red falls short at 4.0:1. Two reds that look almost identical to most people land on opposite sides of the line, which is exactly why a measured check beats a confident eye.