Color contrast and accessibility are *really* big pieces of my UI color game. It's not just important for visual hierarchy, but it's also vital for usability and accessibility. > [!important] > Watch MDS' video on contrast in its entirety, and correct the Q&A near the end. > [!note] Concept Division > * Color contrast (facts/concepts/skills) > * Color contrast can be measured (WCAG / APCA) > * WCAG 2.2 conformity around color contrast is tied to visual acuity > * Color contrast needs to be sufficient for particular elements to be WCAG accessible > * Color contrast can shape hierarchy > * Color contrast in dark mode needs to be different > * Minimal color contrast can be used when elements are decorative or supplementary ## Facts and Concepts First off, it's worth noting that there are currently two ways to measure color contrast. The first, the WCAG color contrast ratio, measures [relative luminance](https://colorandcontrast.com/#/relative-luminance) and is a well-established part of the WCAG 2.2 international standard. The second is [APCA](https://colorandcontrast.com/#/apca), which is more perceptually accurate but still experimental. Below, I'm just going to focus on WCAG since that's the standard. > [!note] Note to Self > Come back and add some details about the APCA. Eventually, I'd like to understand a little more about the concepts behind. WCAG has a set of values, 1-21. A "1" is no contrast at all—black on black, white on white, red on red, etc. A "21" is *perfect* contrast—black on white, white on black, etc. | Q | A | | ----------------------------------------------------------------- | ------------------------- | | What is the current standard for measuring color contrast online? | WCAG Color Contrast Ratio | | What are the possible values for the WCAG color contrast ratio? | 1-21 | | What does a WCAG color contrast ratio of 21 mean? | No contrast | | What does a WCAG color contrast ratio of 21 mean? | Perfect contrast | As a reminder to myself, WCAG's three levels of conformance are these: (A) is priority 1, meaning web developers *must* satisfy these requirements; (AA) is priority 2, meaning web developers *should* satisfy these requirements; and (AAA) is priority 3, meaning web developers *may* satisfy these requirements. Regarding color contrast, these conformance standards are linked up with a particular set of ranges. 1-3 are a "fail"; 3-4.5 reach AA conformance only if the text is sufficiently large; 4.5-7 are AA conformance always; and 7-21 reach AAA conformance. > [!note] On Meeting AAA Standards > According to WCAG success criterion 1.4.8 (Visual Presentation), AAA is more than just contrast. To actually be considered AAA, foreground and background colors have to be selectable by the user; the text width can't be wider than 80 characters; text can't be justified; line spacing is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than line spacing; and text can be resized without assistive tech up to 200% in a way that doesn't require a person to scroll horizontally to read the text on a full-screen window. So I can reach AAA for text *color contrast* without hitting it for my overall app and text settings. | Q | A | | --------------------------------------- | ----- | | What WCAG contrast ratios are a fail? | 1-3 | | What WCAG contrast ratios are AA Large? | 3-4.5 | | What WCAG contrast ratios are AA? | 4.5-7 | | What WCAG contrast ratios are AAA? | 7-21 | Regarding AA Large—the WCAG specifications note that "large text" must be larger than 18pts if the font weight is regular, and 14pts if the font weight is bold. (See also [[Font Weight]]). Since the point-to-pixel conversion ratio is 3:4, this comes out to 24px if the font weight is regular, or 18.5px if the font weight is regular. | Q | A | | --------------------------------------------------------------------------- | ------ | | What's the minimum *regular* font size considered "large text" in *points*? | 18pt | | What's the minimum *bold* font size considered "large text" in *points*? | 14pt | | What's the minimum *regular* font size considered "large text" in *pixels*? | 24px | | What's the minimum *bold* font size considered "large text" in *pixels*? | 18.5px | | What is the point-to-pixel conversion ratio? | 3:4 | What's interesting is *how* it was decided that these should be the conformance levels. [According to the W3C](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html), the WCAG conformance levels are linked with *visual acuity*: > The rationale is based on a) adoption of the 3:1 contrast ratio for minimum acceptable contrast for normal observers, in the ANSI standard, and b) the empirical finding that in the population, visual acuity of 20/40 is associated with a contrast sensitivity loss of roughly 1.5. A user with 20/40 would thus require a contrast ratio of 3 * 1.5 = 4.5 to 1. Following analogous empirical findings and the same logic, the user with 20/80 visual acuity would require contrast of about 7:1. Sidenote: my understanding is that people with 20/40 vision are *likely* wearing corrective lenses (glasses, contacts) that can functionally re-adjust their vision to 20/20. (But even if not, the scores still work.) People with 20/80 vision, however, are unlikely to be able to correct those vision problems. | Q | A | | ------------------------------------------------------------------------------- | --------- | | What WCAG conformance level is designed to cover people with 20/20 vision? | AA Large | | What minimum WCAG contrast ratio is designed to cover people with 20/20 vision? | 3.0 - 4.5 | | What WCAG conformance level is designed to cover people with 20/40 vision? | AA | | What minimum WCAG contrast ratio is designed to cover people with 20/40 vision? | 4.5+ | | What WCAG conformance level is designed to cover people with 20/80 vision? | AAA | | What minimum WCAG contrast ratio is designed to cover people with 20/80 vision? | 7.0+ | Okay, now—how do I *use* these conformance standards? Well, the WCAG contrast requirements apply to a particular elements on a page. Text, images of text, and standalone icons need to be a minimum of 4.5. Large text, graphical objects like charts, and UI controls needs to be a minimum of 3 (with UI controls excluding disabled states, which have no contrast requirement). And decorative elements have no requirement. | Q | A | | ------------------------------------------------------------------------- | --------------- | | What is the WCAG contrast requirement for text? | 4.5 | | What is the WCAG contrast requirement for images of text? | 4.5 | | What is the WCAG contrast requirement for standalone icons? | 4.5 | | What is the WCAG contrast requirement for large text? | 3.0 | | What is the WCAG contrast requirement for graphical objects, like charts? | 3.0 | | What is the WCAG contrast requirement for UI controls? | 3.0 | | The WCAG contrast requirement for UI controls excludes what? | Disabled states | | What is the WCAG contrast requirement for decorative elements? | No requirements | Some notes on color contrast strategy. First, it may be best to make body copy a "middle" contrast ratio, somewhere between the minimum requirement (4.5) and absolute perfect (21). Why? Starting higher up gives the designer more latitude for moving up or down, emphasizing and de-emphasizing text. Matt Damon Smith, in his excellent Shift Nudge course, takes exactly this tack: he typically uses 4.5 for supplementary or secondary text, and typically uses a higher contrast for titles and headings. (Or, in cases where the title needs to be more subtle and the text more prominent, the same idea applies but in reverse.) Always, the idea is to leverage contrast to control emphasis. | Q | A | | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | | Why should I select a "middle" contrast ratio for body text? | It provides more flexibility for creating emphasis and visual hierarchy | | What are examples of how I might use color contrast to control emphasis for text? | 4.5 for supplementary text and 18-21 for headers) | | What range of color contrast ratios does MDS recommend for *light* mode body text? | 12-21 | | What range of color contrast ratios does MDS recommend for *dark* mode body text? | 7-12 | Second, Matt Damon Smith notes that for body text in light mode, he shoots for the 12-21 range. But for body text in dark mode, he shoots for the 7-12 range. Why? Because dark mode is typically used in darker environments, meaning our pupils are dilated (enlarged), more light gets in, and so people are more sensitive to contrast. This lines up with [Nate Baldwin's design tips in his page on Dark Mode](https://colorandcontrast.com/#/dark-mode). | Q | A | | -------------------------------------------------------------- | --------------------------------------------------------------------------- | | Why should I use a lower contrast ratio for text in dark mode? | Our pupils are typically dilated, so our eyes are more nosensitive to light | Third, a note on using non-conforming (or "failed" contrast) modes. These can be used for decorative purposes. Some of these decorations are what I'd expect (like horizontal rulers and decorative colors). But some instances of decoration are more debatable—for example, secondary action button backgrounds and "decorative" placeholder text in form fields. Matt Damon Smith, again in Shift Nudge, has an example of using a failure contrast ratio for "decorative" placeholder text: if an input field has a field label like "Instagram handle", and so the placeholder text, "i.e. @bryansebesta", is truly supplementary, he counts it as decorative. | Why should I use a lower contrast ratio for text in dark mode? | Our pupils are typically dilated, so our eyes are more nosensitive to light | | ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- | | ==How does MDS recommend using a color contrast ratio of 3 in design?== | ==Placeholder copy, icon color, button borders== | | How does MDS recommend using a color contrast ratio of 1-3 in design? | Decorative colors, borders, secondary action button backgrounds, disabled button text, "decorative" supplemental text | ## Skill and Exercises * Pick a color contrast tool, and practice using it until I'm in the habit of referencing color contrast. Or, if I'm using a design system where certain scales (i.e. 100, 400, 600) match up with certain color contrasts, bookmark a reference page and get in the habit of checking the contrast level for each scale when using it. * Take a page in something I'm currently designing, and inspect the different color contrasts. Make notes of where I'm meeting WCAG standards, and where I'm not. * Create a page with various kinds of text—supplementary text, headings, and body text. Alter the contrast of each of these elements to shape the visual hierarchy of the page, and to meet WCAG requirements. * Create a page with various elements, including but not limited to text (i.e. charts, standalone icons, decorative elements). Alter the contrast of these elements until the hierarchy feels good, and WCAG requirements are met. * Try creating a dark mode page. Adjust the contrast downward to accommodate for [dark adaptation](https://colorandcontrast.com/#/light-and-dark-adaptation) that occur in typical dark mode contexts and avoid optical glare. ## Reference [[Color Contrast & Accessibility (SN)|Smith, Matt Damon. "Color Contrast and Accessibility" (Shift Nudge).]] [—"Boost Your Design Game: 5 Color Contrast Scores You Can't Ignore" (YouTube Video).](https://www.youtube.com/watch?v=ULUNaH-G2uY&t=963s&ab_channel=MDS [—"Contrast Guide" (Use Contrast).](https://usecontrast.com/guide) [World Wide Web Consortium (W3C). "Contrast (Minimum): Understanding SC 1.4.3" (W3C website, accessed July 2024).](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) This is the source for the idea that visual acuity is matched with particular contrast scores. > The rationale is based on a) adoption of the 3:1 contrast ratio for minimum acceptable contrast for normal observers, in the ANSI standard, and b) the empirical finding that in the population, visual acuity of 20/40 is associated with a contrast sensitivity loss of roughly 1.5. A user with 20/40 would thus require a contrast ratio of 3 * 1.5 = 4.5 to 1. Following analogous empirical findings and the same logic, the user with 20/80 visual acuity would require contrast of about 7:1. > > The contrast ratio of 4.5:1 was chosen for level AA because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/40 vision. (20/40 calculates to approximately 4.5:1.) 20/40 is commonly reported as typical visual acuity of elders at roughly age 80. [[GITTINGS-FOZARD]](https://www.w3.org/TR/UNDERSTANDING-WCAG20/appendixE.html#GITTINGS-FOZARD) > > The contrast ratio of 7:1 was chosen for level AAA because it compensated for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/80 vision. People with more than this degree of vision loss usually use assistive technologies to access their content (and the assistive technologies usually have contrast enhancing, as well as magnification capability built into them). The 7:1 level therefore generally provides compensation for the loss in contrast sensitivity experienced by users with low vision who do not use assistive technology and provides contrast enhancement for color deficiency as well. [Baldwin, Nate. "Relative luminance" (Color & Contrast, accessed June 2024).](https://colorandcontrast.com/#/relative-luminance) There is a *lot* of incredible resources on this site related to contrast and color science. —["APCA (Accessible perceptual contrast algorithm)"](https://colorandcontrast.com/#/apca) —["Light & Dark Adaptation"](https://colorandcontrast.com/#/light-and-dark-adaptation) [Myndex. "Why APCA as a New Contrast Method?" (2022, Myndex Research).](https://git.apcacontrast.com/documentation/WhyAPCA) Dhannaway, Adham. "Ensure sufficient contrast" Practical UI, 2nd edition (accessed June 2024). Has some good notes on both WCAG and APCA. [Somers, Andrew. "Please Stop Using Grey Text" (Medium, 2022).](https://tangledweb.xyz/please-stop-using-grey-text-3d3e71acfca8) Behind a paywall, but flagging it for later.