Colors

The base color options that will be allowed within this theme. It is important for Web Accessibility that foreground text colors properly contrast with their background colors. Acceptable contrast ratios are based on font size. Colors can be tested for contrast at https://webaim.org/resources/contrastchecker/.

• WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal size text.
• WCAG 2.0 level AA requires a contrast ratio of at least 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.

Primary Colors

The primary brand color and it's variants

• 900
  #012269
• 800
  #012d8c
• 700
  #0c3ba0
• 600
  No Value Set
• 500
  #ffffff
• 400
  #444444
• 300
  No Value Set
• 200
  No Value Set

Background Colors

The color of the background for the component or page this theme is applied to.

• Background
  #ffffff

Fonts

Settings for each typographic element of a page or component (e.g. headings, paragraph text, etc). Google font names are allowed for each section. The font name should be entered as it appears on https://fonts.google.com/. (e.g. Roboto, Open Sans, Source Sans Pro, Arimo, Bitter etc.)
NOTE: Font Family rules are only applicable to page level themes.

Links

• Link Color
  Primary Color (900)
• Link Hover/Focus Color
  Primary Color (700)
• Focus / Underline Color
  Primary Color (700)

Buttons

Primary Button

• Background Color
  Primary Color (900)
• Text Color
  White (#FFFFFF)
• Border Color
  Primary Color (900)
• Focus / Hover Background Color
  Primary Color (400)
• Focus / Hover Text Color
  White (#FFFFFF)
• Focus / Hover Border Color
  Primary Color (400)

Secondary Button

• Background Color
  Transparent
• Text Color
  Primary Color (900)
• Border Color
  Primary Color (900)
• Focus / Hover Background Color
  Primary Color (900)
• Focus / Hover Text Color
  White (#FFFFFF)
• Focus / Hover Border Color
  Primary Color (900)

Tertiary Button

• Text Color
  Primary Color (900)
• Focus / Hover Text Color
  Primary Color (400)
• Focus / Underline Color
  Primary Color (400)

Sub Heading

Tabs

• Text Color
  No Value Set
• Background Color
  No Value Set
• Underline Color
  No Value Set
• Active Text Color
  No Value Set
• Active Underline Color
  No Value Set
• Active Background Color
  No Value Set

Web Content Accessibility Guidelines (WCAG)

Introduction

Contrast and color use are vital to accessibility. Users, including users with visual disabilities, must be able to perceive content on the page. There is a great deal of fine print and complexity within the Web Content Accessibility Guidelines (WCAG) 2 that can easily confuse web content creators and web accessibility evaluators. This article pulls together the terms and principles needed to understand WCAG 2 requirements for contrast and color.

WCAG 2 "Contrast Ratio"

In WCAG 2, contrast is a measure of the difference in perceived "luminance" or brightness between two colors (the phrase "color contrast" is never used). This brightness difference is expressed as a ratio ranging from 1:1 (e.g. white text on a white background) to 21:1 (e.g., black text on a white background). To give a frame of reference, on a white background…

• Pure red [#FF0000 / rgb(255, 0, 0)] has a ratio of 4:1. I am red text.
• Pure green [#00FF00/ rgb(0, 255, 0)] has a very low ratio of 1.4:1. I am green text.
• Pure blue [#0000FF / rgb(0, 0, 255)] has a contrast ratio of 8.6:1. I am blue text.

Three success criteria in WCAG 2 address contrast:

• 1.4.3 Contrast (Minimum)
• 1.4.6 Contrast (Enhanced)
• 1.4.11 Non-text Contrast

Test Theme

Color blindness filter