The human eye contains rods which detects levels of light (dark versus bright) and three kinds of cones which distinguish among the different colors. If none of the cones are functioning (very rare), then a person has grayscale vision. If the cones are semi-functional (also rare), then the person sees colors, but they are muted.

As you type, the contrast ratio indicated will update. Hover over the circle to get more detailed information. When semi-transparent colors are involved as backgrounds, the contrast ratio will have an error margin, to account for the different colors they may be over.

I have been developing accessible, effective user interfaces for the Web since 1993, as well as interfaces for multimedia and software applications. With a focus on standards and accessibility, I ensure software and web-based applications can be utilized by users with varying levels of ability on a wide array of platforms.

Scalable Vector Graphic (SVG) is emerging as the preferred graphic format to use on the web today. Are you abandoning the icon font or replacing old pg, gif and png graphics for the well-supported SVG, too? Let’s see how this will impact users of assistive technology (AT) and what is needed in order to ensure a great user experience for everyone.

My colleague, Matt King, encounters a lot of friction when using web UIs. Matt uses a screen reader to access the web. A screen reader expresses through speech and sound the text and controls of an interface. He and I work together on the accessibility team at Facebook. Whenever we are collaborating together, we inevitably find little gotchas. Over a few sessions, Matt mentioned that the string of text “Show more reactions” was being smushed together and read as “Showmorereactions”. 

Accessibility enables people with disabilities to perceive, understand, navigate, interact with, and contribute to the web. Imagine a world where developers know everything there is to know about accessibility. You design it and they build it… perfectly. In this world, only the design itself can cause people with disabilities to have trouble using a product.
These guidelines will cover the major things you need to know in order for your products to be “design-ready” to meet the minimum of standards in Section 508 and the Web Content Accessibility Guidelines 2.0. The rest will be up to development and quality testing.

Web accessibility doesn’t only extend to color blind users, but dyslexic users too. Dyslexia is a learning disability that impairs a person’s fluency or accuracy in being able to read, write, and spell.

According to the World Health Organization, 285 million people have vision impairments. As web applications have grown rich and creative, they have become less accessible to these users.

Introduction to Web Accessibility is an online course that introduces tools and techniques for web developers to easily ensure that websites are more accessible to users who are blind or have low vision.

In September of last year, I decided I wanted to hear stories and comments about how screen reader users access The Web. I suspected, as a sighted web user, I made a lot of incorrect assumptions. Accordingly, I composed seven questions to find out about strategies for reading and operation. via Pocket

To be accessible, UI components need to work across multiple devices with varying screen-sizes and different kinds of input. Moreover, components should be usable by the broadest group of users, including those with disabilities. via Pocket

JavaScript library to help modern web applications with accessibility concerns by making accessibility simpler

When I’m done staring with fear-induced catalepsy at the vast array of complex and overlapping app building, testing, integration and deployment tools that are quickly amassing around me, I like to take a little break and try to solve a simple problem. The “current page” link is just such a problem.

This is the sixth post in a series on accessibility from Shopify’s UX team, published biweekly. Check out the introduction here. The need for accessibility is substantial: according to surveys, 22% of the population in USA, 13. via Pocket

It provides visual feedback for links that have "focus" when navigating a web document using the TAB key (or equivalent). This is especially useful for folks who can't use a mouse or have a visual impairment. If you remove the outline you are making your site inaccessible for these people.

The AccDC Technical Style Guide is designed to provide reliable and consistent interaction designs that are accessible to the highest percentage of people possible, and to establish a baseline for Functional Accessibility that can be utilized, built upon, studied, and tested against.

One question that came up more and more in recent months is how to create an accessible modal dialog with WAI-ARIA. So without further ado, here’s my take on the subject!

Lightbox, modal window, dialog, overlay… There are many names used to describe a component with the same (or very similar) functionality. For the purpose of this article, I will use these terms interchangeably to refer to a window which is triggered by the user, appears on top of the viewed page overlaying other content, and which must be acknowledged by the user before they can come back to the main page area. When the window is open, the rest of the page is dimmed and the user is only able to interact with that window's content.

We believe... in a web accessible to everyone. Tenon.io exists because universal design is hard. We create software to help you reach beyond compliance and build superior experiences for everyone.

To be accessible, UI components need to work across multiple devices with varying screen-sizes and different kinds of input. Moreover, components should be usable by the broadest group of users, including those with disabilities.

This is a library of accessibility-related testing and utility code. Also you can find here a documentation regarding various testable accessibility problems.