Customize Themes for VicTouch¶
Your VicTouch time stations can be customized or branded to match your organization's color scheme. This is a great way to unify your volunteer program with your organization. Even if your organization doesn't have a specific color palette, the theming options are a fun way to customize the aesthetics of the sign-in station.
Keep in mind that your choices for the theme will appear at each VicTouch sign-in station in use by your organization no matter what kind of computer, tablet, or other device the station is launched on. This includes the volunteer's own cell phones if you include an option to launch the station with a QR code.
This help topic explains how to set or update the color theme for VicTouch.
The first step is to get to the Setup page in your account used to customize the theme. To do this:
- Select Setup from the menu.
- Select VicTouch.
- Select Theming.
The page is divided into two sections. The VicTouch Theming section for setting the color of the different elements of the time stations, and the Preview section to get a quick idea of how the selections look. The VicTouch Theming section is on the left and Preview section is on the right. Or, when your screen width is narrow the VicTouch Theming section is at the top and the Preview section is below.
Click a section heading below to expand its contents and learn more.
Selecting a Color¶
To update a color, click on the field you'd like to change and use one of the following options:
- Using the Hex field, you can delete the current color, and then enter the RGB hexadecimal notation for the color you'd like.
- You can also use the color slider and color gradient to manually select the color you'd like.
- The color selector will also have a section labeled Other Colors which will show all the colors that have been selected for other elements in VicTouch. If you'd like the selected field to match with another you've already configured, you can select it from the Other Colors section.
- Additionally, if you use Google Chrome or Microsoft Edge, the color selector will include an eye dropper tool that you can use to select a color elsewhere on your screen to use for that field.
If you're trying to enter an exact color, entering the value in the Hex field, or using the eyedropper tool, will give the most accurate result. If you use the Hex field, color codes are in standard hexadecimal RGB color notation. This is the color notation used in HTML (Hypertext markup language) to specify color attributes for web page elements. Hexadecimal RGB color notation includes the number sign or hashtag character (#) followed by a six character RGB color value in hexadecimal notation (hex).
Sometimes another department in your organization such as the marketing department can supply the color codes if your organization has a predetermined color scheme. If not, there are many resources available online such as the HTML Color Values page of the W3 School's website.
These are some examples of hex color notation:
#FFFFFF (white)
#0000000 (black)
#FF0000 (red)
#1D9945 (green)
If you'd rather not change each color setting separately, and don't need to match a predetermined color palette, we've come up with a wide variety of default color schemes that you can select with a touch of the button. See the Default Themes section below for more information.
Preview Color Selection¶
The Preview section of the page gives you a quick way to see how your color selections will appear for your VicTouch time stations. Because each account can be set up differently, the view is simplified. If you want to see exactly how the color selections will look, you can save your choices and then preview VicTouch as shown in the Preview VicTouch callout box below.
The PIN Screen is shown in the Preview section of the page by default. Use the menu items at the bottom to preview other views. For example, select Schedule if you want to see the color selections if you include a schedule page at the VicTouch stations.
If you do not like your color choices in the preview and have not saved the page, you can click the Reset button at the bottom of the VicTouch Theming section to return the color selections to their previous values.
Preview VicTouch
You don't need to have a VicTouch time station set up to see how your selections will appear for volunteers! You can preview VicTouch as a volunteer at any time. Just get a volunteer's PIN from their Core tab, then follow these steps:
- Choose Setup from the menu.
- Expand VicTouch.
- Click Launch at This Computer.
- A warning dialog will show because this method of starting VicTouch should not be used for your stations. Because you're just previewing, it's safe to click Yes.
Considerations for ADA/WCAG Compliance¶
Your choices for the colors of the elements on the VicTouch station can impact whether or not the stations meet the standards for the Americans with Disabilities Act (ADA) and Web Content Accessibility Guidelines (WCAG). For example, selecting the same color, or colors with similar hues and saturation, for text and background elements will make it difficult for users to read the text or see the element.
We recommend making sure your choices provide enough contrast to make them easily viewable for all users. To meet WCAG 2.0 compliance, this means a color contrast ratio of 4.5:1 or higher. There are many contrast checkers online that can help you see if your color choices have a sufficient ratio. We found a good one on the WebAIM website.
To check your choices, you just need to get the hex values for the colors of the elements that will appear on the same part of the page. For example, the Background and Text colors for the Content Cards.
Take these values and put them into the foreground and background fields of the contrast checker. The checker will calculate the ratio so you can see if it is above 4.5:1. Here's how this looks on the WebAIM website.
Default Themes¶
The VicTouch time stations include over 25 different default themes that allow you to change all of the color fields at once. These default themes were professionally designed with complimentary color choices to allow you to quickly select a color palette that invokes your organization's mission. You can go from sleek and modern to nautical or woodsy with just a touch of a button.
To select a theme, just expand the sections under the Default Themes heading and then click on the choices until you find one that you like. Once you've found it, save your choice and you're good to go. After you select a default theme, you can change individual color fields to tweak the appearance if you'd like.