Color contrast: why a rounded 4.5 can still fail
Compare sRGB text colors, unrounded contrast ratios and the difference between a color-pair check and an accessible interface.
Method
Contrast describes the difference in relative luminance between foreground and background. Start with the colors actually painted behind and inside the text. A pale badge on a light background can become unreadable even when the surrounding result panel is dark.
For opaque sRGB colors, normalize each red, green and blue channel, linearize it, and calculate relative luminance. Divide the lighter luminance plus 0.05 by the darker luminance plus 0.05. Black and white produce 21:1; identical colors produce 1:1. The calculator performs this conversion from integer RGB channels.
A useful boundary example is gray text on white. RGB 119,119,119 gives about 4.478089:1, while RGB 118,118,118 gives about 4.542225:1. Both may look like 4.5 when rounded to one decimal, but only the second reaches the 4.5:1 AA threshold for normal text. Use the unrounded ratio to decide.
View data
- RGB 119,119,119
- 4.478089 :1 4.478089… < 4.5
- RGB 118,118,118
- 4.542225 :1 4.542224… > 4.5
Worked example
A useful boundary example is gray text on white. RGB 119,119,119 gives about 4.478089:1, while RGB 118,118,118 gives about 4.542225:1. Both may look like 4.5 when rounded to one decimal, but only the second reaches the 4.5:1 AA threshold for normal text. Use the unrounded ratio to decide.
Qualifying large text has a 3:1 AA threshold. Its size and weight must meet the guideline’s definition; a wide badge does not make its text large. For normal text, the AAA threshold is 7:1. Compare the intended text category before interpreting a pass or fail.
L = 0.2126 R + 0.7152 G + 0.0722 B (linear sRGB)
contrast = (lighter L + 0.05) / (darker L + 0.05)
RGB(119,119,119) on white ≈ 4.478089 : 1
RGB(118,118,118) on white ≈ 4.542225 : 1
A color-pair result cannot certify a whole page. Check hover, focus, error and disabled states, both themes, transparency, gradients and image backgrounds. Also inspect text size, keyboard access and non-text indicators. Keep labels explicit so that color is not the only way to communicate a result.
View data
- RGB 119,119,119
- #777777
- RGB 255,255,255
- #FFFFFF
- Result
- 4.478089 : 1
Checks and limits
A color-pair result cannot certify a whole page. Check hover, focus, error and disabled states, both themes, transparency, gradients and image backgrounds. Also inspect text size, keyboard access and non-text indicators. Keep labels explicit so that color is not the only way to communicate a result.