<style>
.document-footer {display:none;}
</style>

<h1>
<small>Razorfish Accessibility</small>
<div>Color Contrast Guide</div>
</h1>

## Overview

Color contrast is a critical aspect of accessibility, and is the guidelines create a minimum requirement for **text legibility**, and the ability to perceive **interactive, non-text controls or other essential, image-based information**. It is important for designers and auditors to understand the color contrast requirements, and to ensure and document that their work is compliant.

This guide will dive into the color contrast requirements and the best practices for testing and documenting the compliance of our design work.

## Essential Text

Per WCAG [SC 1.4.3](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast), all essential, non-decorative text - whether HTML text or important text that is part of an image - must meet a minimum standard of contrast vs. its background color.

### Requirements

The requirements vary based on text size and font weight:

- **Large text** that is at least **19px and bold** or **24px and normal weight** must have a text-to-background color contrast ratio of at least **3:1**
- **Normal text** that doesn't meet the large text requirements must have a text-to-background color contrast ratio of at least **4.5:1**

In other words:
- A **4.5:1** color contrast ratio is the **minimum for all text**
- A **3:1** color contrast ratio is the **minimum for text that is at least 19px and bold or at least 24px and normal weight**

Exemptions:
- **Incidental Text:** Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- **Logotypes:** Text that is part of a logo or brand name has no minimum contrast requirement.

## Non-Text Controls and Essential Images

Per WCAG [SC 1.4.11](https://www.w3.org/TR/WCAG21/#non-text-contrast), all visual, non-text controls and their states, and images that are necessary for a user's understanding of essential information.

**Non-Text Controls** are any UI component that is intended to be interacted with directly by a user, and is purely visual and contains no text that labels or describes its purpose. Examples include:
- an clickable image
- a custom checkbox, radio button, toggle, drop down menu
- a star rating widget

### Requirements

## Text Design and Development Considerations

From a strict compliance standpoint, *every pixel surounding each letter of text must meet the color contrast minimums*. Color contrast can be difficult to ensure with responsive layouts, especially when images may change in size or the position of the text over an image can change based on the screen width/height. Additionally, images can be updated and may introduce color contrast issues.

Images can be darkened, either in those areas where text may overlay the image or by darkening the image overall, but if there are lighter parts of the background image, we cannot ensure that text may overlay those lighter areas, and therefore be in violation of the color contrast requirements.

The best option is to prescribe a text treatment that ensures color contrast compliance. Two options:

### Darkened Background

For any text, a background color can be applied with a custom color and opacity.

The example below uses the following CSS:

background-color: rgba(86,52,26,.42);//for larger heading text
background-color: rgba(86,52,26,.55);//for smaller subtitle text


CSS background gradients are another option:


The example above uses the following background gradient treatment:

background: linear-gradient(10.29deg,#00113a 41.87%,rgba(0,17,58,0) 89.15%);

### Text Shadow

The CSS property `text-shadow` is widely supported by popular browsers and can be used to create an outline or shadow behind text.

`text-shadow` can be customized to provide a hard outline or soft shadow, with custom color and opacity.

Example: This code will create a 1px, 40% opacity black outline around the text:

text-shadow: 
    0 1px 1px rgba(0, 0, 0, .4),
    0 -1px 1px rgba(0, 0, 0, .4),
    1px 0 1px rgba(0, 0, 0, .4),
    -1px 0 1px rgba(0, 0, 0, .4);

This text shadow treatment is applied to the text in this banner ad:


Text shadows don't always need to be black, hard-lined edges. The CSS text shadow property allows for control over:
- width
- color
- transparency
- blur radius

More info: https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow

### Text Shadow w/Gradient

The following examples use a combination of a bottom-aligned dark gradient and a text shadow on the smaller category text in the upper right.

**Example 1**

The "HOME BUYING" text is smaller and thus has a higher contrast requirement. The shadow is more noticeable in the lighter areas of the background, but is unnoticeable over the subject's darker shirt.

**Example 2**

The "FINANCE 101" text has the same drop shadow applied to it, even though the background is dark enough that it isn't necessary. When this text appears over a darker background, the shadow blends in and is unnoticeable.

---

## Testing With Colour Contrast Analyzer (CCA)

CCA is a simple color contrast checking tool. It provides a color picker and calculates the color contrast ratio of the two colors chosen.

Keep in mind that entering hex values may provide a more accurate result vs. selecting color with the color picker.

[Download CCA](https://developer.paciellogroup.com/resources/contrastanalyser/)