The contrast ratio formula, worked through by hand

The contrast ratio formula in WCAG is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 that of the darker one. The result runs from 1:1 to 21:1, and you can compute it by hand in four steps or let a free tool such as the AyeTab Contrast Checker do the math for you.

Step 1: turn each channel into a 0 to 1 value

Split the hex color into red, green and blue, convert each from 0 to 255, and divide by 255. For #767676, every channel is 118, so each becomes 118 / 255, about 0.463.

Step 2: undo the gamma curve

Screen colors are stored on a curve, so the next step makes them linear. For each channel value c:

• if c is 0.04045 or less, use c / 12.92
• otherwise, use ((c + 0.055) / 1.055) raised to the power 2.4

For 0.463 that gives about 0.181. The W3C notes that older texts used 0.03928 as the cut-off; it was corrected in May 2021 and makes no practical difference.

Step 3: weight the channels into luminance

Relative luminance L = 0.2126 × R + 0.7152 × G + 0.0722 × B, using the linear values from step 2. Green carries most of the weight because the eye is most sensitive to it, which is why a pure green looks much brighter than a pure blue at the same value. For a gray all three channels are equal, so L for #767676 is about 0.181. White has L = 1 and black has L = 0.

Step 4: compare the two luminances

Put the lighter one on top: (1 + 0.05) / (0.181 + 0.05) is about 4.54. So #767676 on white is 4.54:1, just over the 4.5:1 needed for normal text at WCAG level AA.

The 0.05 in both halves keeps the result finite when one color is pure black and caps the range at 21:1.

Worked results

The thresholds behind the last column: 4.5:1 for normal text and 3:1 for large text at AA, 7:1 and 4.5:1 at AAA, and 3:1 for UI components under the non-text rule. The W3C says not to round, which is why #777777 fails by a hair.

Why this matters when AI writes your styles

A lot of interface code is now drafted by AI coding assistants and design generators, and nothing in that process guarantees the color pairs pass. The formula does not care who chose the colors. Treat any generated palette the way you would treat generated code: test it before it ships. A quick pass of each text and background pair through a checker catches the pairs that look calm on a large monitor and fade on a phone in daylight.

Skip the arithmetic

Doing the steps by hand is good for understanding the numbers. For daily work, a checker is faster and less error-prone. AyeTab's version takes two hex values and shows the ratio with separate grades for normal text, large text and UI components. It is free, runs locally in the browser with no account, and is also on the new tab page of the AyeTab Chrome extension for developers who want it one shortcut away.

If you need to compute ratios inside your own build or tests, the four steps above are short enough to write as a small function, and the W3C's definition is the reference to test it against.