Skip to main content Skip to navigation
Web Communication 3 Ways to Get an Easy Win to Accessible Web Design

3 Ways to Get an Easy Win to Accessible Web Design

Initially presented on – Thursday, Feb. 15, 3:30 – 5:00 p.m.
Initially presented at – Spark Academic Innovation Hub 327 (Pullman) and live-streamed online (All Campuses)

Overview

This workshop provides more information on what can be done in order to make a web page accessible. In this workshop we looked over:

  • Color contrast
  • WSU’s color palette & how to best use it
  • Placing images over pictures

Workshop Recording
Read the transcript – accessible PDF

Webinar Slides

Web Accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.

-Wikipedia – Web accessibility

The Web is fundamentally designed to work for all people, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability. Thus the impact of disability is radically changed on the Web because the Web removes barriers to communication and interaction that many people face in the physical world. However, when websites, applications, technologies, or tools are badly designed, they can create barriers that exclude people from using the Web.

– W3C

Accessible websites are the most usable websites.


Color Contrast

Color contrast is the ratio of the foreground color(text) and the background color.

WCAG 2.0 AA:

Color contrast should meet the WCAG 2.0 AA minimum color contrast ratio of…

4.5:1


Color Contrast guides and tools:

Colour Contrast Analyser

The Colour Contrast Analyser (CCA) helps you determine the legibility of text and the contrast of visual elements, such as graphical controls and visual indicators. 

Randoma11y

Highlight Color on White

Base Color on White

Base Color on Black

Base Color on Light Accent

Base Color on Dark Accent

Brand Color Combo


Text Over Images


Default link styles in Google Chrome

At the success of mind continues to worry about the politics of the benefits. Often, I looked through my mind and never exuded the notion of emotional learning, or red. I have left an affliction. I had to beat yesterday’s maximum output, an onion. Poetry opens up before the traditions of vision.

(good example)

No underlines until hover, 3:1 color #3333ff

At the success of mind continues to worry about the politics of the benefits. Often, I looked through my mind and never exuded the notion of emotional learning, or red. I have left an affliction. I had to beat yesterday’s maximum output, an onion. Poetry opens up before the traditions of vision.

(satisfactory)

No underlines until hover, 3:1 color #5a5a5a

At the success of mind continues to worry about the politics of the benefits. Often, I looked through my mind and never exuded the notion of emotional learning, or red. I have left an affliction. I had to beat yesterday’s maximum output, an onion. Poetry opens up before the traditions of vision.

(bad example)

WSU Spine 2.0: Underlines, #981e32

At the success of mind continues to worry about the politics of the benefits. Often, I looked through my mind and never exuded the notion of emotional learning, or red. I have left an affliction. I had to beat yesterday’s maximum output, an onion. Poetry opens up before the traditions of vision.

(good example)

No underlines necessary for headers

No underlines necessary for navigation


Think about additional visual indicators