CSS Color Contrast

CSS Color Contrast

Color contrast is the difference in brightness between foreground and background colors and plays an important role in making text and interface elements easy to see and read.

Choosing colors with sufficient contrast improves readability for everyone and is especially important for people with low vision or other visual impairments. Web Content Accessibility Guidelines (WCAG) define measurable contrast requirements that can help you evaluate color combinations.

Contrast Ratio

A contrast ratio compares the relative luminance of two colors. Ratios range from 1:1, where the colors have the same luminance, to 21:1, the maximum contrast between black and white.

For example, black text on a white background has a contrast ratio of 21:1.

.example {
  color: #000000;
  background-color: #ffffff;
}

A higher contrast ratio generally makes foreground content easier to distinguish from its background, although the required ratio depends on the type and size of the content.

WCAG Text Contrast

WCAG defines minimum contrast ratios for text and images of text. At Level AA, normal text should have a contrast ratio of at least 4.5:1 against its background.

Level AAA uses a higher contrast ratio of at least 7:1 for normal text.

Large Text

WCAG allows a lower minimum contrast ratio for large text because larger characters are generally easier to distinguish.

Large text is defined as at least 18pt, approximately 24px, or at least 14pt, approximately 18.67px, when bold. At Level AA, large text requires a contrast ratio of at least 3:1.

At Level AAA, large text requires a contrast ratio of at least 4.5:1.

Interface Components

Contrast is also important for visual information needed to identify user interface components and meaningful graphical objects. WCAG Level AA generally requires a contrast ratio of at least 3:1 against adjacent colors for the visual information needed to identify these elements.

This can apply to elements such as form control boundaries, focus indicators, icons, and other graphics that users need to perceive in order to understand or operate the interface.

Do Not Rely on Color Alone

Good contrast does not replace the need for other visual cues. Color should not be the only way important information, states, or actions are communicated.

For example, links within surrounding text can use an underline in addition to a different color, and form errors can include text or an icon rather than relying only on a red border.

a {
  color: #005ea8;
  text-decoration: underline;
}

Using more than color alone helps make information understandable when users cannot easily distinguish particular colors.

Choosing Accessible Colors

When choosing foreground and background colors, check their contrast ratio rather than relying only on how the colors look. Similar-looking combinations can have very different contrast values.

Contrast should also be checked when colors change during interaction, such as link states, hover effects, focus indicators, disabled controls, and other interface states.

Remember that transparency can change the final displayed color. When alpha transparency or the opacity property is used, evaluate the resulting color against the background on which it actually appears.

Color Contrast Example

Use the foreground and background color controls to compare different color combinations. The example displays the contrast ratio and whether the selected colors meet WCAG AA and AAA contrast requirements for normal and large text.

<div class="contrast-example">
  Color Contrast Example
</div>

Try combinations with similar colors and then increase the difference between them to see how the contrast ratio changes.