TriWest Color Usage

The use of color affects legibility, comprehension, and conformance to web accessibility standards.

Color Guidelines

• Do not use color alone to convey information.
• Provide sufficient contrast between text and background.

Primary Color Palette

The TriWest color palette consists of two primary color and two secondary colors: Old Glory Blue, Old Glory Red, a light blue, and a light grey.

WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components (such as form input borders). WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger. WCAG defines large text as text that is 18pt and larger, or 14pt and larger if it is bold.

Secondary Color Palette

Color as Indicator

Color should not be the only indicator for interactive elements. For example, underline links when users hover over text, or use an asterisk to mark a required field. Red/green color blindness is also rather common, so avoid green on red or red on green. (Especially avoid using red and green for “bad” and “good” indicators.)

Color Combinations