Accessible Technologies – How to Ensure Sufficient Color Contrast in Web Content


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.

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:

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

 

pt

px

em

%

Not-bold

< 18

< 24

< 1.5

< 120

Bold

< 14

< 18.7

< 1.2

< 120

 

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

 

pt

px

em

%

Not-bold

≥ 18

≥ 24

≥ 1.5

≥ 120

Bold

≥ 14

≥ 18.7

≥ 1.2

≥ 150

 

Contents

 

Top of Page

 

Instructions

Meeting Virginia Tech Brand Palette Contrast Requirements

To see the brand colors, go to The Virginia Tech brand and scroll down to Brand Identity for the color guide. Virginia Tech brand colors are:

The university has created a Brand Palette Color Contrast Verification tool to determine if combinations of Virginia Tech brand colors have enough contrast to meet the AA conformance level.

  1. Go to the Brand Palette Color Contrast Verification page.
  2. Scroll down to Contrast Verification Tool.
  3. Choose your foreground color from the Foreground / text color drop-down.

    Chicago maroon is selected as foreground color

  4. Choose your background color from the Background color drop-down.

    Burnt orange selected as background color

  5. Under Text type (unit conversions above), indicate whether your text is Normal or Large.

    Normal selected in the text scale

  6. Click Check my choices.

    Check my choices button circled

  7. An alert dialog will appear saying whether the color combination meets contrast requirements.

    Image of the above instructions
    Image of the above instructoins

 

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.

      Image of the above instructions

    • The color picker widget may appear differently depending your browser and operating system. Two examples are:

      • Mac Color Picker

        Image of the above instructions

      • Windows Color Picker

        Image of the above Instructions

  3. As you change the colors, the Contrast Ratio will update.

    Image of the above instructions

  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.

      Image of the above instructions

 

Top of Page


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 Lightness sliders for the colors to either lighten the lighter of the two colors or darken the darker of the two colors.

    Background color lightness slider circled

  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.

    Pass and fail circled under large text

 

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.

    Accessibility button to the right of Paragraph in the Rich Content Editor

  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.

    Image of the above instructions

  3. If the checker finds multiple issues, you can navigate between them using Prev and Next buttons.

    Number of issues circled. Color contrast is first issue

  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:

    Image of above instructions

  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.

          Image of above instructions

    • 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.

        Image of the above

    • 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.

        Image of the above

  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

      Image of the above instructions

    • Apply button enabled

      Image of the above instructions

  8. Once you have found a color that meets contrast requirements, click the Apply button.

    Apply button available

 

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.

    Home tab circled in word. Font color circled in font section

  3. From the options that appear in the Font Color drop-down list, choose More Colors…

    More colors circled in drop-down

  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

    Shading button circled in paragraph section

  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.

      Box next to No Color is clear

    • No Color selected.

      Box next to No color is filled in

  4. If No Color is selected in the Shading drop-down list, click on the Design tab, then click Page Color

    Design tab selected. Page color circled in Page background section

    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…

          More colors circled in drop-down

        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…

      More colors circled in drop-down

    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 color values back into Word:
      1. On macOS, copy the new hexadecimal color values back into the “Hex Color #” field of the Colors dialog windows you got them from originally.
      2. On Windows, do the following:
        1. Use Hex to RGB to convert the hexadecimal color value to RGB format.
        2. Copy the red, green, and blue values back into their respective fields in the Colors dialog windows you got them from originally.

 

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. 

    Home tab circled in powerpoint. Font color circled

  3. Click More Colors…

    More colors circled in font color drop-down

  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. 

    Shape fill circled in home tab

  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…

    More fill colors circled in drop-down

  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.

    Color sliders tab circled

  6. In that tab, make sure that RGB Sliders is chosen in the drop-down list beside the gear icon.

    Image of the above

  7. 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

        Eye dropper circled next to sample color

      2. Click with the eyedropper cursor on the background color behind the text.
  8. 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.

    Home tab circled in Windows powerpoint. Font color circled in font section

  3. From the options that appear, click More Colors…

    More colors circled in font 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.

    Shape fill circled in home tab

  3. From the options that appear, click More Fill Colors…

    More fill colors circled in shape fill

  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 values back into PPT, as follows:
      1. Use Hex to RGB to convert the hexadecimal color value to RGB format.
      2. Copy the red, green, and blue values back into their respective fields of the Colors dialog windows you got them from originally.

 

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.

    Custom tab circled in dialog box. Color model set to RGB

  3. Make note of the numbers in the RedGreen, and Blue fields.

    RGB number fields circled

  4. Use RGB to Hex to convert these RGB color values to 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.

    Color sliders tab open

  2. Make sure that RGB Sliders is chosen in the drop-down list beside the gear icon.

    Image of the above

  3. 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 RedGreen, 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.
    Image of the above
  4. The hexadecimal number for the color value will be displayed above a rectangle displaying that color.
    Image of the above

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.
    Image of the above
  4. The RGB formatted color code for the color value will be displayed above a rectangle displaying that color.
    Image of the above

 

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