Why Your Gray Text Should Never Exceed 46% Brightness

by on 04/05/16 at 9:34 am

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.

gray-text-usage

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.

46% Brightness

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.

gray-text-46-brightness

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.

gray-text-58-brightness

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.


Our Products

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

Affiliates

Elegant Themes UX T-Shirts

Author and founder of UX Movement. Founded this site to help you learn user experience design for a more user-friendly world.

7 Responses to “Why Your Gray Text Should Never Exceed 46% Brightness”

  1. Ratul Aich

    Apr 5th, 2016

    The discussion about Grey is something I was looking for a long time. How to measure Grey? Specially while purchasing a Laptop with good color reproduction specific for Graphic/UI Designing.
    You are Mr. Shads of Grey 😉 very nicely explained.

    Thanks

  2. Elizabeth

    Apr 6th, 2016

    I totally agree and wish Adobe would adjust the interface of Acrobat Pro DC. The basic navigation has a contrast of 3.7:1 and “grayed-out” options have contrast of piddly 1.59:1. I have normal eyesight and this fatigues my eyes. I can’t imagine what an impaired person would feel.

  3. BretPerry

    Apr 6th, 2016

    Contrast ratio typo – says 4:5:1 – I searched in vain for what that might mean, which 3 things were being compared.

    Nope, you meant 4.5:1, oh that makes sense.

  4. Bob Marconi

    Apr 6th, 2016

    As a person with partial color blindness it becomes very hard to see these grays.

    I fail to understand why folks don’t ‘test’ their sites color readability.

  5. Drew McDowell

    Apr 6th, 2016

    I appreciate you trying to simplify the rules of contrast, but you’ve omitted a number of very important points.

    The 46% figure assumes it’s being combined with pure white (light grey text on white / white text on light grey). Two of the three examples you show in the first figure are light text on a light grey background. So the text would need to be even darker than 46%.

    This is to say nothing of the combination of grey and black or dark grey.

    Even ignoring all that, “never” is a pretty strong word to use in the title when the caveat is “text larger than 18 font points, you can make your gray lighter”.

    It’s really best for people to follow the WCAG rules:
    “WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger). Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.”

    • anthony

      Apr 7th, 2016

      You’re right about text needing to be darker on a light gray background. I’ve now included the thresholds for text on a light gray background.

  6. Michael

    Apr 6th, 2016

    Based on the change that Microsoft made with Windows 10 with the ultra bright white background, Gray text is the worst idea ever for text. Text should be ‘BLACK’. Yes yes I know that the use of gray is very ‘trendy’, everyone is using it, but most designers are using it on white backgrounds — bad very bad. But thanks for the article, but GRAY for TEXT is BAD at least on white backgrounds.

Leave a Reply to Ratul Aich