Skip to content

Colors

Jump to bottom
Zak edited this page Mar 17, 2020 · 6 revisions

Overview

Colors are used to provide a wide variety of user experiences. Color may be used to convey information such as priority or severity. Color may be used to group or associate information between two or more elements. Color also provides contrast to help a user's eyes find the information they are looking for.

Motivation

Color palettes define a brand's identity and have a major impact on accessibility. Color is a foundation of web design and special care should be taken to minimize accessibility risks while providing enough flexibilities for a designer or brand to express itself.

Ideal Workflow

  • User adds @pariveda-solutions/react-toolkit to their project
  • Helper function createPalette accepts a primary color and generates WCAG-compliant color palette
    • Additional research needed to determine viability of achieving A, AA, or AAA compliance using an automatic palette generator
  • Generated palette is imported into project root file and bundled with app

Accessibility

Color accessibility is most commonly tested by calculating the contrast ratio between two colors' luminance values. To calculate the contrast ratio between two colors, you must first know or calculate each color's luminance. See the WCAG definition for Relative Luminance for more information.

luminance = .2126 * R + .71152 * G + .0722 * B

where R, G, & B are calculated as:

C = R / 255; // Substitute G & B channels for respective values
if (C <= .03928) {
  return C / 12.92;
} else {
  return ((C + .055) / 1.055) ^ 2.4
}

To calculate the contrast ratio between two colors, use the following calculation from the WCAG Definition for Contrast Ratio

contrast-ratio = (light-luminance + .05) / (dark-luminance + .05)

The WCAG requirements for contrast ratios state:

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

Except for:

  • Large scale text (18pt or bold 14pt) must maintain a ratio of 3:1
  • Incidental text (part of an inactive user interface)
  • Logotypes representing a brand

Additional Resources

Clone this wiki locally