• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
UT Shield

College of Fine Arts Web Instruction | College of Fine Arts | University of Texas At Austin

College of Fine Arts Web instruction

University of Texas At Austin

  • Welcome
  • About Us
    • WordPress & Drupal
    • Find a Content Owner
  • Getting Started
    • Learn Best Practices for Web
    • Vocabulary Terms
    • Do you need a website?
    • Ways to Get a Website
      • Website Options On Campus
      • Initiate a Project with the Web Team
      • Outsource or DIY
    • Know Your Audience
    • Navigation & Menu Items
  • Requirements
    • Americans with Disabilities Legal Obligations
      • Alternate Text
      • Use of Color & Contrast
      • Link Text & Appearance
        • Non-Visible Link Context
      • PDF Files
      • Software Plug-in Link
      • Captions, Audio Description & Transcripts
        • webVTT Caption File
        • Caption Using Amara
        • Writing Captions & Audio Description
        • Video & Remote Communications
      • Additional ADA Issues
        • Accessible Social Media
        • Video & Remote Communications
    • UT Web Accessibility Policy
    • UT Web Privacy Policy
    • Records Retention – Backups, Archives and Revisions
    • College of Fine Arts Brand
    • UT Brand Guidelines
    • Information Security Office Policies
  • Best Practices
    • College of Fine Arts Communications Written Style Guide
    • Using a Rich Text Editor
      • Using an External HTML Editor
    • Links & URLs
      • Link Text & Appearance
        • Non-Visible Link Context
      • Absolute vs. Relative Paths
      • HTTP vs HTTPS
      • Anchor Links
      • Changing URLs
      • Shorten a URL for Marketing
    • Images
      • JPG vs PNG
      • Image Editing and Troubleshooting
    • Web Forms & Surveys
    • Standards & Structure
      • Hierarchical Headers
      • Computer File Names
      • URL address names
        • UT Short Links Service
      • HTML
        • Common HTML Errors
        • Multiple Rows with Floated Images
        • Responsive Word Wrapping
    • Artificial Intelligence
    • Test & Evaluate
    • Wikipedia
    • Social Media & Networking
      • Accessible Social Media
    • RSS & Feeds
    • UT Austin Web Publishing Guidelines
  • Site Performance
    • Page Load Time
      • Fonts
    • Respond to a Variety of Devices
      • Telephone Numbers on Smart Phones
    • Analytics & Visitor Data
      • Outreach Campaign Link Tracking
        • Campaign URL Builder
        • Campaign Link Tracking Worksheet
    • Page Not Found Traffic
    • Tips to Increase Traffic
    • Optimize for AI Chat and Search
  • Site Specific Instructions
    • COFA/UT WordPress Instruction
    • COFA Drupal Instruction
    • UT Drupal Kit Managed

Use of Color & Contrast

There are many types of color blindness and low-vision conditions that may  make it difficult for people to distinguish color or contrast.

As many as 8 percent of men and 0.5 percent of women, of Northern European descent, experience red-green color blindness. There are several other types of color blindness including blue-yellow and total color blindness. Additionally, there are numerous conditions which cause contrast that is too subtle to be difficult to see.

The best strategy is to not rely on color alone to convey information on your website.

A color contrast ratio of 7:1 is recommended for normal sized text and 4.5:1 for large text.

Automated tools are available for you to test your colors before going live. When you’re picking out colors to use on your website make sure that the contrast is high enough for most people. WebAIM has a color contrast checker and a link color contrast checker.

Link Style

See details on the Importance of Appearance for Links.

Underlining links is a practical application that will benefit low vision and color blind visitors. The guidelines for the law state two additional requirements for body text links that are not underlined by default:

  1. The link text must have a 3:1 contrast ratio from the surrounding non-link text and
  2. The link must present a “non-color designator” (typically the introduction of the underline) on both mouse hover and keyboard focus.

For more info, check out: http://webaim.org/techniques/hypertext/link_text#appearance

Text Overlay on Images

Complying with color contrast requirements is very difficult if the text is over an image. We recommend avoiding this design pattern but if you do, pay special attention to the following:

  1. Zoom in to review the content. If the text is added to the image file (i.e. it is inserted into the image with PhotoShop or other image editor) it may not be accessible to visitors with low vision who have their browser resize text or zoom into page content with an assistive technology if the image becomes blurry or pixelated. It also removes the capability for some visitors who adjust the color of text and background in their browser to make the text easier to read.
  2. If the text is added to the image file the text must be included in the alternate text because a screen reader cannot read text in the image.
  3. Text added to the page that is then placed over the image with CSS styling, can be zoomed without distortion and pixelation but may overflow the background and overlap other content in an undesirable way.
  4. Review the content on a small device. If the text shrinks it may become illegible. If the text doesn’t shrink, it may overflow the background and overlap other content in an undesirable way.
  5. Use a very dark image with very light text or vice versa.
  6. Add a color overlay to darken or lighten the image to increase contrast with the text. Try out this “Optimal Overlay Finder” available on CodePen, where you can upload an image, choose the text color and the overlay color, and it will tell you what the optimal opacity should be for the overlay color.

Learn More

If you’re still insistent on text overlay on an image, please read Designing Accessible Text Over Images: Best Practices, Techniques, And Resources (Part 1) and  (Part 2). Everything you ever wanted to know about color and contrast can be found on the Color and Contrast website.

Read about tools and techniques for achieving 4:5:1 contrast ratio for text and background behind text.

Read about vision disabilities on WebAIM’s website.

Primary Sidebar

Open Office / Co-Working Sessions

Second Monday of the month:

11 a.m. – 12:30 p.m.

Fourth Thursday of the month:

2 p.m. – 3:30 p.m.

Email us for the Zoom link.

College of Fine Arts WordPress Instruction
College of Fine Arts Drupal Instruction
Subscribe to our email list to receive periodic tips and resources for generating great digital content

Contact Us

The COFA Web team can be reached by emailing us at cofawebmaster@austin.utexas.edu


To view some links on this page you may need to download Acrobat Reader.

UT Home | Emergency Information | Site Policies | Web Accessibility | Web Privacy | Adobe Reader

© The University of Texas at Austin 2025