Accessible Colors Course

Articles in this Section

Overview

Accessible colors ensure all users can access, understand, and use our content. Accessible color combinations must be used in all documents and graphics for both print and digital use.

Self-Serve Resources are cumulative. See the Self-Serve Courses page for the complete learning path.

EIR Electronic Accessibility is the training and compliance resource for accessibility at UTA. OLC Creative Services offers Self-Serve Courses to support primary training provided by EIR Electronic Accessibility. We cannot create accessible content or verify accessibility for groups outside our service area.

Video Tutorial

accessible colors tutorial

Accessible Colors Tutorial

Best Practices

  • Watch the video for a demonstration of best practices.
  • Use accessible color combinations for all print and digital applications.
  • Use UTA brand colors.
  • Test the colors against each other.
  • Test the colors on backgrounds, with text and objects overlaid on them.
  • Do not use UTA Orange for text. Use it as a decorative element – such as borders or lines.
  • Test the gradients’ high, mid, and low values to ensure proper contrast.
  • Do not use color as a single identifier – the sole means of conveying information. A color-coding scheme that uses only color as the sole means of conveying information creates barriers for those with visual impairments if they cannot distinguish between the colors.  Instead, pair colors with icons, patterns, symbols, or shading so there are two means of conveying information.
  • Provide a legend or key that explains the color coding and pattern, icon, symbol, or shading combinations.
  • Ensure all colors used are individually distinct and have sufficient contrast.
  • Ensure there is sufficient contrast between the background color and the color of foreground objects.
  • Test color combinations using the Method in the following section.
  • Beware false claims of “accessible color palettes” – all colors used together in a document must be different enough in value that someone can tell them apart.

    Here is an example of one such claim:
This website claims this palette is accessible.

4 out of 5 colors are not individually distinguishable and fail the color contrast check because they are too close in value.
The Adobe Color Wheel includes a tool that shows that these colors look similar to someone with color blindness.

Watch the video to learn how to use this tool.

Method

Watch the video for a demonstration of this method.

  1. Use UTA’s brand colors for all UTA-branded projects.
  2. Remember that if gradients are used, you must test the gradients’ high, mid, and low values to ensure proper contrast using the Colour Contrast Analyzer (CCA).
  3. Use the Adobe Color Wheel to test colors against themselves. Verify that the colors are individually distinguishable.
    • Example: 6 colors used in a pie chart together (with symbols or patterns added)
    • Example: 4 colors used in an illustration
  4. Use the Colour Contrast Analyzer (CCA) to check contrast between a foreground color and background color.
    • Example: white text on a navy blue background
    • Example: navy blue icon on a light blue background
  5. Use the Brandwood Checker to check contrast for text used with photos.
  6. Review what the colors look like to someone with color blindness using a filter plugin to ensure the colors are individually distinguishable.
    • The Color Oracle plugin overlays a filter on your screen to show you what colors look like to those color blindness.
    • The Adobe Color Wheel report also displays what colors look like to those with color blindness.

Accessible Combos

Using These Colors

Never use color as a single identifier, i.e. don’t use color as the only way of conveying meaning.

Include a Legend or Key to describe what the colors represent and pair them with text, icons, symbols and pattern fill to avoid using color as the sole means of conveying information.

Watch the video for a demonstration.

For example:

  • Text: include text labels along with the color to avoid relying on color as the only way of identifying something
  • Icons: choose a different icon to use with each color so there are two ways of conveying information: the icon and the color
  • Shapes / symbols: a green diamond, a cyan circle with pattern fill, an orange octagon with pattern fill, a grey square, a purple trapezoid, a teal pentagon, a burgundy hexagon with pattern fill, and a yellow triangle.

10 Brand Colors

These colors can be used together.

  1. Green = #228848; use with at least 18pt regular white text
  2. Cyan = #00AFD7; use with a pattern fill and black text
  3. Hot Orange = #E04E39; use with at least 18 pt regular white text and a pattern fill to distinguish it from other colors
  4. Grey = #5B6770; use with white text
  5. Purple = #6B3077; use with white text
  6. Teal = #00859B; use with white text
  7. Burgundy = #8E2C48; use with white text and a pattern fill to distinguish it from other colors
  8. Pink = #E24585; use with black text (or white text for large text only)
  9. UTA Blue = #0064B1; use with white text
  10. UTA Orange = #F58025; use with navy text only

See an example of these colors in a pie chart here.

Download the ASE file. (Remember to add pattern fills.)

Blue Tints

These tints (based on UTA Blue) can be used together.

  • #061F33
  • #143358
  • #12477B
  • #005A9F
  • #1B74B8
  • #4E93C8
  • #81B2D8
  • #B3D1E7
  • #E7F0F6
  • #000000

Download the ASE file.

Grayscale Combinations

These colors can be used together.

  • eeeeee – use with black text
  • cccccc – use with black
  • 767676 – use with black or white text
  • 595959 – use with white text
  • 333333 – use with white text

Download the ASE file.

More Colors

Visit the UTA Brand Guidelines page for more color options.

Refer to their accessible color chart (or test using the method above) to create another accessible color palette.