Contrast guide
There are an estimated 2.2 billion people in the world who are visually impaired. This number includes anyone from legally blind, to those with less than 20/20 vision.
This short guide will help you achieve the accessibility standards outlined in the WCAG 2.0, specifically with foreground and background color when it comes to text.
Summary
Fail
Do not use this for any text that is meant to be read. A failing score of 1.5 can be a nice choice for logos, graphical elements, subtle borders, dividers, and disabled buttons—which have no contrast requirements.
AA Large
Only use this score for 18px bold and 21px regular (and larger) fonts. This is also a great option for primary CTAs (calls to action) as well as interface icons.
AA
This score is safe to use for all text sizes throughout your designs.
AAA
This is an enhanced contrast and is recommended for longer form copy that is meant to be read for a significant period of time, like this guide.
Score & Ratio
There is an equation provided by the WCAG (Web Content Accessibility Guidelines) that determines these two values.
The equation outputs a number between 0 and 21. 21 is the highest amount of contrast—black text on a white background—and 0 is no contrast—white on white.
The output of contrast between any two colors will fall somewhere on the spectrum between 0 – 21. That's where the scores—Fail, AA Large, AA, AAA—are derived from.
Fail
Fail means that your text has a contrast ratio of 2.9 or lower. This does not apply to logos, text in logos, and other decorative elements.
Quite often, failing scores can seem to work nicely within the context of a static design review. But in the context of real world usage, these failing scores can cause problems for the usability of your website or app.
AA Large
AA Large means that your text has a contrast ratio of at least 3.0. For example, 949494 text on a ffffff background.
This is the minimum level recommended for standard text and normal vision based on empirical evidence.
In the macOS app, we made the decision to abbreviate Large to + so that each score would be similar in character length and not impact the fixed width of the interface.
AA
AA means that your text has a contrast ratio of at least 4.5 or higher. For example, 777777 text on a ffffff background and vice versa.
There is empirical evidence that visual acuity of 20/40 is associated with a contrast sensitivity loss of roughly 1.5, which is where the 4.5 score is derived.
AAA
AAA means that your text has a contrast ratio of at least 7.0. For example, ffffff text on a 595959 background and vice versa.
This score is derived for people with 20/80 vision. This visual acuity score is often not able to be corrected with glasses, etc.
Side note, 20/200 is legally blind.
Mobile
What about mobile apps and their big sharp retina screens? There's a working draft of the WCAG Mobile guidelines that says...
"Mobile devices are more likely than desktop/laptop devices to be used in varied environments including outdoors, where glare from the sun or other strong lighting sources is more likely. This scenario heightens the importance of use of good contrast for all users and may compound the challenges that users with low vision have accessing content with poor contrast on mobile devices."
So while it is probably easier to see lighter text on a high resolution screens in a controlled environment, the use case for mobile is incredibly unpredictable to risk going super light with text. Direct sunlight, dark rooms, and more all significantly affect the display on mobile screens.
If you have more unquenched thirst for color and how it can be leveraged in interface design, checkout Shift Nudge.
More
There's a lot more to accessibility than just color contrast. According to the WCAG, in order to hit a true AAA rating you not only need to meet all AAA color contrast requirements, but also...
1.4.8 Visual Presentation: For the visual presentation of blocks of text, a mechanism is available to achieve the following: (Level AAA) Foreground and background colors can be selected by the user. Width is no more than 80 characters or glyphs (40 if CJK). Text is not justified (aligned to both the left and the right margins). Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing. Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.
If you'd like to see just how deep the the WCAG rabbit hole goes, take the red pill.