Written by Anthony.
The color gray comes in many different shades. You can find them on different elements across most sites. Dark gray is often used for headings and body text. Light gray is often used for metadata, labels, and descriptions. But the shade that’s abused the most is light gray.
Light Gray Text Problems
Grays that are too light for text can cause readability problems. If you make your gray text too light, users will have trouble reading it. The color brightness causes text to blend into a light background. This makes words and letters faint and hard to distinguish. Trying to read it can cause eye strain.
Light gray text can also cause navigation problems. If users can’t read the options in your menu, they can click the wrong one or won’t bother clicking at all. This is especially frustrating on menus with many options. Sometimes they can even miss options because they look disabled.
Low contrast text not only affects normal users but especially low-vision and elderly users. Not only that but some users have low-resolution monitors, read on a mobile device or in poor lighting. The color contrast of your text affects all users.
Knowing that light gray text is hard for users to read is not enough. It’s important for designers to know how light is too light. Without a specific standard, “too light” is relative.
The World Wide Web Consortium (W3C), an international web standards organization, published WCAG 2.0. They are guidelines that specify how to make content accessible. It recommends that regular-sized text should have a contrast ratio of at least 4.5:1.
Gray is the only color that has no hue or saturation, only brightness. The more brightness it has the lighter the gray. Brightness is calibrated on a percent scale.
Applying the ratio to gray text on a white background means that the text should not exceed 46% brightness (#767676). That’s the maximum brightness your gray can go without violating the contrast ratio. The inverse of that is also true. A gray background against white text should not exceed 46% brightness.
58% Brightness for 18+ Font
For text larger than 18 font points, you can make your gray lighter. This is because larger sized text is easier to read. Your gray text on a white background should not exceed 58% brightness (#949494). Too light of a gray can even make large text hard to read.
Threshold for a Light Gray Background
The thresholds above are for text on a white background. If you put your text against a light gray background you need to make your text even darker. A light gray background is one that’s no less than 90% brightness (#E6E6E6). That puts the 4.5:1 threshold for regular-sized text at 40% brightness (#666666). For 18+ font, the threshold is 50% brightness (#7F7F7F). Your text brightness should not exceed these numbers for a light gray background.
The Meaning of “Too Light”
Designers don’t choose to use light gray text to make it harder for users to read. They use it to make their primary text stand out more. But the problem arises when they don’t realize how light their gray is and how it makes users suffer.
The WCAG 2.0 contrast ratio gives designers a specific standard of what “too light” means. “Too light” is no longer an impractical sentiment. Designers now have a reference point when they hear from users that their gray text is too light.