Color Palette

Every graphical element supporting web projects should follow these specifications for color. The supporting color palette can be used alone or along with the primary colors for more options or emphasis on graphical elements, such as buttons or icons.

The CareCredit website has to accommodate persons who have difficulty seeing different colors and other vision problems. Therefore, care must be taken to avoid designs that rely on the use of color to convey meaning (for example, color coding cells in a table), or to indicate the function of an element like a button, or text on the page (for example, using a different color to indicate linked text).

In the two examples above possible solutions include:

• Adding superscript numeric codes to show related cells in the table, in addition to the colored fill.
• Adding an underline to the linked text and button labels, in addition to the color.

To make sure that text elements are legible to vision impaired persons. The text must have enough visual contrast for those users to be able to see it clearly. The colors chosen for the CareCredit color palette ensure that there is always enough contrast to meet the legibility requirements.

It is important that colors used for text follow the WCAG2.0 Level AA requirements:

Contrast ratio of 3:1 for large colored text against white, or for white text against a colored background (Large text is defined as 14 point and bold or larger, or 18 point or larger) (WCAG2 1.4.1).

Contrast ratio of 4.5:1 for normal colored text against white, or for normal white text against a colored background. (Normal text is defined as anything below 14 point and bold, or 18 point if not bolded) (WCAG2 1.4.1).