Colour Contrast Ratio Calculator

How this is calculated

THIS IS THE ACTUAL WCAG CALCULATION, NOT AN APPROXIMATION. Each channel is converted from 0-255 to a 0-1 value, then linearised: below or equal to 0.04045 it is divided by 12.92, above that it becomes ((value + 0.055) / 1.055) raised to the power 2.4. The three linear channels are then weighted 0.2126 red, 0.7152 green and 0.0722 blue to give relative luminance, and the ratio is (lighter + 0.05) / (darker + 0.05). ⚠️ GREEN CARRIES MOST OF THE WEIGHT AND BLUE ALMOST NONE. At 0.7152 against 0.0722, green is nearly TEN TIMES more influential than blue. That is why changing the blue channel of a colour barely moves its contrast while a small change to green moves it a lot, and why two colours that look equally dark can score completely differently. THE RATIO RUNS FROM 1 TO 21. Identical colours give 1:1, and black on white gives exactly 21:1 - the maximum possible. Nothing can score higher, so a tool reporting more than 21 has a bug. ⚠️ THE FOUR THRESHOLDS ARE NOT FOUR DIFFERENT NUMBERS. AA normal text needs 4.5:1, AA large text needs 3:1, AAA normal text needs 7:1 and AAA large text needs 4.5:1 - so AAA-large and AA-normal are THE SAME THRESHOLD. Passing 4.5:1 means you meet AA for body text and AAA for large text at the same time. LARGE TEXT MEANS 18 POINT, OR 14 POINT BOLD. In pixels that is roughly 24px and 18.5px, using the 1pt = 1.333px conversion. Bold buys you the lower threshold at a smaller size, which is the only place font weight enters the standard at all. THE BLACK AND WHITE OUTPUTS TELL YOU THE CEILING. Whatever your background, plain black or plain white text is usually the highest contrast available, so if neither of them clears the threshold you need, the background itself has to change. That is a far more useful thing to learn early than after three rounds of nudging the text colour. CONTRAST IS NOT THE WHOLE OF LEGIBILITY. This says nothing about font size beyond the large-text threshold, about typeface, letter spacing, or about colour blindness - two colours can meet the ratio and still be indistinguishable to someone with a colour vision deficiency. It also does not cover text over images or gradients, where the contrast changes across the text. Meeting the number is a floor, not a finish line.

Common questions

Is this the real WCAG calculation?

Yes, exactly as the specification defines it rather than an approximation. Each channel goes from 0-255 to a 0-1 value, then is linearised: at or below 0.04045 it is divided by 12.92, above that it becomes ((value + 0.055) / 1.055) raised to the power 2.4. The linear channels are weighted 0.2126 red, 0.7152 green and 0.0722 blue for relative luminance, and the ratio is (lighter + 0.05) / (darker + 0.05). You can check it against the known landmarks: black on white gives exactly 21, identical colours give exactly 1, and the classic #767676 grey on white gives 4.54.

Why does changing the blue channel barely do anything?

Because blue is weighted 0.0722 against green's 0.7152 - almost ten times less. The weights come from how the eye responds to each wavelength, not from anything about screens. You can see it directly in the tool: set the text to pure blue and its relative luminance reads 0.0722, pure green reads 0.7152 and pure red reads 0.2126, each exactly its own coefficient. The practical consequence is striking - pure blue text on white scores 8.59:1 and passes even AAA, while pure green text on white manages 1.37:1 and fails everything, despite both being fully saturated primaries.

What are the four thresholds?

AA body text needs 4.5:1, AA large text needs 3:1, AAA body text needs 7:1 and AAA large text needs 4.5:1. That is four thresholds but only three numbers, because AAA-large and AA-body are the same 4.5:1 - so clearing 4.5 means you meet AA for body text and AAA for large text simultaneously. Large text means at least 18 point, or 14 point bold, which is roughly 24px and 18.5px at the standard 1pt = 1.333px conversion. Bold is the only place font weight enters the standard, and it buys you the easier threshold at a smaller size.

Why show headroom instead of a pass or fail?

Because a pass-or-fail display has to round, and rounding near a threshold can turn a failure into a tick. The clearest example is in the greys: #767676 on white scores 4.54 and passes AA body text, while #777777 scores 4.48 and fails - one step on each channel. Expressed as a proportion of the threshold those are 1.01 and 0.995, and the second rounds to 1.00, which reads as a pass. Shown as headroom they are +0.04 and -0.02, and the sign cannot mislead. The number also tells you how much room you have, which a tick never does.

What do the black and white text figures tell me?

The ceiling for that background. Plain black or plain white is almost always the highest contrast available against any given colour, so those two outputs bracket what is achievable before you start adjusting anything. If neither clears the threshold you need, no amount of nudging the text colour will fix it and the background has to change - which is much better to learn at the start than after three rounds of tweaking. A mid-grey #808080 background is the clearest case: black gives 5.32 and white gives 3.95, so the best available is 5.32 and AAA body text at 7:1 is simply impossible there.

Does meeting the ratio mean my text is readable?

No - it means it clears a floor, and the floor is not the finish line. The ratio says nothing about font size beyond the large-text threshold, nothing about typeface or letter spacing, and nothing about colour vision deficiency: two colours can meet 4.5:1 and still be hard to tell apart for someone with a common form of colour blindness, because the ratio only compares lightness. It also assumes a flat background, so text over a photograph or a gradient needs checking at its worst point rather than its average, and that point is usually not where you would look first.

Can the ratio ever be above 21?

No. The formula is (lighter + 0.05) / (darker + 0.05), and relative luminance runs from 0 for black to 1 for white, so the largest possible value is 1.05 divided by 0.05, which is exactly 21. The smallest is 1, when both colours are identical. Those two bounds are worth knowing as a sanity check on any contrast tool, including this one - a result above 21 or below 1 means something is wrong with the implementation rather than with your colours.

Take it further with AI

Copy this into ChatGPT or Claude with your own numbers filled in. It hands over the figures this calculator worked out, so the answer is built on real arithmetic instead of a guess.

I used the Colour Contrast Ratio Calculator at https://www.bfcbrilliance.com/tools/color-contrast-ratio-calculator.

What I entered:
- Text colour - red: ___
- Text colour - green: ___
- Text colour - blue: ___
- Background - red: ___
- Background - green: ___
- Background - blue: ___

What it calculated:
- Contrast ratio: ___
- Headroom over AA body text (4.5:1): ___
- Headroom over AA large text (3:1): ___
- Headroom over AAA body text (7:1): ___
- Black text on this background would give: ___

Use those figures as given — they are already worked out, so please don't recalculate or estimate your own. Help me turn them into a plan: what to buy or do, in what order, roughly what it should cost, and the mistakes people most often make with this job.

More Tech tools