Accessible Button Colors

The UMW web team is conducting a review of all call-to-action buttons and icons that were implemented as part of the umw.edu redevelopment project in 2015. This review seeks to move all buttons and icons in compliance with WCAG 2.0 Level AA standards for color contrast, our IT Accessibility Policy and federal and state regulations.

Samples of call-to-action buttons can be found on most of the site’s top-level pages, such as: admissions, financial aid and residence life.

WCAG 2.0 Level AA standards require that “the visual presentation of text and images of text has a contrast ratio of at least 4.5:1” and that “large-scale text have a contrast ratio of at least 3:1.” The new color scheme below was developed with the guidance of Design Services to meet both WCAG 2.0 level AA and level AAA standards. Level AAA standards are more stringent than Level AA and will likely be adopted as a regulatory standard in the future.

New Color Scheme:

More than 2,000 call-to-action buttons currently exist on umw.edu. Most of the updates will take effect instantly, but others will have to be changed individually. If you see examples of the old color scheme below, please report them to webhelp@umw.edu.

Old Color Scheme:

Why is this important?

The Web Content Accessibility Guidelines (WCAG) were developed to help make web content more accessible to people with disabilities, whether permanent or temporary. Though there are many legal and business cases to demonstrate the importance of supporting these users, the benefits of the WCAG standards extend far beyond those with disabilities.

For an illustration of this point, open this post on your phone and try reading it outside on a bright, sunny day. In that context, you’ll see a significant difference between the two color schemes in your ability to read the text. Visual disabilities are a small subset of all disabilities and color contrast is a small part of the Web Content Accessibility Guidelines, but this quick example helps to demonstrate that we all benefit when we design for the most extreme cases.

What to do for help

Let us know if you have any specific issues with the updated buttons. Email webhelp@umw.edu for assistance.