WCAG Contrast Checker: AA, AAA, APCA, and Passing Fixes

How to use the WCAG Contrast Checker: AA, AAA, APCA, and Passing Fixes

1. Write the two coloursWrite the text colour and the background colour as a hex code, rgb(), hsl(), hwb(), or a colour name, or use the colour picker beside each. The Swap button changes them over, which is useful for light text on a dark background.
2. Read the ratio and the levelsThe ratio is at the top, and the table shows whether it meets AA and AAA for normal text and for large text, and AA for interface parts. Large text is at least 24 pixels, or 18.5 pixels and bold. The sample shows both sizes.
3. Use a nearest colour that passesIf the pair fails a level, the page lists the nearest colour that reaches it, for the text and for the background. Only the lightness changes, so the colour stays recognisable. Press Use it to put it in the field, and check the result.
4. Compare a whole paletteChoose A list of colours, and paste the colours, one on a line, or as custom properties such as --text: #14161a;. The table shows every colour as text on every other colour, with the ratio and the level written in words.

What the contrast ratio is

WCAG 2 defines the contrast ratio as (L1 + 0.05) divided by (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 that of the darker one. Relative luminance is a weighted sum of the red, green, and blue values after they are converted from the gamma curve of sRGB to linear light, with weights of 0.2126 for red, 0.7152 for green, and 0.0722 for blue. The result goes from 1 to 1, for two equal colours, up to 21 to 1, for black on white. The ratio is the same whichever of the two colours is on top.

The standard has had two thresholds in the conversion: 0.03928 in the older text and 0.04045 since May 2021. They look different, but no colour that a screen can show lies between them, because the values go in steps of 1 in 255. The page checked this for all 256 values of a channel, and the two give the same result for each, so the ratios do not depend on which of the two a tool uses.

The levels: AA, AAA, large text, and interface parts

Level AA, which most laws and policies ask for, needs 4.5 to 1 for normal text and 3 to 1 for large text. Level AAA needs 7 to 1 for normal text and 4.5 to 1 for large text. Large text is text of at least 18 points, which is 24 CSS pixels, or of at least 14 points when it is bold, which is about 18.5 pixels. Since WCAG 2.1, success criterion 1.4.11 also asks for 3 to 1 for the parts of an interface that a person needs to find, such as the border of an input field or the outline of a focus ring, and for graphics that carry meaning, such as a line in a chart.

Some things have no requirement: text that is part of a logo or a brand name, text that is only decoration, and a component that is not available for use, such as a disabled button. The page does not know what your colours are used for, so it gives all of the levels and leaves it to you to say which apply.

Why it does not round

WCAG says that the ratios of 3 to 1 and 4.5 to 1 are thresholds, and that the computed value should not be rounded: a ratio of 4.499 to 1 does not meet 4.5 to 1. Many checkers round to two decimals and then compare, so that a pair of 4.496 is shown as 4.50 and marked as a pass. It is a small difference, and it matters to anyone who has to show that a page conforms.

This page compares the exact ratio. It shows the ratio rounded to two decimals as usual, except where rounding would make it look as if it met a threshold that it does not meet. A ratio of 4.4999 is then shown as 4.499, so that the figure and the result say the same. The pair #777777 on white is 4.48 and fails AA for normal text, and #767676 on white is 4.54 and passes, which is why #767676 is often named as the lightest grey that is allowed for text on white.

See through colours

A colour with an alpha value, such as rgba(0, 0, 0, 0.5), has no contrast of its own, because what shows depends on what is behind it. The page mixes it with the colour behind it, the way a browser does, and then works out the ratio from the colour that results, and it tells you what that colour is. For a see through text colour the colour behind is the background. For a see through background, a third field opens for the colour behind it, which is white until you change it.

Colours in the list are mixed with white in the same way, and marked. A background that is a picture or a gradient has no single colour, so no tool can give one ratio for it. Check the text against the lightest and the darkest part of the area that it covers.

Nearest colours that pass

When a pair fails, the usual fix is to darken the text or lighten the background a little. The page does this for you. It keeps the hue and the saturation of the colour that you change, moves the lightness in whichever direction is shorter, and stops at the first colour that reaches the level, after the colour has been rounded to the eight bit value that a screen has. It offers one for the text and one for the background, for each level that the pair fails. If no lightness of that hue can reach it, which happens for a mid grey against itself at 7 to 1, it says so.

A changed colour is a suggestion and not a design decision. A brand colour that has been moved by a few percent of lightness may no longer match the logo, and the page cannot know that. It does give you the exact value and its ratio, so that you can decide.

APCA, and the draft of WCAG 3

APCA, the Accessible Perceptual Contrast Algorithm, is the contrast method that is being tried for WCAG 3. It gives a value called Lc, from about 0 to 106, that takes into account that dark text on a light background and light text on a dark background are not read the same way, and it does not use a ratio. It is a draft. It is not a level that any law or conformance claim uses, and WCAG 2 is the one that does. The page shows the Lc value, for information, and the ratio decides the levels.

The values are those of version 0.0.98G-4g of the algorithm, the one that the apca-w3 package for JavaScript implements, and the page gives the same result as the package for every pair that it was tested with. Lc is shown without its sign, which says only which of the colours is lighter.

How it was tested

The colour reader was compared with Chrome. A set of 3,721 written colours was given to Chrome, which said what colour each one is, or that it refuses it. The set had hex codes of every length and in both cases, rgb() and rgba() with commas and with spaces, with numbers and with percentages, hsl() and hwb() with every unit of angle, values outside the usual range, all 148 names in upper and lower case, and 24 that are not colours. The page gave the same colour for each of the 3,697 that Chrome accepts, apart from one hwb() colour that falls exactly between two steps and that Chrome rounds the other way, and it refused the others.

The ratio was compared with two things that share no code with it: the formula in 50 digit decimal arithmetic, and the wcag-contrast-ratio package for Python. The comparison used 8,000 pairs, of which 4,000 were chosen because their ratio is close to 3, 4.5, or 7. The closest was 0.0000026 from a threshold. The ratio agreed to 12 digits, and the page said pass and fail for the same pairs as the decimal formula, for every one. The mixing of a see through colour was compared with what Chrome draws on a canvas for 400 colours, and was within one step for all of them. The nearest colours were compared with a search of every lightness in steps of 0.02 for 400 random pairs, and none of them was more than 0.1 of lightness further than the search found.

The page was not compared with other checkers or with the accessibility tools of a browser, and it does not read colours in lab, lch, oklab, oklch, or color(), which it names when it meets them. Text on a picture was not tested, because there is no single answer.

Limits and accuracy

• The ratio is correct for two flat colours. Text on a picture, a gradient, or a pattern has no single background, and the page cannot judge it. Check the lightest and darkest part.
• Size and weight matter, and the page cannot see them. It gives the result for normal and for large text, and you choose the one that fits. A thin font at a large size can still be hard to read at a passing ratio.
• Passing the ratio does not make text readable. Contrast is one part of accessibility, and a page can have enough contrast and still fail on color alone as the way to show meaning, on focus visibility, or on text size.
• The page reads hex codes, rgb(), hsl(), hwb(), and the CSS colour names. It does not read lab(), lch(), oklab(), oklch(), color(), or color-mix(). Convert them first with the colour picker of a browser.
• A see through colour is mixed with the colour behind it in sRGB, as browsers do for ordinary colours. A blend mode, a filter, or a backdrop effect changes what is seen and is not taken into account.
• The mixing of see through colours matched Chrome to within one step on a canvas. A real page can be a step apart, which can change a ratio by a small amount.
• The suggestions keep the hue and the saturation, and change only the lightness. A colour of another hue that is nearer to yours in look may exist, and it is not offered.
• APCA is a draft, and its values can change before WCAG 3 is final. It is shown for information.

Frequently asked questions