Contrast Ratio Rounding: Why 4.48:1 Fails AA

ColorPairLab displays contrast ratios to two decimal places, but checks the full value against each threshold. That matters most when two colors sit close to a pass or fail boundary.

Compare two neighboring grays

These grays differ by one RGB channel step. #777777 on white falls below 4.5:1; #767676 is above it. CSS gray is another value, #808080, with a different result.

Follow the calculation

encoded = channel / 255
linear = encoded <= 0.04045
  ? encoded / 12.92
  : ((encoded + 0.055) / 1.055) ** 2.4
L = 0.2126 * Rlinear + 0.7152 * Glinear + 0.0722 * Blinear
ratio = (max(Ltext, Lbackground) + 0.05)
      / (min(Ltext, Lbackground) + 0.05)

Each RGB channel is converted to a linear value before calculating relative luminance. The lighter color goes in the numerator, so swapping text and background leaves the contrast ratio unchanged.

Compare first, round for display

const aaNormal = ratio >= 4.5;
const aaLarge = ratio >= 3;
const aaaNormal = ratio >= 7;
const aaaLarge = ratio >= 4.5;
const display = ratio.toFixed(2);

Compare the ratio with the threshold before rounding. Even a number displayed as 4.50:1 can be below 4.5 internally and must still fail. Adding a tolerance would change the requirement rather than improve the color pair.

Read the result for each text category

For #777777 on white, AA normal fails and AA large passes. Both AAA categories fail. A large title and a small paragraph can therefore have different results even when they use exactly the same colors.

Keep a useful review note

• Record the exact foreground and background values.
• Include the text size and weight.
• State the criterion and its pass or fail result.
• Recheck after editing either color, even by one channel step.

These calculations assume two opaque, uniform sRGB colors. Text over a photo or a translucent layer needs a review of the actual background. A correct ratio alone does not establish that the whole page is accessible.