Dublin Library

The Publishing Project

Color Contrast in CSS

  • 1 min. read

 

The CSS Color Level 5 specification defines a way to provide contrast between background and foreground colors.

The color-contrast() function takes the followng arguments:

  • A color for the background
  • Two or more colors to compare against the background color. The one with the highest contrast ratio will be used as the foreground color with an optional target contrast level will be used.
    • The target contrast level can be a number or one of the following strings: AA, AA-large, AAA, or AAA-large each representing a different requirement for body text versus large text (they have different contrast requirements) and AA versus AAA WCAG 2.1 compliance levels.

The example below shows how to use the color-contrast() function to provide a contrast ratio of at least 3.0 for the text color.

  color: color-contrast(#f8efec vs
    #1438bd, #1e456e, #f3ebad
    to AA-large);

What the example is saying is: For a background color of #f8efec, find the color with the highest contrast ratio among the three colors I gave you (#1438bd, #1e456e, #f3ebad) that matches the criteria for AA-large WCAG 2.1 compliance.

We can also flip the requirement around and use color contrast to provide a background color that meets the requirements.

This function presents an interesting way to do contrast ratio calculations in CSS and provide color alternatives for the user

Edit on Github