Menu

Settings

Theme
Animations
Scrolling

Encyclopedia

Color Contrast

Color contrast refers to the difference between two colors. More specifically, color contrast refers to how discernible or legible content in one color would be when placed on top of or adjacent to another color. Contrast often has less to do with the hue of the colors (where these colors would fall along the rainbow), and more to do with whether one color is lighter or more vibrant than the other.

Having sufficient contrast between two colors especially benefits low-vision or colorblind readers. On the other hand, extremely bright colors and high contrast can trigger migraines.

Contrast Ratios

Color perception is fundamentally subjective. However, from a testing perspective, it is useful to have a more concrete determination of contrast that we can point to decide whether two colors are too low contrast to be used together. Color contrast algorithms are mathematical formulae which output contrast ratios, numerical representations of the contrast between two colors. Contrast ratios are used as benchmarks for contrast-centric accessibility requirements.

Currently, the industry standard (and, in jurisdictions which require WCAG adherence, the legal standard) for measuring color contrast is the WCAG 2 color contrast algorithm. The WCAG 2 formula outputs ratios ranging from 1:1 (comparing any color with itself) to 21:1 (comparing black and white).

Other contrast algorithms do exist — most notably, APCA, which was once in the WCAG 3 draft specification but was removed from the draft in . APCA differs from the WCAG 2 formula in that it takes more factors into account, such as font weight and size, as well as which color is the foreground and which is the background. If you want to use a contrast algorithm such as APCA, you can do so, but given WCAG is a legal standard in many jurisdictions, I would recommend treating any non-WCAG algorithms as supplementary to the WCAG formula, rather than as a wholesale replacement.

Color Contrast Requirements in WCAG

Level AA Criteria

Success criteria marked as Level AA are part of the industry and legal standard that most sites are held to.

Success Criterion 1.4.3: Contrast (Minimum) ensures text has sufficent contrast against its background. Success Criterion 1.4.11: Non-text Contrast ensures that UI controls and necessary graphics have sufficient contrast against their background. Because text tends to be smaller and more intricate, text has a higher standard it needs to meet.

Success Criterion 1.4.3: Contrast (Minimum) (Level AA)

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large Text
Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental
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.

Success Criterion 1.4.11: Non-text Contrast (Level AA)

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

User Interface Components
Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
Graphical Objects
Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

Level AAA Criteria

Most teams and sites are not held to Level AAA conformance, but it may still be worthwhile to consider whether Level AAA criteria are right for your site. The Level AAA Success Criterion 1.4.6: Contrast (Enhanced) increases the standards for both text and non-text content compared to the Level AA criteria.

Success Criterion 1.4.6: Contrast (Enhanced) (Level AAA)

The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following:

Large Text
Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;
Incidental
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.

More on This Site

External Resources