Color Contrast

Color contrast is defined by the relationship between the foreground (text or graphic) color and the background color. Thus, they can be organized into pairs where either color can be the foreground or background. These color pairings were tested using WebAIM Contrast Checker.

The image below shows the accessible and non-accessible combinations of System Offices' color palettes, as well as black and white, as applied to large text (18 point and larger, 14 point bold and larger), small text (17.9 point and smaller, 13.9 point bold and smaller), and graphic elements. The accessible combinations are indicated by the term "PASS" within the graphic.

The hex values of the color pairings that meet WCAG AAA standards for small text are listed below with the darker color listed first. Where the darker color has multiple pairs, they are listed in increasing contrast order.

Both Monochromatic: 000000 & A5A8AA; 000000 & E8E9EA; 000000 & FFFFFF.

One Monochromatic: 000000 & FFD125; 000000 & BFD46D; 000000 & 6FAFC7; 13294B & E8E9EA; 13294B & FFFFFF; 204097 & E8E9EA; 204097 & FFFFFF; 0455A4 & FFFFFF; 0D605E & FFFFFF.

Both Chromatic: 13294B & BFD46D; 13294B & FFD125.

Color Difference

Attention should be paid to the use of color when it is used to differentiate (e.g., color-coding Excel cells, emphasizing or marking up text, graph legends or graphic elements). In these cases, the best practice is to use some other indication in addition to color (such as borders, underlining, patterns, or additional text) so that people who are colorblind can more easily see these differences. Additionally, it is good to use a tool such as Coloring for Colorblindness to select colors that work well together in grayscale or across forms of colorblindness.

Digital Accessibility Assistance

System Offices Shared Services (SOSS) adheres to WCAG AAA contrast standards.You may reach out to SOSS at sharedservices@uillinois.edu for assistance regarding digital accessibility, including color contrast.