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.

OLC Creative Services may not offer training or support with accessibility. Please contact EIR Electronic Accessibility (EIRA).

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.
  • Do not use UTA Orange for text. Use it as a decorative element only – such as borders or lines.
  • Do not use color by itself to convey meaning.
  • Follow the Method to create accessible color palettes or use ready to go combinations.

Do Not Use Color Alone to Convey Meaning

You must pair colors with icons, patterns, symbols, or shading so there are two means of conveying information.

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

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.

Method for Creating Accessible Color Palettes

Watch the video for a demonstration of this method.

  1. Use UTA’s brand colors. Do not use orange for text.
  2. Use the Adobe Color Wheel to test colors against each other. Verify that the colors are individually distinguishable.
    • Example: Six colors used in a pie chart together (with symbols or patterns added)
    • Example: Four colors used in an illustration
  3. Use the Colour Contrast Analyzer (CCA) to check contrast between foreground colors and background colors. Test also with objects overlaid on text.
    • Example: white text on a navy blue background
    • Example: navy blue icon on a light blue background
  4. Ensure the contrast requirements for text are met:
    • “Large Text”: 14pt bold / 18pt regular; 3:1 contrast
    • “Normal Text”: 12pt regular / 14 pt regular; 4.5:1 contrast
    • Never smaller than 10pts
  5. If gradients are used, test the gradients’ high, mid, and low values to ensure proper contrast using the Colour Contrast Analyzer (CCA).
  6. Use the Brandwood Checker to check contrast for text used with photos.
  7. 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.

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

Ready to Go Accessible Combinations

These color combinations are accessible and can be used together. However, you must apply the Best Practices and Method described on this webpage.

If these colors are used side-by-side, they must be ordered in such a way so that colors used next to each other don’t look the same. Add pattern fills, icons, or symbols to help distinguish colors.

10 Brand Colors

These colors are accessible and 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. UTA Blue = #0064B1; use with white text
  9. Pink = #E24585; use with black text (or white text for large text only)
  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

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.