There are an estimated 285 million 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.
3.0.3.0.4.5.7.0. Think longer form articles that will be read for a significant period of time.Decorative elements or text that is part of a logo or brand name have no minimum contrast requirements.
There are other factors to consider in order to be fully compliant with AA and AAA standards, but this will get you off to a great start.
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, with 21 being the highest amount of contrast—think black text and a white background—and 0 being 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 are derived from.
There are technically 5 scores.
AAA means that your text has a contrast ratio of at least 7.0. For example, 595959 text on a ffffff background and vide versa.
Note that in order to achieve a true AAA rating, section 1.4.8.1 of the WCAG also states that "Foreground and background colors can be selected by the user."
So unless you're planning on creating that functionality in your website or app as well, there's really no reason to shoot for higher than AA, in our opinion.
This score is derived for people with low 20/80 vision. This visual acuity score is often not able to be corrected with glasses, etc.
Side note, 20/200 is legally blind.
ISO 9241-3 Ergonomic requirements for office work with visual display terminals (VDTs) - Part 3: Visual display requirements. Amendment 1.*
AAA Large means that your large text has a contrast ratio of 4.5 or higher, which is the same score as AA, which is why you won't see AAA Large as a visible score in the app.
The WCAG describes 14pt bold and 18pt as "large" sizes. This roughly translates to 18.5px bold and 24px @1x. This is an approximation since letterform sizes can vary greatly between typefaces.
AA means that your text has a contrast ratio of at least 4.5 or higher. For example, 757777 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.
Gittings, NS and Fozard, JL (1986). Age related changes in visual acuity. Experimental Gerontology, 21(4-5), 423-433.
ANSI-HFES-100-1988. American National Standard for Human Factors Engineering of Visual Display Terminal Workstations, Section 6, pp. 17-20.
AA Large means that your text has a contrast ratio of at least 3.0. For example, 949595 text on a ffffff background.
This is the minimum level recommended by ISO-9241-3 and ANSI-HFES-100-1988 for standard text and normal vision, which is where WCAG derived this score.
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.
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.
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 questions or just want to nerd out about color contrast email matt@mds.is to continue the fun.
There's a lot more to accessibility than just color contrast. Here are a few snippets from the WCAG for example:
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.
You can see that in order to hit a AAA rating, your app or site needs to allow selection of foreground and background colors by the user. So even if your color contrast is AAA, that doesn't mean your entire product is.
If you'd like to see just how deep the the WCAG rabbit hole goes, take the blue pill.