Since Flash does not honor the color and contrast selections made by users in the operating system, an alternative is to provide users with options from within your Flash application. Such options should represent a full range of color and contrast.

There are several ways to provide users with color and contrast options in Flash. One approach is to provide buttons in a dropdown menu, as shown below. In this example, users are provided with four different contrast settings on the first screen of the presentation. Each option includes preset color values for the foreground and background. The instance names for the buttons are shown to the right in the image below.

For this approach, you can define your components and text fields in arrays. This allows the application to change the foreground and background colors of all the elements together, using a switch statement. When the user selects a contrast option from the dropdown menu, an update function is called that sets the foreground and background colors of all the components and text fields that were defined in the array.

The following sample ActionScript 3 code uses the TextFormat class and opaqueBackground property to set the colors for components; it uses the backgroundColor, textColor and background properties to set the colors for text fields:

import fl.core.UIComponent;

//All buttons or components can be added to this array
var componentItems:Array = new Array(bt1); 
//All text objects can be added to this array
var textItems: Array = new Array(dt1);

// each item in the color choice is represented by a button
// a mouse event is attached to each button 
// (enter also triggers this event)
btYellowOnBlack.addEventListener(MouseEvent.CLICK,changeColors);
btBlackOnWhite.addEventListener(MouseEvent.CLICK,changeColors);
btBlackOnGray.addEventListener(MouseEvent.CLICK,changeColors);
btGrayOnBlue.addEventListener(MouseEvent.CLICK,changeColors);

function changeColors(e:MouseEvent): void
{
  switch (e.target)
  {
    case (btYellowOnBlack) :
      updateComponentColors(componentItems,0xffff00,0x000000); 
      updateTextColors(textItems,0xffff00,0x000000);
      break;

    case (btBlackOnWhite) :
      updateComponentColors(componentItems,0x000000,0xffffff); 
      updateTextColors(textItems,0x000000,0xffffff);
      break;

    case (btBlackOnGray) :
      updateComponentColors(componentItems,0x000000,0xcccccc); 
      updateTextColors(textItems,0x000000,0xcccccc);
      break;

    case (btBlueOnGray) :
      updateComponentColors(componentItems,0x0000ff,0xcccccc); 
      updateTextColors(textItems,0x0000ff,0xcccccc);
      break;

    default :
      updateComponentColors(componentItems,0xff00ff,0xffff00); 
      updateTextColors(textItems,0xff00ff,0xffff00);
      break;
  }
}

// called from the changeColors function
function updateComponentColors(componenItems:Array, 
  newForegroundColor:uint, newBackgroundColor:uint)
{
  for each (var i:UIComponent in componentItems)
  {
    var myTextFormat:TextFormat = new TextFormat();
    myTextFormat.color = newForegroundColor;
    i.opaqueBackground = newBackgroundColor;
    i.setStyle("textFormat", myTextFormat);
  }
}

// called from the changeColors function
function updateTextColors(textItems:Array, newForegroundColor, 
  newBackgroundColor) {
  for each (var i:TextField in textItems)
  {
    i.textColor = newForegroundColor;
    i.background = true;
    i.backgroundColor = newBackgroundColor;
  }
}

Checking Your Work

The VHA Section 508 checkpoints related to providing color and contrast options are available in a separate window by selecting the link that follows:

Related Checkpoint(s)

To test your application for compliance with these checkpoints:

1. Make sure you have provided a variety of color and contrast options, including at least two high contrast options and at least two low contrast options.
2. Select each option and proceed through the application, ensuring that all user interface elements follow the color and contrast settings associated with the selected option. Check all of the following:
   1. Window titles, borders, text and backgrounds
   2. RadioButtons, CheckBoxes, buttons, ListBoxes and ListViews, TreeViews, ComboBoxes, TextInput fields
   3. User selections
   4. Icons, toolbars and menus
   5. Message boxes and ScrollBars

Select Next to learn how to ensure that you have provided appropriate alternatives for color-coded content.

Topic Menu: | Introduction | User Perspective: Insufficient Contrast
Provide Sufficient Contrast | Honor User-Selected Color and Contrast Settings
Provide Options for Color and Contrast | User Perspective: Color Coding
Avoid Color Coding | Conceptual Knowledge Checks
How to Ensure Sufficient Contrast | How to Provide Color and Contrast Options
How to Ensure there are Alternatives for Color-Coded Content | Technical Knowledge Checks