DesignFree
Free WCAG color contrast checker. Compare foreground and background hex colors and see contrast ratio vs AA/AAA.
Last updated 14 October 2026
The contrast ratio is defined by WCAG as (L1 + 0.05) / (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker colour. This page implements that definition literally, including the sRGB linearisation step, so its answers are the specification's answers rather than an approximation. Black on white gives exactly 21.00:1, which is the maximum the scale allows: WCAG notes that ratios “can range from 1 to 21 (commonly written 1:1 to 21:1)”.
What follows is where the display, the thresholds and the input format can still mislead you.
This is the one to know. The ratio is displayed to two decimals while every PASS and FAIL is decided on the full-precision value, so a displayed figure sitting exactly on a threshold can go either way. Measured on this page, against a white background:
#959595 displays 3.00:1 and fails AA large. The true ratio is 2.9953.#595959 displays 7.00:1 and passes AAA normal. The true ratio is 7.0047.Two readings that look identical on screen, one above its threshold and one below. If a displayed figure lands on 3.00, 4.50 or 7.00, read the verdict row rather than the number, because the verdict is the accurate one.
A single step in hex is enough to cross a threshold. #777777 on white is 4.48:1 and fails AA for normal text; #767676, one value darker, is 4.54:1 and passes. That second value is the darkest neutral grey that clears AA on white, which is why it turns up so often in design systems.
The linearisation step compares each channel against a small threshold. This tool uses 0.03928. WCAG changed that figure to 0.04045 in May 2021, and its own note says the change “has no practical effect on the calculations in the context of these guidelines”.
Rather than take that on trust we checked it, and there is a concrete reason it holds for any colour you can type here. The two thresholds correspond to 8-bit channel values of 10.0164 and 10.3148, and there is no whole number between them, so no hex colour can ever fall on different sides of the two constants. Tested a second way, across 636,056 colours compared against white at all three thresholds, the number of PASS or FAIL verdicts that differ between the old constant and the new one is zero.
So the older constant is a cosmetic difference here, not a correctness one. It would only begin to matter for colour formats with more than 8 bits per channel, which this tool does not accept.
The four rows come from two success criteria. WCAG 1.4.3 Contrast (Minimum), Level AA, requires “a contrast ratio of at least 4.5:1” for text, with large text allowed “at least 3:1”. WCAG 1.4.6 Contrast (Enhanced), Level AAA, raises those to 7:1 and 4.5:1.
Which row governs your case depends on the type size, and this page never sees your type. WCAG defines large scale text as “at least 18 point or 14 point bold”. Below that, the normal rows apply. Choosing the wrong row is the most common way a passing check accompanies a failing page.
One criterion is missing entirely. WCAG 1.4.11 Non-text Contrast requires “a contrast ratio of at least 3:1 against adjacent color(s)” for user interface components and for the parts of graphics needed to understand content. That covers input borders, focus rings, icons and chart series. The 3:1 figure is the same number as the AA large row, so you can use that row for it, but the row is labelled for text and the tool will not prompt you.
Measured, the input accepts six-digit hex, three-digit shorthand, upper or lower case, with or without the leading hash, and tolerates surrounding spaces. It rejects everything else with “Enter valid hex colors”: named colours such as red, rgb() notation, and eight-digit hex with an alpha channel such as #ff000080.
That last refusal is more helpful than it looks. A contrast ratio for a semi-transparent colour is not a property of the colour at all, it is a property of the colour composited over whatever happens to be behind it. Accepting an alpha value would mean producing a number that is wrong whenever the backdrop changes. If you need to check a translucent colour, work out the composited result first and paste that.
rgb(), hsl() or any CSS colour function. Hex only.To find a colour in the first place, or to convert between hex, RGB and HSL, use Color Picker. Be aware when you do that HSL lightness is not brightness: hsl(60, 100%, 50%) and hsl(240, 100%, 50%) share a lightness of 50% and measure 1.07:1 and 8.59:1 against white on this page.
Every behaviour and every value on this page was measured against this tool as it is published, in a browser, on 14 October 2026. The claim that the two luminance constants cannot disagree was derived twice, once from the arithmetic of 8-bit channel values and once by comparing 636,056 colours under both constants.
The FAIL. The ratio is displayed to two decimals and the verdict is decided on the full value, so a figure that rounds up to a threshold can still sit below it. Measured, #959595 on white displays 3.00:1 and is really 2.9953. The opposite also happens: #595959 displays 7.00:1, is really 7.0047, and passes.
That depends on your type size, which this page cannot see. WCAG counts text as large at 18 point, or 14 point bold, and the AA rows are the legal baseline most organisations work to. Below large size you need the AA normal row at 4.5:1.
It only parses hex, in three or six digits, with or without the hash and in either case. Convert the value first. Our Color Picker will take an RGB triple and give you the hex.
Because the ratio would be meaningless. A semi-transparent colour has no contrast of its own; it has the contrast of the result once it is composited over whatever is behind it. Work out the resulting solid colour and check that.
Not by name. WCAG 1.4.11 asks for 3:1 against adjacent colours for interface components and for the meaningful parts of graphics. That is the same number as the AA large row, so you can read that row for it, but nothing on the page tells you to.
It uses the threshold constant WCAG published before May 2021. We checked whether it can change an answer and it cannot: no 8-bit channel value falls between the old constant and the new one, and across 636,056 colours tested at all three thresholds not one verdict differs.
Not necessarily. Contrast is one factor. Thin strokes, unusual letterforms, very small sizes and colour vision differences all affect readability and none of them is measured here. WCAG itself notes that fonts with extraordinarily thin strokes are harder to read, especially at lower contrast.
No. The calculation runs entirely in your browser and nothing is stored or transmitted.