Create Institution Landing Pages: Color Selection

An institution can create a customized, branded Transferology® landing page to help promote the college or university to prospective students. When navigating to Transferology through the institution's referral link or badge, students will see the customized page (assuming it is published) instead of the CollegeSource-branded homepage. This article within Create Institution Landing Pages: An Overview Guide explains how School Admins can customize select header text, background colors, buttons, icons, and borders within the page.

Articles in this series:
As noted above, School Administrators can enter the hex numbers of school colors to customize select header text, background colors, buttons, icons, and borders within the landing page.

School Administrators can contact the institution's Marketing department to confirm hex code numbers.

Primary Color

The Primary Color fields are used to establish the color of the header text appearing on a white background and the background color of sections with white header/body text.
Primary Color Selection within the Institution Template Editor, as described below.
Select to see a larger version

By default, a primary hex code of #e81f10 (red) is entered. If not changed, this will be the primary color that displays upon publication of the page.

To input the primary color selection:

  1. Use the keyboard to remove the default hex code number from the Primary Color hex code box.
  2. Enter a hex code number in its place.
    • Hex codes are six characters, contain numbers 0-9, and letters a-f.

Primary color hex code box

Example of area displaying primary color text change within institution landing page.
Select to see a larger version.
  1. Use the following fields to additionally adjust and verify the display of the color selection after entering the hex code:
Field Image Description
lighten background

Select this button to lighten the text.
darken background

Select this button to darken the text.
Results

Sample Preview Text button

 The sample text will adjust to reflect the hex code entered and any lightening or darkening of the text.
Accessibility Check

Accessibility check; checkmarks appear to the right of WCAG AA and WCAG AAA

Accessibility check; iinformation icons appear to the right of WCAG AA and WCAG AAA

WCAG AA

CollegeSource is committed to ensuring its products are accessible to all users. The company follows WCAG 2.1 Level AA standards when developing all products.

The color chosen must be WCAG AA accessible for use with the color white (#FFFFFF).

A green checkmark indicates that the color selected meets this guideline.

A red information icon indicates the color selected does not meet this standard.

WCAG AAA

A green checkmark indicates that the color selected meets WCAG AAA guidelines. This is a higher guideline than what is required by CollegeSource.

A red information icon indicates the color selected does not meet this standard.

Institutions will not be able to publish landing pages with inaccessible colors. If a user enters a hex code that does not meet WCAG AA guidelines, a message will appear under the primary color hex code indicating that WCAG AA accessibility standards are required.

Message reads: Primary color must meet WCAG AA accessibility standards



Visit a sample Transferology® institution landing page for a detailed look at how changes to the primary and secondary colors appear on an institution landing page. Hex #00008b (dark blue) is the primary color, whereas hex #b94700 (orange) is the secondary color.

  1. Select the Preview Changes button at the top of the template to see how selections appear on the landing page.
  2. Select Save Changes to save work on the landing page.
    • A pop-up will appear noting that the user is about to make changes to the landing page for the institution. Doing so will make these changes visible to the public if the landing page has been published. Make sure to review changes via the Preview Changes button.
      • Select Yes to proceed with saving changes.
      • A confirmation will appear indicating that changes have been saved.

Secondary Color

The Secondary Color fields are used to establish the color of the main buttons on the Transferology homepage (" Sign up" and " Get started"), its icons, and the border color for "Maps" and "Quick facts."
Secondary Color Selection within the Institution Template Editor, as described below.
Select to see a larger version

By default, a primary hex code of #0090b0 (blue) is entered. If not changed, this will be the primary color that displays upon publication of the page.

To input the secondary color selection:

  1. Use the keyboard to remove the default hex code number from the Secondary Color hex code box.
  2. Enter a hex code number in its place.
    • Hex codes are six characters, contain numbers 0-9, and letters a-f.

Example of area displaying secondary color text change within institution landing page.
Select to see a larger version
  1. Use the following fields to additionally adjust and verify the display of the color selection after entering the hex code:
Field Image Description
lighten background

Select this button to lighten the buttons' background, icons, and borders.
darken background

Select this button to darken the buttons' background, icons, and borders.
Results

Button Preview button

 The button will adjust to reflect the hex code entered and any lightening or darkening of its background.
Accessibility Check

Accessibility check; checkmarks appear to the right of WCAG AA and WCAG AAA

Accessibility check; iinformation icons appear to the right of WCAG AA and WCAG AAA

WCAG AA

CollegeSource is committed to ensuring its products are accessible to all users. The company follows WCAG 2.1 Level AA standards when developing all products.

The color chosen must be WCAG AA accessible for use with the color white (#FFFFFF).

A green checkmark indicates that the color selected meets this guideline.

A red information icon indicates the color selected does not meet this standard.

WCAG AAA

A green checkmark indicates that the color selected meets WCAG AAA guidelines. This is a higher guideline than what is required by CollegeSource.

A red information icon indicates the color selected does not meet this standard.

Institutions will not be able to publish landing pages with inaccessible colors. If a user enters a hex code that does not meet WCAG AA guidelines, a message will appear under the primary color hex code indicating that WCAG AA accessibility standards are required

Message reads: Secondary color must meet WCAG AA accessibility standard



Visit a sample Transferology® institution landing page for a detailed look at how changes to the primary and secondary colors appear on an institution landing page. Hex #00008b (dark blue) is the primary color, whereas hex #b94700 (orange) is the secondary color.

  1. Select the Preview Changes button at the top of the template to see how selections appear on the landing page.
  2. Select Save Changes to save work on the landing page.
    • A pop-up will appear noting that the user is about to make changes to the landing page for the institution. Doing so will make these changes visible to the public if the landing page has been published. Make sure to review changes via the Preview Changes button.
      • Select Yes to proceed with saving changes.
      • A confirmation will appear indicating that changes have been saved.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us