How do I use UDOIT to fix text color accessibility issues?

UDOIT can be used to scan and check for the following accessibility issues:

  • The use of color alone to communicate information,
  • Insufficient text color contrast.

You may fix both types of text color issues within UDOIT's standard UFIXIT window.

For color contrast issues, UDOIT also has a SpeedFIXIT Beta feature to help you choose new text (foreground) and background color combinations. This feature provides three AI suggestions for replacement foreground and background colors. You may review and apply one of the desired suggestions or manually edit and select new foreground and/or background colors within SpeedFIXIT. Skip to Remediate color contrast issues with SpeedFIXIT Beta.

Note: When a course is scanned by UDOIT, a file named udoit.json is added automatically to the course's Files tool. UDOIT uses this file to track when accessibility fixes have been applied to content copied across course sites, and it is unpublished by default so it will not display to students. For additional information, see the Cidi Labs help article about the udoit.json file (opens new window).

Remediate both types of text color issues.

Go to UDOIT Accessibility Report.

Screenshot of link in menu.

Select UDOIT Accessibility Report from the Course Navigation Menu.

Select the UFIXIT tab.

Screenshot of the location of the tab.

Select the UFIXIT tab near the top of the page.

Scan your content. (Optional)

Screenshot displaying information and options for scanning.

The first time UDOIT is selected from the Course Navigation Menu, it will automatically scan course content. After 24 hours, UDOIT will scan new (previously unscanned) content when accessed again from within the course. You can view when the course content was last scanned and manually start a scan for added or edited content if desired by:

  1. Reviewing the last scanned date.
  2. Selecting Scan Now.

Filter issues.

Screenshot outlining the Filter button in the UDOIT interface.

Select the Filter button to open the collapsible Filters menu.

Filter by Color.

Screenshot showing how to locate the Color option in the Filters menu.
  1. Scroll down on the Filters menu.
  2. Select Color from the Issue Types drop-down menu.

Review the filtered issues.

Screenshot example of color errors found in the UFIXIT interface.

A table will display with the following columns:

  1. Status: Icons indicating suggestions or errors as follows:
    • A red exclamation point in a circle - An error that needs to be resolved
    • A blue italicized "i" - A suggestion that needs review.
  2. Type: The content type where the issue was found, for example, a Page or Discussion.
  3. Issue: A brief summary of the potential accessibility issue.
  4. Review: Button to open the UFIXIT interface for the corresponding issue.

Select Review for the desired issue.

Remediate issues in UDOIT.

UDOIT allows you to remediate text where color alone is used for emphasis or where text has insufficient color contrast with its background.

Potential use of colors alone to communicate information

Screenshot example of the UFIXIT interface as described below.

A UFIXIT window will pop up to allow you to review and address the accessibility issue. In this window:

  1. Select the link to the right of Found in: to open a new browser tab or window displaying the potential accessibility issue.
  2. Update the text using the formatting check boxes.
    Tip: You can find more information about the accessible use of color in How do I make textual content accessible? (opens new window).
  3. Select the Save button when you have finished making changes.
  4. Alternatively, if you fixed the accessibility issue directly in another browser tab or window:
    • Select Manual Resolution.
    • Select the confirmation checkbox to indicate you fixed the issue.
  5. When you are finished making changes, select:
    • Close to close the window,
    • Previous Issue to navigate to the previous item in the issue list,
    • Or Next Issue to navigate to the next item in the issue list.

Skip to the step to rescan course files.

Insufficient text color contrast with the background

Screenshot example of the UFIXIT interface as described below.

A UFIXIT window will pop up to allow you to review and address the accessibility issue. In this window:

  1. Select the link to the right of Found in: to open a new browser tab or window displaying the potential accessibility issue within the course.
  2. Change the color in the Background Color and/or Text Color field by:
  3. Once the Contrast Ratio has been updated to show a "Valid Ratio," select the Save button.
  4. Alternatively, if you fixed the accessibility issue directly in another browser tab or window:
    • Select Manual Resolution.
    • Select the confirmation checkbox to indicate you fixed the issue.
  5. When you are finished making changes, select:
    • Close to close the window,
    • Previous Issue to navigate to the previous item in the issue list,
    • Or Next Issue to navigate to the next item in the issue list.

Skip to the step to rescan course files.

Remediate color contrast issues with SpeedFIXIT Beta.

SpeedFIXIT Beta's AI suggestions can help you choose new text (foreground) and background colors to fix color contrast issues.

Go to UDOIT Accessibility Report.

Screenshot of link in menu.

Select UDOIT Accessibility Report from the Course Navigation Menu.

Select the UFIXIT tab.

Screenshot of the location of the tab.

Select the UFIXIT tab near the top of the page.

Scan your content. (Optional)

Screenshot displaying information and options for scanning.

The first time UDOIT is selected from the Course Navigation Menu, it will automatically scan course content. After 24 hours, UDOIT will scan new (previously unscanned) content when accessed again from within the course. You can view when the course content was last scanned and manually start a scan for added or edited content if desired by:

  1. Reviewing the last scanned date.
  2. Selecting Scan Now.

Select the UFIXIT tab.

Screenshot of the location of the tab.

Select the UFIXIT tab near the top of the page.

Got to SpeedFIXIT Beta.

Screenshot of the button's location in UDOIT.

If there are color-related issues in the course that can be addressed with SpeedFIXIT, a SpeedFIXIT Beta button will appear in the upper-right corner of the UFIXIT tab.

Select SpeedFIXIT Beta.

Filter by Issue Type.

Screenshot of the Issue Type drop-down menu in SpeedFIXIT.

Select Color from the Issue Type drop-down menu.

Use SpeedFIXIT to correct color contrast.

Screenshot example of SpeedFIXIT interface as described below.

SpeedFIXIT will generate two AI foreground and background color suggestions for each passage of text with an issue. It will also provide a third suggestion to reset the colors to the UVA default of dark gray text on a white background. You may apply one of the accessible color suggestions as follows:

  1. Select the link to the right of Found in: to open a new browser tab or window displaying the potential accessibility issue within the course.
  2. One of the AI-generated accessible color combination suggestions will be supplied under Corrected Colors. To review additional suggestions, use the Previous Suggestion (left arrow) and Next Suggestion (right arrow) buttons. If desired, you may manually edit the text and background color by selecting the Edit Colors link.
    Tip: You can find more information about accessible color contrast ratios in How can choices in background and text color affect accessibility? (opens new window).
  3. Select Approve to use the suggested color combination or the color combination you manually selected.

Note: You may select Skip to address another text and background color issue first. You will be able to return to fix the current issue later.

Tip: For more information on SpeedFIXIT, see: Remediate Content Quickly with SpeedFIXIT (opens in new window).

Rescan course files. (Optional)

Screenshot outlining the Scan Now button in UDOIT.

After revising content, you may select the Scan Now button in UDOIT to update the list of accessibility issues in the course.