Introduction

The university is committed to meeting the requirements for conformance level AA set by Web Content Accessibility Guidelines 2.0 (WCAG). Following these color guidelines helps ensure that all users can access Virginia Tech online resources.

For color, this means that there must be a certain contrast ratio between the foreground and background colors for most people to read the text comfortably. The required ratios vary depending on the size and weight of the text. Larger or bolder text needs less contrast than smaller text for most users to be able to read it.

Contents

• Ratios for Normal and Large-scale Text
• Meeting Virginia Tech Brand Palette Contrast Requirements
• Using the WebAIM Color Contrast Checker
  
  • Determine if Foreground and Background Color Combination Meets Contrast Requirements
  • Adjust Your Foreground and Background Colors to Meet Contrast Requirements
• Checking Contrast in Canvas' Rich Content Editor
• Checking Contrast in Microsoft Office
  
  • Microsoft Word
  • Microsoft PowerPoint
• Finding the Hexadecimal Color Value from the Colors Dialog Window in Microsoft Office on Windows
• Finding the Hexadecimal Color Value from the Mac Color Picker
• Converting from One Color Format to Another
  
  • Convert RBG to Hex
  • Convert Hex to RGB
• Getting Help

Instructions

Ratios for Normal and Large-scale Text

Text must have a contrast ratio of 4.5:1 or greater, unless it is considered large-scale text in which it needs a contrast ratio of at least 3:1.

Large-scale text is defined as being:

• 18pt or greater if the text is not bold or
• 14pt or greater if the text is bold

Most web developers do not use points for font size. The tables below show these values in pixels, ems, and percents.

Normal Text: Required Contrast Ratio 4.5:1 or greater

Large-scale Text: Required Contrast Ratio 3:1 or greater

Top of page

Meeting Virginia Tech Brand Palette Contrast Requirements

To see the brand colors, go to Color Guide on the Virginia Tech Brand Center site. Virginia Tech brand colors are:

• Yardline white
• Skipper smoke
• Land-grant grey
• Hokie stone
• Pylon purple
• Boundless pink
• Triumphant yellow
• Sustainable teal
• Vibrant turquoise
• Burnt orange
• Impact orange
• Chicago maroon

The university has created a Brand Color Tool in order to determine if combinations of Virginia Tech brand colors have enough contrast to meet the AA conformance level. Go to the Brand Palette Color Contrast Verification page and follow the instructions on how to select color samples. Scroll to the bottom after selecting your colors to see the color contrast analysis.

Top of page

Using the WebAIM Color Contrast Checker

WebAIM is a web accessibility site that provides a color contrast checker. You can check if the colors you are using meet the requirements for color contrast according to the Web Content Accessibility Guidelines 2.0 (WCAG). This will require you to have the foreground and background colors in hexadecimal format. Some programs, such as Microsoft Word or PowerPoint on Windows, only provide the colors in RGB format. To convert colors from RGB to hexadecimal notation, you can use the free online tool at RGB to Hex.

Determine if foreground and background color combination meets contrast requirements

Once you have these colors in hexadecimal notation, use the WebAIM Color Contrast Checker to determine whether the foreground and background colors you have chosen meet the requirements.

1. Go to the web page for the WebAIM Color Contrast Checker. 
2. Under Foreground Color and Background Color:
   
   • Enter the hexadecimal color value for the text color in the text field, or
   • Click on the color tile and use the color picker widget to choose a color.
     
3. As you change the colors, the Contrast Ratio will update.
   
4. Following the display of the Contrast Ratio, there are sections that tell you whether the calculated contrast ratio meets the contrast requirements set out in the WCAG. Since large or bolded text needs less contrast to be visible than normal text, there are separate sections for Normal Text and Large Text. Under each one, you are told whether the current contrast ratio meets WCAG AA or AAA success criteria for color contrast.
   
   • Under the heading Large Text, the indicator beside WCAG AA must read Pass. When you change the foreground and background colors, the indicators showing whether the contrast ratio meets WCAG requirements will update as well.
     

Adjust Foreground and Background Colors to Meet Contrast Requirements

If you have entered your colors in the WebAIM Color Contrast Checker and the combination does not meet contrast requirements, you can use the tool to adjust the colors until it does.

1. Go to the web page for the WebAIM Color Contrast Checker.
2. Use the Luminance sliders for the colors to either lighten the lighter of the two colors or darken the darker of the two colors.
   
3. As you move the sliders, the hexadecimal color value and contrast ratio displayed will be updated. When you reach an acceptable contrast ratio for a font size and weight, the indicator beside the conformance level will change from Fail to Pass.
   

Top of page

Checking Contrast in Canvas' Rich Content Editor

1. From the Rich Content Editor in Canvas, click the Check Accessibility button. This button appears as an icon of a person in a circle with their arms and legs extended.
   
2. The Accessibility Checker will appear on the far right of the page, displaying any accessibility errors it has found with the content in the editor.
   
3. If the checker finds multiple issues, you can navigate between them using Prev and Next buttons.
   
4. If there is a problem with the text contrast, you will find a text description of the issue with the contrast ratio required for the text’s font size and weight along with several controls that let you adjust the color until it meets the contrast requirement:
   
   • The Change text color field. You can enter a color value in either the RGB or Hexadecimal formats.
   • A luminosity picker
   • A hue slider
   • An opacity slider
5. Adjust the text color until it meets contrast requirements using any of the following methods:
   
   • By entering a new RGB or Hexadecimal color value in the Change text color field. 
   • Using the luminosity picker.
     
     • This control lets you make a pure hue lighter, darker, or more gray.
     • The picker widget is a rectangle, showing a diagonal gradient wherein the pure hue, with no black or white added, is in the upper right corner.
     • As you progress left along the x-axis, more white is added to the pure hue. The color becomes progressively lighter until the color is pure white.
     • As you progress down along the y-axis, more black is added. The color becomes progressively darker until the color is pure black.
     • A small circle appears on the rectangle indicating where in the gradient the current color is.
       
       1. To change the color using this picker, just click and drag across the gradient.
       2. The circle will follow your mouse, adjusting the color as it goes.
       3. The Apply button will be enabled when you have a sufficient contrast.
          
   • Using the hue slider
     
     • The hue slider presents as a horizontal bar showing a natural gradation of colors.
     • Click and drag the control handle that appears on top of the horizontal bar to the right or left to change the base hue for the color.
     • The Apply button will become enabled when you have a sufficient contrast.
       
   • Using the opacity slider
     
     • The opacity slider determines how opaque the color is.
     • It is a horizontal bar showing the color as it would appear when fully opaque on the far right.
     • There is a checkerboard background behind the horizontal bar such that the further left you go, the more visible it becomes.
     • If you drag the control handle that appears on top of the horizontal bar all the way to the right, the color will be fully opaque, meaning none of the color behind it will show through.
     • If you drag the control handle all the way to the left, the color will be fully transparent, meaning only the unaltered background will be visible.
     • The Apply button will become enabled when you have a sufficient contrast.
       
6. Below these controls is the Apply button, which is initially disabled. As you adjust the text color using the controls, the color of the relevant text in the editor will be updated.
7. Once the color value has reached a sufficient contrast ratio, the Apply button will become enabled. Click on it to apply the new color to the relevant content in the editor.
   
   
   • Apply button disabled
     
   • Apply button enabled
     
8. Once you have found a color that meets contrast requirements, click the Apply button.
   

Top of page

Checking Contrast in Microsoft Office

Microsoft Word

Determine Text Color

1. Select your text.
2. From the Home tab click the down arrow next to the Font Color icon. Do not click on the Font Color icon itself.
   
3. From the options that appear in the Font Color drop-down list, choose More Colors…
   
4. Follow these steps for finding the hexadecimal color value for your particular platform (Windows | Mac).
5. You will use this hexadecimal number as your foreground color in the section Use WebAIM Color Contrast Checker, so write it down.

Determine Background Color

1. Select your text.
2. Expand the Shading drop-down list by clicking on the down arrow next to the paint bucket icon. Don't click the icon. 
   
3. In the Shading drop-down list, determine if No Color is selected. The rectangle beside the No Color option should be darker if it is
   
   • Any color is selected.
     
   • No Color selected.
     
4. If No Color is selected in the Shading drop-down list, click on the Design tab, then click Page Color. 
   
   1. In the options that appear in the Page Color drop-down list, determine if No Color is selected.
      
      1. If No Color is selected, you can treat your background color as being the hexadecimal number #000000. You will use this hexadecimal number as your background color in later steps, so write it down and skip to Use WebAIM Color Contrast Checker.
      2. If anything other than No Color is selected in the Page Color drop-down list, do the following:
         
         1. From the options that appear in the Page Color drop-down list, choose More Colors…
            
         2. Follow these steps for finding the hexadecimal color value for your particular platform (Windows | Mac).
         3. You will use this hexadecimal number as your background color in later steps, so write it down.
         4. Skip to Use WebAIM Color Contrast Checker
5. If anything other than No Color is highlighted when you expanded the Shading drop-down list, do the following:
   
   1. From the options that appear, choose More Colors…
      
   2. Follow these steps for finding the hexadecimal color value for your particular platform (Windows | Mac).
   3. You will use this hexadecimal number as your background color in the next step, so write it down.

Use WebAIM Color Contrast Checker

1. With the hex notations of the foreground and background color, use the WebAIM Color Contrast Checker to determine whether these hexadecimal color values meet contrast requirements.
2. If they do not, you can:
   
   1. Also use the WebAIM Color Contrast Checker to adjust the colors until they do meet contrast requirements.
   2. Copy the new hexadecimal color values back into Word.

Top of page

Microsoft PowerPoint

PowerPoint in Mac

Determine Text Color:

1. Select text you want to check.
2. Click the down arrow next to the Font Color icon to open the color selection box. 
   
3. Click More Colors…
   
4. Follow these steps for finding the hexadecimal color value in the Mac color picker.
5. You will use this hexadecimal number as your foreground color in Use the WebAIM Color Contrast Checker, so write it down.

Determine Background Color:

1. Position your cursor within the text. Do not select the text.
2. Click the arrow next to the Shape Fill icon to expand the drop-down list. 
   
3. In the options that appear in the Shape Fill drop-down list, see if No Fill is selected. The rectangle surrounding the No Fill option should be darker if it is.
4. From the options that appear, choose More Fill Colors…
   
5. In the Colors dialog window, click the Color Sliders tab, which is indicated by an icon showing horizontal sliders for Red, Green, and Blue.
   • In that tab, make sure that RGB Sliders is chosen in the drop-down list beside the gear icon.
     
6. If you noted that No Fill had been highlighted in the Shape Fill, but a single color appears behind the text, then do the following:
   
   1. Use the eyedropper to identify the background color as follows:
      
      1. Click the eyedropper icon beside the main color tile
         
      2. Click with the eyedropper cursor on the background color behind the text.
7. Make note of what is in the Hex Color # field. You will use this hexadecimal number as your background color in Use WebAIM Color Contrast Checker, so write it down.

Use WebAIM Color Contrast Checker

1. With the foreground and background color that you made note of, use the WebAIM Color Contrast Checker to determine whether these hexadecimal color values meet contrast requirements.
2. If they do not, you can:
   
   1. Use the WebAIM Color Contrast Checker to adjust the colors until they do meet contrast requirements.
   2. Copy the new hexadecimal color values back into the “Hex Color #” field of the Colors dialog windows you got them from originally.

PowerPoint in Windows

Determine Text Color: 

1. Select text you want to check.
2. From the Home tab click the down arrow next to the Font Color icon. Do not click on the Font Color icon itself.
   
3. From the options that appear, click More Colors…
   
4. Follow these steps for finding the hexadecimal color value on Windows versions of Office.
5. You will use this hexadecimal number as your foreground color in Use WebAIM Color Contrast Checker, so write it down.

Determine Background Color

1. Position the cursor within the text. Do not select the text.
2. From the Home tab expand the Shape Fill drop-down list. If using the mouse, make sure to click the down arrow rather than the label itself.
   
3. From the options that appear, click More Fill Colors…
   
4. Follow the steps for finding the hexadecimal color value on Windows versions of Office.
5. You will use this hexadecimal number as your background color in Use WebAIM Color Contrast Checker, so write it down.

Use WebAIM Color Contrast Checker

1. With the foreground and background color that you made note of, use the WebAIM Color Contrast Checker to determine whether these hexadecimal color values meet contrast requirements.
2. If they do not, you can:
   
   1. Use the WebAIM Color Contrast Checker to adjust the colors until they do meet contrast requirements.
   2. Copy the new color value back into PPT.

Top of page

Finding the Hexadecimal Color Value from the Colors Dialog Window in Microsoft Office on Windows

1. Click the Custom tab.
2. Make sure that RGB is chosen in the Color model drop-down list.
   
3. You'll be able to see the Red, Green, and Blue fields as well as the Hexadecimal notation.
   

Top of page

Finding the Hexadecimal Color Value from the Mac Color Picker

1. If it is not already selected, click the Color Sliders tab, which is indicated by an icon showing horizontal sliders for red, green, and blue.
   • Make sure that RGB Sliders is chosen in the drop-down list beside the gear icon.
     
2. The hexadecimal value for the color will be visible in the Hex Color # field. The number in this field will not be preceded by a number sign. Copy the value.

Top of page

Converting from One Color Format to Another

Convert RGB to Hex

1. Go to the RGB to HEX Color Converter site.
2. Enter the Red, Green, and Blue color values in their corresponding fields.
   
   • Each should be a number between 0 and 255.
3. Click the Convert to Hex to return the hexadecimal color value.
   
4. The hexadecimal number for the color value will be displayed above a rectangle displaying that color.
   

Convert Hex to RGB

1. Go to the HEX to RGB Color Converter site.
2. Enter the hexadecimal number for the color value you wish to convert to RGB in the Hex Code: # field. Do not include the number sign.
3. Press the Convert to RGB button to return the color value in RGB format.
   
4. The RGB formatted color code for the color value will be displayed above a rectangle displaying that color.
   

Top of page

Getting Help

For help checking color contrast, email assist@vt.edu to contact someone in the Technology-enhanced Learning and Online Strategies' (TLOS) Accessible Technologies group. 

Top of page